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

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

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

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

Контент

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

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

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

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

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

## 1. Загальний синтаксис

```javascript
function functionName(param1: Type1, param2: Type2, ...): ReturnType {
  // тіло функції
}
```

---

## Приклад: проста типізація параметрів

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

- `name: string` -> параметр `name` повинен бути рядком
- `age: number` -> параметр `age` повинен бути числом
- `: void` -> функція нічого не повертає

---

## 2. Типізація значення, що повертається

Тип після `)` вказує, **що функція повертає**:

```javascript
function sum(a: number, b: number): number {
  return a + b;
}
```

- вхід: два числа
- вихід: число (`number`)

> Якщо не вказати тип, TypeScript **сам виведе його** з `return`,
> але явне вказання робить код зрозумілішим і безпечнішим.

---

## 3. Необов'язкові параметри (`?`)

Якщо параметр може бути відсутнім - додай `?`:

```javascript
function greet(name: string, age?: number): void {
  console.log(`Hello, ${name}${age ? ", you are " + age + " years old" : ""}.`);
}

greet("Tim");       // без віку
greet("Alex", 25);  // з віком
```

> Тип `age` тут автоматично стає `number | undefined`.

---

## 4. Параметри зі значенням за замовчуванням

Якщо задати значення за замовчуванням, параметр теж стає **необов'язковим**,
і його тип виводиться автоматично:

```javascript
function greet(name: string, age: number = 18): void {
  console.log(`${name}, you are ${age} years old.`);
}

greet("Tim");       // використовує 18
greet("Alex", 30);  // перевизначає
```

---

## 5. Типізація параметрів функцій, що приймають масиви або об'єкти

```javascript
function printNames(names: string[]): void {
  console.log(names.join(", "));
}

function showUser(user: { name: string; age: number }): void {
  console.log(`${user.name}, ${user.age}`);
}

printNames(["Tim", "Alex"]);
showUser({ name: "Tim", age: 24 });
```

---

## 6. Передача функції як параметра

Ти можеш передати в параметр **іншу функцію**,
і задати їй тип (сигнатуру):

```javascript
function calculate(a: number, b: number, operation: (x: number, y: number) => number): number {
  return operation(a, b);
}

const result = calculate(5, 3, (x, y) => x * y);
console.log(result); // 15
```

---

## 7. Використання `type` для читабельності

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

function applyOperation(a: number, b: number, op: MathOp): number {
  return op(a, b);
}

applyOperation(4, 2, (x, y) => x / y);
```

---

## 8. Приклад з узагальненими типами (generic parameters)

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

```javascript
function identity<T>(value: T): T {
  return value;
}

const num = identity(42);       // T = number
const text = identity("hello"); // T = string
```

---

## Підсумок

| Особливість | Приклад | Опис |
|---|---|---|
| Простий параметр | `(name: string)` | приймає рядок |
| Кілька параметрів | `(a: number, b: number)` | приймає 2 числа |
| Необов'язковий параметр | `(age?: number)` | параметр можна не передавати |
| Параметр зі значенням за замовчуванням | `(age: number = 18)` | значення підставляється автоматично |
| Параметр-функція | `(cb: (x: number) => void)` | приймає функцію |
| Generic-параметр | `<T>(value: T)` | приймає значення будь-якого типу |

---

### Приклад "все разом":

```javascript
function fetchData<T>(
  url: string,
  onSuccess: (data: T) => void,
  onError?: (error: string) => void
): void {
  try {
    const mockData = JSON.parse('{"name":"Tim"}') as T;
    onSuccess(mockData);
  } catch {
    onError?.("Parsing error");
  }
}

fetchData<{ name: string }>(
  "/api/user",
  (data) => console.log(data.name),
  (err) => console.error(err)
);
```

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

Для рев’юера

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

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