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

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

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

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

Контент

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

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

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

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

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

## 1. Тип функції в `type` (псевдонім типу)

Найпростіший і найпоширеніший спосіб - описати сигнатуру функції через стрілкову форму:

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

const sayHello: Greet = (name) => `Привіт, ${name}!`;

console.log(sayHello("Tim")); // Привіт, Tim!
```

Тут:

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

---

## 2. Тип функції в `interface`

В інтерфейсі функцію можна описати **двома способами**:

### Варіант 1. З використанням стрілкової сигнатури

```javascript
interface Greet {
  (name: string): string;
}

const greet: Greet = (name) => `Привіт, ${name}!`;
```

### Варіант 2. Як властивість об'єкта, яка є функцією

```javascript
interface User {
  name: string;
  greet: (message: string) => void;
}

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

> Цей варіант частіше зустрічається, коли функція - **метод об'єкта**.

---

## 3. Метод в інтерфейсі (з коротким синтаксисом)

TypeScript підтримує "методний" запис (як у класах):

```javascript
interface Logger {
  log(message: string): void;
  error(message: string): void;
}

const consoleLogger: Logger = {
  log(msg) {
    console.log("LOG:", msg);
  },
  error(msg) {
    console.error("ERROR:", msg);
  },
};
```

> Обидва варіанти (`log: (msg) => void` і `log(msg): void`) повністю еквівалентні.

---

## 4. Generic-функція в інтерфейсі або типі

Якщо функція повинна працювати з різними типами даних, можна використати `<T>`:

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

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

identity(42);       // number
identity("hello");  // string
```

Або в інтерфейсі:

```javascript
interface Transformer {
  <T>(data: T): T;
}

const transform: Transformer = (data) => data;
```

---

## 5. Декілька функцій (overloads) в інтерфейсі

TypeScript дозволяє оголошувати **перевантаження** всередині інтерфейсів:

```javascript
interface Converter {
  (value: string): number;
  (value: number): string;
}

const convert: Converter = (value: any): any =>
  typeof value === "string" ? Number(value) : String(value);

convert("10"); // number
convert(20);   // string
```

---

## 6. Приклад у контексті React / подій

Функція як проп:

```javascript
interface ButtonProps {
  label: string;
  onClick: (event: MouseEvent) => void;
}

const button: ButtonProps = {
  label: "Click me",
  onClick: (e) => console.log(e.type),
};
```

---

## Порівняння способів

| Сценарій | Синтаксис | Де використовується |
| --- | --- | --- |
| Псевдонім типу | `type Fn = (x: number) => string` | Універсальні функції |
| Інтерфейс (стрілкова форма) | `interface Fn { (x: number): string }` | Call signatures |
| Інтерфейс (властивість-функція) | `greet: (msg: string) => void` | Методи об'єктів |
| Інтерфейс (методна форма) | `greet(msg: string): void` | Класи, об'єкти |
| Generic-функція | `<T>(value: T) => T` | Універсальні типи |
| Overloads | `(x: string): number; (x: number): string;` | Багато сигнатур |

---

## Підсумковий приклад - все разом

```javascript
type MathOp = (a: number, b: number) => number;

interface Calculator {
  add: MathOp;
  subtract(a: number, b: number): number;
  multiply: (a: number, b: number) => number;
  divide(a: number, b: number): number;
}

const calc: Calculator = {
  add: (a, b) => a + b,
  subtract(a, b) {
    return a - b;
  },
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
};
```

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

Для рев’юера

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

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