Як вказати тип функції в інтерфейсі або type?

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

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,
};

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

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

Premium

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