本篇文章简要介绍TypeScript中泛型接口和实现。还是以代码为主，以便能动手实践。

若你需系统的学习TypeScript编程，详见《TypeScript编程：高效入门实战》

作为JavaScript超集的TypeScript，其接口像类一样，接口也可以接收多态参数(即泛型)。

1. 接口上声明泛型参数

示例代码如下：

interface IStatus<U> {
    code: U;
}
 
interface IEvents<T> {
    list: T[];
    emit(event: T): void;
    getAll(): T[];
}

注意其实现形式，即在名称后的一对尖括号中指定泛型指示符，如何T，U等，而这正是泛型参数。

2. 实现泛型接口

我们来创建一个简单的类来实现IEvents接口。示例如下：

class State<T> implements IEvents<T> {
    list: T[];
    constructor() {
        this.list = [];
    }
    emit(event: T): void {
        this.list.push(event);
    }
    getAll(): T[] {
        return this.list;
    }
}

让我们来创建State类的一些实例。

示例中，State类将使用IStatus<T>处理一个通用状态。同样的方式，接口IEvent也将处理IStatus<T>。示例如下：

const s = new State<IStatus<number>>();
// 下列代码中 'code' 属性应该是数字, 因此:
s.emit({ code: 200 }); // works
s.emit({ code: '500' }); // 此行代码错误-类型
s.getAll().forEach(event => console.log(event.code));

这里我们的State类的类型是IStatus<number>。

我们再换一种泛型类型，如下：

interface Code{
    message:string;
    status:number;
}
 
const s2 = new State<IStatus<Code>>();
//以Code类型发出数据 
s2.emit({ code: { message: 'OK', status: 200 } });
s2.getAll().map(event => event.code).forEach(event => {
    console.log(event.message);
    console.log(event.status);
});

这里我们的State类的被类型化为IStatus<Code>。通过这种方式，我们可以将更复杂的类型传递给emit方法。

如前所见，泛型接口对于静态类型的编码来说是非常有用的工具。

希望系统学习TypeScript编程，请从这里开始：《TypeScript编程：高效入门实战》

本篇就写这些了，后续还将会有泛型的后面。记得点个赞，分享出去吧。可以点击右上角的关注，以便随时来@牛旦IT课堂回看或阅读。谢谢啦，再见！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/typescriptbc/1148.html