Як створити тип функції за допомогою type?

TypeScriptJunior~1 хв читання

1. Базовий синтаксис

javascript

type TypeName = (param1: Type1, param2: Type2, ...) => ReturnType;

Тобто ти описуєш сигнатуру функції: які параметри вона приймає і що повертає.

Приклад 1. Проста функція

javascript

type Greet = (name: string) => string;

const sayHello: Greet = (name) => `Hello, ${name}!`;

console.log(sayHello("Tim")); // Hello, Tim!

Тут:

Greet - тип функції
приймає один аргумент name: string
повертає string

Приклад 2. Функція без значення, що повертається (`void`)

javascript

type Logger = (message: string) => void;

const log: Logger = (msg) => console.log(msg);

Тип void означає, що функція нічого не повертає, лише виконує дію (побічний ефект).

Приклад 3. Функція з кількома параметрами

javascript

type Sum = (a: number, b: number) => number;

const add: Sum = (x, y) => x + y;

Приклад 4. Функція з необов'язковими параметрами

javascript

type Greet = (name: string, age?: number) => string;

const greet: Greet = (name, age) =>
  age ? `Hello, ${name}! You are ${age} years old.` : `Hello, ${name}!`;

greet("Tim");       // Hello, Tim!
greet("Alex", 25);  // Hello, Alex! You are 25 years old.

age?: number - необов'язковий параметр.

Приклад 5. Generic (узагальнена) функція

javascript

type Identity = <T>(value: T) => T;

const identity: Identity = (value) => value;

identity(42);       // number
identity("hello");  // string
identity({ id: 1 }); // { id: number }

Тут <T> - generic-параметр, що дозволяє функції працювати з будь-якими типами.

Приклад 6. Функція, що повертає `Promise`

javascript

type FetchUser = (id: number) => Promise<{ id: number; name: string }>;

const fetchUser: FetchUser = async (id) => {
  return { id, name: "Tim" };
};

Promise<T> вказує, що функція асинхронна і повертає результат типу T після виконання.

Приклад 7. Функція з rest-параметрами

javascript

type Join = (...parts: string[]) => string;

const join: Join = (...parts) => parts.join("-");

console.log(join("a", "b", "c")); // "a-b-c"

...parts: string[] - функція приймає будь-яку кількість аргументів.

Приклад 8. Функція з кортежем аргументів

Якщо ти хочеш задати чітко визначені аргументи різних типів:

javascript

type Format = (...args: [prefix: string, count: number, active: boolean]) => string;

const format: Format = (prefix, count, active) =>
  `${prefix}: ${count} (${active ? "on" : "off"})`;

format("Users", 5, true); // "Users: 5 (on)"

Використання типів функцій усередині інших структур

Такі типи можна вставляти всередину об'єктів, інтерфейсів та інших type:

javascript

type User = {
  name: string;
  greet: (msg: string) => void;
};

const user: User = {
  name: "Tim",
  greet: (msg) => console.log(`${msg}, I am ${user.name}`),
};

Порівняння `type` і `interface` для функцій

Особливість	`type`	`interface`
Описує сигнатуру функції	Так	Так
Підтримує union/intersection	Так	Ні
Можна описувати generic	Так	Так
Можна розширювати (extends)	Через `&`	Через `extends`
Рекомендується використовувати	Для функцій, об'єднань і generics	Для структур (об'єкти, класи)

Підсумок

Що описуємо	Синтаксис	Приклад
Проста функція	`(x: number) => number`	`type Add = (a: number, b: number) => number`
Без `return`	`(msg: string) => void`	`type Logger = (msg: string) => void`
Generic	`<T>(v: T) => T`	`type Identity = <T>(v: T) => T`
Async	`() => Promise<T>`	`type Fetch = () => Promise<User>`
Rest	`(...args: string[]) => string`	`type Join = (...args: string[]) => string`

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.