Простое объяснение перегрузки функций в TypeScript
Посмотрим, как она работает.
1. Сигнатура функции
Содержание статьи:
Рассмотрим функцию, которая возвращает сообщение Hello конкретному человеку:
JavaScript function greet(person: string): string { return `Hello, ${person}!`; }
| 123 | function greet(person: string): string { return `Hello, ${person}!`;} |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Вышеупомянутая функция принимает 1 аргумент типа string: имя человека. Вызвать функцию довольно просто:
JavaScript greet(‘World’); // ‘Hello, World!’
| 1 | greet(‘World’); // ‘Hello, World!’ |
Что, если вы хотите сделать функцию greet() более гибкой? Например, сделайте так, чтобы она дополнительно принимала список лиц, которых нужно поприветствовать.
Такая функция могла бы принимать строку или массив строк в качестве аргумента, а также возвращать строку или массив строк.
Как реализовать такую функцию? Есть 2 подхода. Первый подход прост и включает в себя изменение сигнатуры функции напрямую путем обновления типа параметра и возвращаемого значения. Вот как выглядит greet() с обновлением типа параметра и возвращаемого значения:
JavaScript function greet(person: string | string[]): string | string[] { if (typeof person === ‘string’) { return `Hello, ${person}!`; } else if (Array.isArray(person)) { return person.map(name => `Hello, ${name}!`); } throw new Error(‘Unable to greet’); }
| 12345678 | function greet(person: string | string[]): string | string[] { if (typeof person === ‘string’) { return `Hello, ${person}!`; } else if (Array.isArray(person)) { return person.map(name => `Hello, ${name}!`); } throw new Error(‘Unable to greet’);} |
Теперь, вы можете вызывать greet() двумя способами:
JavaScript greet(‘World’); // ‘Hello, World!’ greet([‘Jane’, ‘Joe’]); // [‘Hello, Jane!’, ‘Hello, Joe!’]
| 12 | greet(‘World’); // ‘Hello, World!’greet([‘Jane’, ‘Joe’]); // [‘Hello, Jane!’, ‘Hello, Joe!’] |
Обновление сигнатуры функции напрямую для поддержки нескольких способов вызова — это обычный и хороший подход. Однако бывают ситуации, когда вы можете захотеть воспользоваться альтернативным подходом и отдельно определить все способы вызова вашей функции. Такой подход называется перегрузкой функций.
2. Перегрузка функции
Второй подход — использовать перегрузку функции. Я рекомендую его, когда сигнатура функции относительно сложна и включает несколько типов.
Внедрение перегрузки на практике требует определения так называемых перегрузки сигнатуры и имплементации сигнатуры.
Перегрузка сигнатуры (оverload signatures) определяет параметры и типы возвращаемых данных функции и не имеет тела. Функция может иметь несколько перегрузок сигнатуры: в соответствии с различными способами вызова функции.
Имплементация сигнатуры (іmplementation signature), с другой стороны, также имеет типы параметров и тип возвращаемого значения, а также тело, реализующее функцию. Реализация сигнатуры может быть только одна. Преобразуем функцию greet(), чтобы использовать перегрузку функции:
JavaScript // Overload signatures function greet(person: string): string; function greet(persons: string[]): string[]; // Implementation signature function greet(person: unknown): unknown { if (typeof person === ‘string’) { return `Hello, ${person}!`; } else if (Array.isArray(person)) { return person.map(name => `Hello, ${name}!`); } throw new Error(‘Unable to greet’); }
| 12345678910111213 | // Overload signaturesfunction greet(person: string): string;function greet(persons: string[]): string[]; // Implementation signaturefunction greet(person: unknown): unknown { if (typeof person === ‘string’) { return `Hello, ${person}!`; } else if (Array.isArray(person)) { return person.map(name => `Hello, ${name}!`); } throw new Error(‘Unable to greet’);} |
Функция greet() имеет 2 перегрузки сигнатуры и одну имплементацию. Каждая перегрузка описывает один из способов вызова функции. В случае функции greet() вы можете вызвать ее двумя способами: со строковым аргументом или с массивом строковых аргументов.
Имплементация сигнатуры function greet(person: unknown): unknown { … } содержит логику работы функции. Теперь, как и раньше, вы можете вызывать greet() с аргументами типа строка или массив строк:
JavaScript greet(‘World’); // ‘Hello, World!’ greet([‘Jane’, ‘Joe’]); // [‘Hello, Jane!’, ‘Hello, Joe!’]
| 12 | greet(‘World’); // ‘Hello, World!’greet([‘Jane’, ‘Joe’]); // [‘Hello, Jane!’, ‘Hello, Joe!’] |
2.1 Перегрузка сигнатуры является callable
Хотя имплементация сигнатуры реализует поведение функции, она не может быть вызвана напрямую. Вызывается только перегрузка сигнатуры.
JavaScript greet(‘World’); // Overload signature callable greet([‘Jane’, ‘Joe’]); // Overload signature callable const someValue: unknown = ‘Unknown’; greet(someValue); // Implementation signature NOT callable
| 12345 | greet(‘World’); // Overload signature callablegreet([‘Jane’, ‘Joe’]); // Overload signature callable const someValue: unknown = ‘Unknown’;greet(someValue); // Implementation signature NOT callable |
Результат:
Фреймворк VUE JS: быстрый старт, первые результаты
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
JavaScript No overload matches this call. Overload 1 of 2, ‘(person: string): string’, gave the following error. Argument of type ‘unknown’ is not assignable to parameter of type ‘string’. Overload 2 of 2, ‘(persons: string[]): string[]’, gave the following error. Argument of type ‘unknown’ is not assignable to parameter of type ‘string[]’.
| 12345 | No overload matches this call. Overload 1 of 2, ‘(person: string): string’, gave the following error. Argument of type ‘unknown’ is not assignable to parameter of type ‘string’. Overload 2 of 2, ‘(persons: string[]): string[]’, gave the following error. Argument of type ‘unknown’ is not assignable to parameter of type ‘string[]’. |
В приведенном выше примере вы не можете вызывать функцию greet() с аргументом типа unknown ( greet(someValue)), даже если имплементация сигнатуры принимает аргумент unknown.
2.2 Имплементация сигнатуры должна быть общей
Имейте в виду, что тип имплементации сигнатуры должен быть достаточно общим, чтобы включать перегрузку сигнатуры. В противном случае TypeScript не примет перегрузку сигнатуры. Например, если вы измените тип возвращаемого значения имплементации сигнатуры с unknown на string:
JavaScript // Overload signatures function greet(person: string): string; function greet(persons: string[]): string[];
| 123 | // Overload signaturesfunction greet(person: string): string;function greet(persons: string[]): string[]; |
Такая перегрузка сигнатуры несовместима с ее имплементацией.
JavaScript // Implementation signature function greet(person: unknown): string { // … throw new Error(‘Unable to greet’); }
| 12345 | // Implementation signaturefunction greet(person: unknown): string { // … throw new Error(‘Unable to greet’);} |
Тогда перегрузка function greet(persons: string[]): string[] помечается как несовместимая с function greet(person: unknown): string.
Тип String возвращаемого значения имплементации недостаточно общий, чтобы быть совместимым с типом string[] перегрузки сигнатуры.
3. Перегрузка методов
В предыдущих примерах перегрузка применялась к обычной функции. Но вы также можете перегрузить и методы! Во время перегрузки метода перегрузка сигнатуры и ее имплементация теперь являются частью класса. Например, давайте реализуем класс Greeter с перегруженным методом greet():
JavaScript class Greeter { message: string; constructor(message: string) { this.message = message; } // Overload signatures greet(person: string): string; greet(persons: string[]): string[]; // Implementation signature greet(person: unknown): unknown { if (typeof person === ‘string’) { return `${this.message}, ${person}!`; } else if (Array.isArray(person)) { return person.map(name => `${this.message}, ${name}!`); } throw new Error(‘Unable to greet’); } }
| 123456789101112131415161718192021 | class Greeter { message: string; constructor(message: string) { this.message = message; } // Overload signatures greet(person: string): string; greet(persons: string[]): string[]; // Implementation signature greet(person: unknown): unknown { if (typeof person === ‘string’) { return `${this.message}, ${person}!`; } else if (Array.isArray(person)) { return person.map(name => `${this.message}, ${name}!`); } throw new Error(‘Unable to greet’); }} |
Класс Greeter содержит перегрузку метода greet(): 2 перегрузки сигнатуры описывающие то, как метод может быть вызван, и имплементацию, содержащую соответствующую реализацию.
Благодаря перегрузке метода вы можете вызывать hi.greet() двумя способами: используя в качестве аргумента строку или массив строк.
JavaScript const hi = new Greeter(‘Hi’); hi.greet(‘Angela’); // ‘Hi, Angela!’ hi.greet([‘Pam’, ‘Jim’]); // [‘Hi, Pam!’, ‘Hi, Jim!’]
| 1234 | const hi = new Greeter(‘Hi’); hi.greet(‘Angela’); // ‘Hi, Angela!’hi.greet([‘Pam’, ‘Jim’]); // [‘Hi, Pam!’, ‘Hi, Jim!’] |
4. Когда использовать перегрузку функций
Перегрузка функций при правильном использовании может значительно повысить удобство использования функций, которые можно вызывать разными способами. Это особенно полезно во время автозаполнения: вы перечисляете все возможные перегрузки в виде отдельных записей в автозаполнении.
Однако бывают ситуации, когда я бы рекомендовал не использовать перегрузку функции, а придерживаться сигнатуры функции. Например, не используйте перегрузку функции для необязательных параметров:
JavaScript // Not recommended function myFunc(): string; function myFunc(param1: string): string; function myFunc(param1: string, param2: string): string; function myFunc(…args: string[]): string { // implementation… }
| 1234567 | // Not recommendedfunction myFunc(): string;function myFunc(param1: string): string;function myFunc(param1: string, param2: string): string;function myFunc(…args: string[]): string { // implementation…} |
Достаточно использовать необязательные параметры в сигнатуре функции:
JavaScript // OK function myFunc(param1?: string, param2: string): string { // implementation… }
| 1234 | // OKfunction myFunc(param1?: string, param2: string): string { // implementation…} |
5. Вывод
Перегрузка функций в TypeScript позволяет определять функции, которые можно вызывать разными способами.
Использование перегрузки функций требует определения сигнатур перегрузки: набора функций с параметрами и возвращаемыми типами, но без тела. Эти сигнатуры указывают, как должна быть вызвана функция.
Кроме того, вы должны написать правильную реализацию функции (имплементацию сигнатуры): параметры и возвращаемые типы, а также тело функции. Обратите внимание, что имплементация сигнатуры не является callable. Помимо обычных функций, методы в классах тоже могут быть перегруженными.
Автор: Dmitri Pavlutin
Источник: webformyself.com