В этом руководстве вы узнаете, как разрабатывать обобщенные интерфейсы в TypeScript.
Как и классы, интерфейсы также могут быть обобщенными. Такой интерфейс имеет список параметров универсального типа в угловых скобках <>
после имени интерфейса:
interface interfaceName<T> { // ... }
Это делает параметр типа T
видимым для всех членов интерфейса.
Список параметров типа может иметь один или несколько типов. Например:
interface interfaceName<U,V> { // ... }
Примеры обобщенного интерфейса TypeScript
Давайте рассмотрим несколько примеров объявления универсальных интерфейсов.
1) Общие интерфейсы, описывающие свойства объекта
Ниже показано, как объявить универсальный интерфейс, состоящий из двух членов, ключа и значения, с соответствующими типами K
и V
:
interface Pair<K, V> { key: K; value: V; }
Теперь вы можете использовать интерфейс Pair для определения любой пары ключ/значение любого типа. Например:
let month: Pair<string, number> = { key: 'Jan', value: 1 }; console.log(month);
В этом примере мы объявляем пару ключ-значение месяца, ключом которой является строка, а значением — число.
2) Общие интерфейсы, описывающие методы
Далее объявляется обобщенный интерфейс с двумя методами add() и remove():
interface Collection<T> { add(o: T): void; remove(o: T): void; }
И этот универсальный класс Collection<T>
List<T>
интерфейс Q29sbGVjdGlvbiZsdDtUPg==:
class List<T> implements Collection<T>{ private items: T[] = []; add(o: T): void { this.items.push(o); } remove(o: T): void { let index = this.items.indexOf(o); if(index > -1) { this.items.splice(index, 1); } } }
Из класса List<T>
вы можете создать список значений различного типа, например, чисел или строк.
Например, ниже показано, как использовать универсальный класс List для создания списка чисел:
let list = new List<number>(); for(let i = 0; i < 10; i++) { list.add(i); }
3) Общие интерфейсы, описывающие типы индексов
Следующий пример объявляет интерфейс, описывающий тип индекса:
interface Options<T> { [name: string]: T } let inputOptions: Options<boolean> = { 'disabled': false, 'visible': true };