为你的项目添加typescript支持

Posted 2021-04-25 IVWEB社区

为你的项目添加typescript支持

typescript语法上支持接口与泛型，进而它提供的自动补全、静态检查等等编程体验让人如沐春风。github上很多开源项目都提供了typescript支持。例如，在工程里引入fk-action-type。然后任意尝试导出对象上的方法，你将得到很好的代码提示：

下面我们来看如办到：

声明文件

首先我们需要为自己的代码添加接口说明，也称为声明文件。这里我们以fk-action-type为例，简要说明如何写一个声明文件。typescript的声明文件类似于c语言的头文件，其后缀名为.d.ts。首先我们先创建一个index.ts文件，然后写入以下类实现：

// index.ts
class Data{
    constructor(name: string){
        this.name = name;
    }
    dispatch(eventName: string, ...args: any[]){
        return true;
    }
}

可以看到，Data类包含一个实例属性name和一个实例方法dispatch。现在我们需要为这个类写一个声明文件，在同一级目录创建一个index.d.ts文件，写入以下内容：

class Data{ name: string; constructor: (name: string); dispatch: (eventName: string, ...args: any[])=>boolean; }

声明文件看起来同样是一个class的定义，不同的是，它是一个声明，其中只声明了类的属性、方法，并未有提及具体的实现，而具体的实现在index.ts中。熟悉C和C#的同学肯定属性这波操作。

.d.ts文件的具体语法和typescript中的类型申明完全保持一致，不太熟悉的同学可以参考官方的.d.ts说明文档

在npm中引入

现在我们的Data类已经有了接口声明。下一步需要让vsocde编辑器有这样一个声明文件的存在。方法很简单，在package.json中添加"typings": "./index.d.ts",属性，取值是我们刚才编写的.d.ts文件的相对路径。

然后上传到npm上，你会发现在vscode中调用方法都能得到很好的代码提示。

注释

有些提示中包含很详细的注释说明，例如我们在任意ts文件中敲如下代码，会看到详细的代码提示:

要达到这样的效果，在自己的.d.ts文件中为方法添加相应注释即可。

class Data{
    /**
     * 向外派发一个事件，自己的store和外部其他store都可以收到这个事件
     * 用listen或listenOther来监听这些派发的事件
     * @returns 返回派发成功或者失败
     */
    listen: (eventName: string, ...args:any[])=> boolean;
}