Что такое перегрузка функции в TypeScript?

Перегрузка функций в TypeScript

Что такое перегрузка функции?

Перегрузка функции (Function Overloading) — это возможность определить одну функцию несколько раз с разными сигнатурами (типами параметров и возвращаемого значения). TypeScript позволяет указать несколько сигнатур для одной функции, обеспечивая правильную типизацию при разном использовании.

Синтаксис перегрузки

В TypeScript перегрузка работает так:

// Сигнатуры перегрузки (без реализации)
function greet(name: string): string;
function greet(name: string, age: number): string;

// Реализация (должна быть совместима со всеми сигнатурами)
function greet(name: string, age?: number): string {
  if (age !== undefined) {
    return `Hello, ${name}! You are ${age} years old.`;
  }
  return `Hello, ${name}!`;
}

// Использование
greet("John");           // ✅ OK
greet("John", 30);       // ✅ OK
greet("John", "invalid"); // ❌ Ошибка типа

Практические примеры

Пример 1: Функция с разными типами параметров

function processValue(value: string): string;
function processValue(value: number): number;
function processValue(value: boolean): boolean;

function processValue(value: string | number | boolean): string | number | boolean {
  if (typeof value === "string") {
    return value.toUpperCase();
  }
  if (typeof value === "number") {
    return value * 2;
  }
  return !value;
}

processValue("hello");    // ✅ "HELLO"
processValue(5);          // ✅ 10
processValue(true);       // ✅ false

Пример 2: Функция с разным количеством параметров

function createElement(tag: string): HTMLElement;
function createElement(tag: string, content: string): HTMLElement;
function createElement(tag: string, content: string, className: string): HTMLElement;

function createElement(
  tag: string,
  content?: string,
  className?: string
): HTMLElement {
  const element = document.createElement(tag);
  if (content) {
    element.textContent = content;
  }
  if (className) {
    element.className = className;
  }
  return element;
}

createElement("div");
createElement("div", "Hello");
createElement("div", "Hello", "container");

Пример 3: Перегрузка в классах

class Calculator {
  add(a: number, b: number): number;
  add(a: string, b: string): string;
  
  add(a: number | string, b: number | string): number | string {
    if (typeof a === "number" && typeof b === "number") {
      return a + b;
    }
    return String(a) + String(b);
  }
}

const calc = new Calculator();
calc.add(2, 3);          // ✅ 5
calc.add("Hello", " World"); // ✅ "Hello World"

Перегрузка vs Union Types

Иногда можно использовать Union types вместо перегрузки:

// ❌ Без перегрузки: IDE не подскажет точный тип
function process(value: string | number): string | number {
  return value;
}

// ✅ С перегрузкой: IDE подскажет точный тип
function processOverload(value: string): string;
function processOverload(value: number): number;

function processOverload(value: string | number): string | number {
  return value;
}

// После вызова processOverload("test"), TypeScript знает, что это string

Когда использовать перегрузку?

• ✅ Функция работает по-разному в зависимости от типов параметров
• ✅ Функция может принимать разное количество аргументов с разными типами
• ✅ Функция возвращает разные типы в зависимости от входных параметров
• ❌ Не используй, если можно обойтись без неё (KISS принцип)

Преимущества и недостатки

Преимущества:

• ✅ Лучше автодополнение в IDE
• ✅ Понятнее код с типизацией
• ✅ Выявляет ошибки на этапе разработки

Недостатки:

• ❌ Больше кода (сигнатуры + реализация)
• ❌ Может усложнить код для простых функций
• ❌ Реализация должна быть совместима со всеми сигнатурами

Заключение

Перугрузка функций в TypeScript — мощный инструмент для создания гибких API с правильной типизацией. Она особенно полезна в библиотеках и сложных компонентах, где функция должна работать с разными типами данных. Однако используй её разумно: простые функции можно оставить с Union types, чтобы не усложнять код.