Типізація методів класу

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

1. Як типізувати параметри методу

Типізація параметрів методів у класі нічим не відрізняється від звичайних функцій.

javascript

class User {
  greet(name: string, age: number): void {
    console.log(`Hello, ${name}! You are ${age} years old.`);
  }
}

Тут:

name - параметр типу string,
age - параметр типу number,
void - означає, що метод нічого не повертає.

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

javascript

class Logger {
  log(message: string, prefix: string = "INFO", userId?: number) {
    console.log(`[${prefix}] ${message}`, userId ?? "");
  }
}

const logger = new Logger();
logger.log("Started");                // [INFO] Started
logger.log("Error", "ERROR", 101);    // [ERROR] Error 101

prefix = "INFO" - значення за замовчуванням;
userId?: number - необов'язковий параметр.

Приклад з rest-параметрами

javascript

class MathUtils {
  sum(...numbers: number[]): number {
    return numbers.reduce((a, b) => a + b, 0);
  }
}

const utils = new MathUtils();
console.log(utils.sum(1, 2, 3, 4)); // 10

Rest-параметри (...numbers: number[]) теж типізуються як масив.

Приклад з об'єктом як параметром

javascript

class UserService {
  createUser({ name, age }: { name: string; age: number }): void {
    console.log(`Created user: ${name}, ${age}`);
  }
}

Можна винести тип в інтерфейс:

javascript

interface CreateUserDto {
  name: string;
  age: number;
}

class UserService {
  createUser(user: CreateUserDto): void {
    console.log(`Created user: ${user.name}`);
  }
}

Приклад з generic-параметром методу

javascript

class DataService {
  save<T>(data: T): T {
    console.log("Saved:", data);
    return data;
  }
}

const service = new DataService();
service.save<string>("text");
service.save({ id: 1, name: "Tim" });

T - дженерик, який робить метод універсальним: він приймає і повертає тип T.

2. Як типізувати значення, що повертається методом

Після списку параметрів вказується : тип, який описує, що метод повертає.

Приклад 1: Явне значення, що повертається

javascript

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

Метод повертає число, тому стоїть : number.

Приклад 2: Значення, що повертається, - об'єкт

javascript

class UserFactory {
  createUser(name: string, age: number): { name: string; age: number } {
    return { name, age };
  }
}

Можна описати тип, що повертається, прямо в місці оголошення або через інтерфейс:

javascript

interface User {
  name: string;
  age: number;
}

class UserFactory {
  createUser(name: string, age: number): User {
    return { name, age };
  }
}

Приклад 3: Значення, що повертається, - `void`

Якщо метод нічого не повертає (лише виконує дії):

javascript

class Logger {
  log(message: string): void {
    console.log(message);
  }
}

void означає: "нічого не повертає" (еквівалент функції без return або з return;).

Приклад 4: Значення, що повертається, - `Promise`

javascript

class Api {
  async fetchUser(id: number): Promise<{ id: number; name: string }> {
    return { id, name: "Tim" };
  }
}

Для async методів тип завжди Promise<ТипПовернення>.

Приклад 5: Значення, що повертається, - `this`

Іноді метод повертає сам об'єкт (для чейнингу):

javascript

class Builder {
  private value = "";

  append(str: string): this {
    this.value += str;
    return this;
  }

  get(): string {
    return this.value;
  }
}

const b = new Builder();
console.log(b.append("Hi").append(" there!").get()); // "Hi there!"

this означає "поточний тип екземпляра класу", і він корисний для fluent API (ланцюжків викликів).

Приклад 6: Значення, що повертається, з union-типу

javascript

class Parser {
  parse(value: string): number | null {
    const n = Number(value);
    return isNaN(n) ? null : n;
  }
}

Метод може повернути кілька типів (number або null).

3. Підсумок: синтаксис методу з типами

javascript

class Example {
  methodName(param1: Type1, param2: Type2): ReturnType {
    // тіло методу
  }
}

ПІДСУМКОВА ТАБЛИЦЯ

Що типізується	Приклад	Опис
Параметр	`greet(name: string)`	тип аргументу
Кілька параметрів	`add(a: number, b: number)`	кожен параметр зі своїм типом
Необов'язковий параметр	`log(msg?: string)`	можна не передавати
Параметр за замовчуванням	`log(msg = "ok")`	значення за замовчуванням
Повернення `void`	`doSomething(): void`	нічого не повертає
Повернення `Promise`	`fetch(): Promise<User>`	асинхронний результат
Повернення `this`	`append(s: string): this`	дозволяє чейнинг
Дженерик	`save<T>(data: T): T`	універсальний тип

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

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

Premium

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