TypeScript 泛型接口

摘要：在本教程中，你将学习如何开发 TypeScript 泛型接口，以创建一个可以使用不同类型同时保持类型安全的接口。

TypeScript 泛型接口简介

与类一样，接口也可以是泛型的。 泛型接口允许你创建一个可以使用不同类型的接口，同时保持类型安全。

一个泛型接口会在接口名称后面的尖括号 <> 中含有泛型类型参数列表：

interface interfaceName<T> {
    // ...
}

这使得类型参数 T 对接口的所有成员可见。

类型参数列表可以有一种或多种类型。 例如：

interface interfaceName<U,V> {
    // ...
}

TypeScript 泛型接口示例

让我们看一些声明泛型接口的例子。

1）描述对象属性的泛型接口

下面展示了如何声明一个由两个成员 key 和 value 组成的泛型接口，其对应类型为 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;
}

这个 List<T> 泛型类实现了 Collection<T> 泛型接口：

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<T> 泛型类创建数字列表：

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
};

在本教程中，你了解了 TypeScript 泛型接口。