В этом руководстве вы узнаете, как разрабатывать обобщенные интерфейсы в 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
};
