Обобщенные интерфейсы в TypeScript

В этом руководстве вы узнаете, как разрабатывать обобщенные интерфейсы в 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
};
Рейтинг
( Пока оценок нет )
Александр Русаков / автор статьи
Программист, разработчик, 12 лет опыта работы в крупных компаниях. Быстро освоил typescript, делюсь своими знаниями на страницах этого сайта.
Загрузка ...
JavaScript и TypeScript