Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке перевантаження функцій (overload)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Перевантаження функції (overload)** - це можливість **описати кілька сигнатур (варіантів виклику)** однієї й тієї самої функції з **різними типами аргументів і значень, що повертаються**. **Ключове:** TypeScript дозволяє типізувати це через **кілька сигнатур "зверху"** і одну **реалізацію "знизу"**.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що таке **перевантаження функцій (overload)** **Перевантаження функції** - це можливість **описати кілька сигнатур (варіантів виклику)** однієї й тієї самої функції з **різними типами аргументів і значень, що повертаються**. > Простіше кажучи: > одна функція може поводитися по-різному залежно від типів аргументів. > > TypeScript дозволяє типізувати це через **кілька сигнатур "зверху"** > і одну **реалізацію "знизу"**. --- ## Приклад 1. Проста перевантаженість за типом аргументу ```javascript // Перевантаження (варіанти виклику) function reverse(value: string): string; function reverse(value: number[]): number[]; // Реалізація (одна на всі випадки) function reverse(value: string | number[]): string | number[] { if (typeof value === "string") { return value.split("").reverse().join(""); } else { return value.slice().reverse(); } } // Приклади використання const str = reverse("TypeScript"); // string const arr = reverse([1, 2, 3]); // number[] ``` TypeScript розуміє, що: - якщо ти передав `string` -> функція повертає `string` - якщо `number[]` -> повертає `number[]` --- ## Як це працює TypeScript бачить усі сигнатури, але перевіряє їх **згори вниз**. Коли знаходить підходящу - застосовує її. Реалізація при цьому **не видна користувачу** - вона слугує лише для виконання. --- ## Приклад 2. Різні типи значень, що повертаються ```javascript function toArray(value: string): string[]; function toArray(value: number): number[]; function toArray(value: string | number): (string | number)[] { return [value]; } toArray("hi"); // string[] toArray(42); // number[] ``` --- ## Приклад 3. Різна кількість параметрів ```javascript function createUser(name: string): { name: string }; function createUser(name: string, age: number): { name: string; age: number }; function createUser(name: string, age?: number) { return age ? { name, age } : { name }; } createUser("Tim"); // { name: string } createUser("Tim", 25); // { name: string; age: number } ``` > Тут дві сигнатури описують, які комбінації аргументів допустимі, > а реалізація об'єднує їх в одному тілі. --- ## Приклад 4. Перевантаження в generic-функціях ```javascript function wrap<T>(value: T): { data: T }; function wrap<T>(value: T[]): { data: T[] }; function wrap<T>(value: T | T[]): { data: T | T[] } { return { data: value }; } wrap(42); // { data: number } wrap([1, 2]); // { data: number[] } ``` --- ## Як писати перевантаження правильно **Структура:** ```javascript // 1. Спочатку - сигнатури перевантажень function fn(param: Type1): ReturnType1; function fn(param: Type2): ReturnType2; // 2. Потім - реалізація з union-типами function fn(param: Type1 | Type2): ReturnType1 | ReturnType2 { // логіка } ``` > Важливо: реалізація повинна **завжди обробляти всі варіанти**. > TypeScript перевіряє, що вона сумісна з кожною сигнатурою. --- ## Помилки при неправильному перевантаженні Не можна писати реалізацію **перед** сигнатурами перевантаження: ```javascript function fn(x: any): any { return x; } // Помилка: реалізація має бути останньою function fn(x: string): string; function fn(x: number): number; ``` Потрібно навпаки: ```javascript function fn(x: string): string; function fn(x: number): number; function fn(x: any): any { return x; } ``` --- ## Коли використовувати перевантаження Використовуй перевантаження, якщо: - у функції **різні типи аргументів** і **різні результати**; - не можна виразити це просто через `union`; - тобі потрібно зберегти **сувору типізацію значення, що повертається**. --- ## Альтернатива перевантаженню - generic Іноді простіше виразити те саме через **узагальнені типи**: ```javascript function wrap<T>(value: T): { data: T } { return { data: value }; } ``` > Generic-функції компактніші і часто кращі, > якщо логіка однакова для всіх типів. --- ## Підсумкова шпаргалка | Особливість | Перевантаження функцій | |---|---| | К-сть реалізацій | Завжди **одна** | | К-сть сигнатур | **Кілька зверху** | | Різні аргументи | Так | | Різні типи повернення | Так | | Порядок оголошень | Сигнатури -> Реалізація | | Перевірка типів | TS обирає підходящу сигнатуру | | Альтернатива | Generic-функція | --- ### Приклад "все разом" ```javascript function format(input: string): string; function format(input: number): string; function format(input: boolean): string; function format(input: string | number | boolean): string { return `Значення: ${input.toString()}`; } format("hi"); // string format(123); // string format(true); // string ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.