TypeScript 泛型接口

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

TypeScript 泛型接口简介

与类类似，接口也可以是泛型的。泛型接口允许您创建可以与不同类型一起使用且保持类型安全的接口。

泛型接口在接口名称后带有尖括号 <> 中的泛型类型参数列表

interface interfaceName<T> {
    // ...
}Code language: TypeScript (typescript)

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

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

interface interfaceName<U,V> {
    // ...
}
Code language: TypeScript (typescript)

TypeScript 泛型接口示例

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

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

以下显示了如何声明一个泛型接口，该接口包含两个成员 key 和 value，它们具有相应的类型 K 和 V

interface Pair<K, V> {
    key: K;
    value: V;
}
Code language: TypeScript (typescript)

现在，您可以使用 Pair 接口定义任何具有任何类型的键值对。例如

let month: Pair<string, number> = {
    key: 'Jan',
    value: 1
};

console.log(month);Code language: TypeScript (typescript)

在此示例中，我们声明了一个月份键值对，其键为字符串，值为数字。

2) 描述方法的泛型接口

以下声明了一个包含两个方法 add() 和 remove() 的泛型接口

interface Collection<T> {
    add(o: T): void;
    remove(o: T): void;
}
Code language: TypeScript (typescript)

而这个 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);
        }
    }
}
Code language: TypeScript (typescript)

从 List<T> 类，您可以创建各种类型值的列表，例如数字或字符串。

例如，以下显示了如何使用 List<T> 泛型类创建数字列表

let list = new List<number>();

for (let i = 0; i < 10; i++) {
    list.add(i);
}
Code language: TypeScript (typescript)

3) 描述索引类型的泛型接口

以下声明了一个描述索引类型的接口

interface Options<T> {
    [name: string]: T
}

let inputOptions: Options<boolean> = {
    'disabled': false,
    'visible': true
};
Code language: TypeScript (typescript)

在本教程中，您已经学习了 TypeScript 泛型接口。