Типи даних для методів та функцій (void, type, never, custom, optional, readonly)

Void

У TypeScript void є спеціальним типом даних, який вказує, що функція не повертає жодного значення. Тобто, функція з типом void не має оператора return або повертає undefined.

function sayHello(): void {
    console.log("Hello, World!");
}

У цьому прикладі sayHello - це функція, яка не повертає жодного значення. Вона виконує console.log і не має return оператора. Утім, якщо його вказати, то одразу виникне помилка.

Функції з типом void зазвичай використовуються для виконання певних дій без необхідності повертати якесь значення. Наприклад, функція, яка записує дані до бази даних чи виводить їх на екран, може бути визначена з типом void, оскільки вона не повертає жодних конкретних даних.

Return Type

В TypeScript Return Type (тип повернення) вказує тип даних, який функція повертає. Це означає, що можна визначити очікуваний тип даних, який повинна повертати функція.

Це допомагає розробникам зрозуміти, який тип даних очікується від функції, і допомагає уникнути помилок в час виконання, пов'язаних з неправильним типом даних, що повертається функцією.

Повернення числа:

function add(a: number, b: number): number {
  return a + b;
}

Повернення рядка:

function greet(name: string): string {
  return "Hello, " + name + "!";
}

Never

Never - це спеціальний тип в TypeScript, який означає, що функція ніколи не закінчується і нічого не повертає (навіть undefined).

Прикладом такої функції може бути listen в express. Тобто підключення до сервера постійне. Навіть якщо і виникає помилка, то функція не закінчиться.

function throwError(message: string, status: number): never {
    throw new Error(message, status);
}

throwError('Server error', 500);

Function Type

В TypeScript Function Type - це спосіб визначити тип для функцій. Можна вказати типи параметрів та тип даних, який функція повертає. Це дозволяє статично перевірити відповідність типів при виклику функції та покращує надійність коду.

let addFunction: (a: number, b: number) => number;

addFunction = (a, b) => a + b;

console.log(addFunction(1, 4));

З прикладу вище видно, що функція приймає два числові параметри. І якщо, скажімо ми в неї передамо рядок, то виникне помилка.

Наприклад, функція нічого не повертає, але приймає число для виводу в консолі.

let printFunc: (item: number) => void;

printFunc = (item) => {
  console.log("item: ", item);
};

printFunc(1);

Якщо передати у функцію рядок, то виникне помилка.

Опис структури особливо корисно робити для callback-функцій.

function mathFunc(
  num1: number,
  num2: number,
  callback: (arg1: number, arg2: number) => number
): void {
  console.log("result", callback(num1, num2));
}

mathFunc(1, 2, (a, b) => a + b);
mathFunc(7, 3, (a, b) => a - b);

У прикладі вище окрім числових аргументів ми передаємо callback-функцію в нашу головну функцію та описуємо її структуру.

Custom Types

Розробник може створити свій власний тип даних. Кастомний тип позначають ключовим словом type, а після нього вказують назву типу з великої літери і далі описують структуру. Наприклад опишемо тип для книжки, яку створювали раніше.

// описуємо тип даних
type Book = {
  id: number;
  bookName: string;
  bookAuthor: string;
  bookPrice: number;
  cathegory: string[];
  inStock: boolean;
  details: {
    review: string;
    date: Date;
    imgCover?: string;
  };
};

// призначимо структуру створеному обʼєкту
const currentBook: Book = {
  id: 12345,
  bookName: "Sophie's World",
  bookAuthor: "Jostein Gaarder",
  bookPrice: 4.49,
  cathegory: ["philosophy", "history"],
  inStock: true,
  details: {
    review:
      "The international bestseller about life, the universe and everything.",
    date: new Date(),
  },
};

Тобто ми описали структуру змінної, а потім цей тип призначили змінній. І Якщо буде хоч одна невідповідність, то нам буде вказано на помилку. Наприклад, якщо не буде вказано, якийсь обовʼязковий параметр.

Подивімося на наш код js після компіляції. Як бачимо, тип не компілюється.

Опис кастомних типів даних можна винести в окремі файли і експортувати-імпортувати їх.

types.ts

export type Book = {
  id: number;
  bookName: string;
  bookAuthor: string;
  bookPrice: number;
  cathegory: string[];
  inStock: boolean;
  details: {
    review: string;
    date: Date;
    imgCover?: string;
  };
};

Можна також експортувати всі типи одним обʼєктом: export type { Book };

І імпортувати в головному файлі.

app.ts

type Book = import("./types").Book;

const currentBook: Book = {
  id: 12345,
  bookName: "Sophie's World",
  bookAuthor: "Jostein Gaarder",
  bookPrice: 4.49,
  cathegory: ["philosophy", "history"],
  inStock: true,
  details: {
    review:
      "The international bestseller about life, the universe and everything.",
    date: new Date(),
  },
};

В цьому прикладі ми тип імпортуємо як type Book = import("./types").Book;

Утім у сучасній розробці використовується сучасний імпорт модулів, наприклад import { Book } from './types';, але для цього потрібно налаштувати компілятор TypeScript, що буде розглянуто далі.

Якщо зараз хочете перевірити роботу цього імпорту розгорніть стрілку нижче.

Налаштування export-import типів (трохи наперед)

Щоб запрацював імпорт типу: import { Book } from './types'; потрібно провести такі налаштування.

1. У index.html під'єднати js як модуль

index.html

<script src="./app.js" type="module"></script>

1. У корені проєкту створити файл tsconfig.json приблизно з такими налаштуваннями.

tsconfig.json

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "target": "es6",
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "lib": ["dom", "ES2021"],
    "module": "es2020",
    "skipLibCheck": true,
    "strictNullChecks": true,
    "target": "es2019"
    // "sourceMap": true
  },
  "include": ["**/*.ts"]
}

1. Відповідно правильно заімпортувати тип змінної.

app.js

import { Book } from "./types";

const currentBook: Book = {
  id: 12345,
  bookName: "Sophie's World",
  bookAuthor: "Jostein Gaarder",
  bookPrice: 4.49,
  cathegory: ["philosophy", "history"],
  inStock: true,
  details: {
    review:
      "The international bestseller about life, the universe and everything.",
    date: new Date(),
  },
};

console.log("currentBook: ", currentBook);

1. Запустити компіляцію усіх файлів ts

terminal

tsc

1. Перевірити в консолі правильне відпрацювання імпорту

Все це буде розглянуто далі. Це для тих, хто хоче перевірити експорт-імпорт в typeScript.

Трохи докладніше про помилки компіляції імпортованих модулів можна почитати на форумі.

Опціональні параметри та властивості

У TypeScript можна зробити параметр функції опціональним, додавши знак питання ? після імені параметра. Тобто цей параметр можна передавати, а можна і не передавати. Раніше подібний синтаксис було розглянуто при роботі з обʼєктами.

function greet(name: string, age?: number) {
    console.log(`Hello, ${name}!`);
    if (age !== undefined) {
        console.log(`You are ${age} years old.`);
    }
}

greet("Alex"); // Допустимо, age - не обов'язковий
greet("Helga", 31); // Допустимо, можна передати age

Якщо знак питання прибрати, то параметр є обовʼязковим. Тобто, якщо його не передати, то виникне помилка.

Read only

Якщо якомусь параметру ми хочемо задати можливість тільки читання і заборонити зміну, то використовують інструкцію readonly

type myBook = {
 readonly title: string;
  year?: number;
};

const book1: myBook = {
  title: "Book Title",
  year: 2001
}

book1.title = "New titile";

В такому випадку при спробі змінити змінну нам видасть помилку.