Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як створити тип функції за допомогою type?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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` |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати599 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.