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

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

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

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

Контент

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

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

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

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

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

## 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` | універсальний тип |

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

Для рев’юера

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

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