TypeScript: Освоение Перегрузки и Дженериков

В статье мы углубимся в понимание этих двух возможностей TypeScript на практических примерах.

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

Перегрузка функций в TypeScript — это возможность создания нескольких методов с одним и тем же именем, но разными типами или количеством параметров. Компилятор использует количество, типы и порядок аргументов для определения того, какой метод следует вызвать.

Рассмотрим пример:

export function myFunction(input: string): string;
export function myFunction(input: number): number;
/**
 * Overloads
 * @param input
 * @returns number|string
 */
export function myFunction(input: unknown): unknown {
    return input;
}

В приведённом выше примере мы перегрузили myFunction двумя сигнатурами. Одна из них принимает аргумент типа string и возвращает string, а другая принимает тип number и возвращает number.

Реальная реализация myFunction принимает на входе тип unknown и возвращает unknown. Эта реализация перегрузки должна быть совместима с типами, объявленными во всех перегрузках. В качестве типа мы используем unknown, поскольку он может охватывать как строковые, так и числовые типы, что делает его совместимым с сигнатурами перегрузок.

Посмотрите, как вызывается функция myFunction с различными типами аргументов:

const overloadNumberRes = myFunction(12);
const overloadStringRes = myFunction("");
const overloadUnknownRes = myFunction([]);

В зависимости от типа передаваемого аргумента TypeScript обеспечивает IntelliSense и проверку на этапе компиляции, основываясь на соответствующей перегрузке. Эта возможность позволяет нам иметь одну функцию, которая работает с несколькими типами данных, что улучшает читаемость и сопровождаемость кода.

Дженерики в функциях/Обобщённые функции

Дженерики — ещё одна мощная возможность TypeScript, позволяющая создавать многократно используемые компоненты, работающие с любыми типами.

Рассмотрим пример:

/**
 * Generics
 * @param input
 * @returns T
 */
export function myGenericFunction<T>(input: T): T {
    return input;
}

В приведённом выше примере myGenericFunction является обобщённой (дженерик) функцией и объявляется с помощью заполнителя (T). Эта функция может работать с любым типом T. Самое интересное в этом то, что тип T определяется при вызове функции, а не задаётся. Функция принимает аргумент типа T, а также возвращает аргумент типа T.

Вот как мы вызываем myGenericFunction с явно указанными типами дженериков:

const genericStringRes = myGenericFunction<string>("");
const genericNumberRes = myGenericFunction<number>(5);
const genericArrayRes = myGenericFunction<Array<unknown>>([]);
const genericObjectRes = myGenericFunction<object>({});

При вызове myGenericFunction TypeScript обеспечивает соответствие типов передаваемых и возвращаемых аргументов в зависимости от типа, указанного в угловых скобках, что повышает безопасность типов в нашей программе.

Заключение

Передовые возможности TypeScript, такие, как Перегрузка и Дженерики, расширяют возможности JavaScript, обеспечивая сильную статическую типизацию и дополнительные возможности ООП. С помощью TypeScript мы получаем всю гибкость JavaScript вместе с проверками на этапе компиляции, что делает наши приложения надёжными, удобными в обслуживании и менее подверженными ошибкам во время выполнения. Поэтому в следующий раз, когда вы будете работать над проектом на TypeScript, попробуйте использовать Перегрузку и Дженерики; возможно, это сделает вашу работу намного более гладкой!