前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >为你的项目添加typescript支持

为你的项目添加typescript支持

作者头像
腾讯IVWEB团队
发布2020-06-29 11:57:32
1.5K0
发布2020-06-29 11:57:32
举报
文章被收录于专栏:腾讯IVWEB团队的专栏

为你的项目添加typescript支持

typescript语法上支持接口与泛型,进而它提供的自动补全、静态检查等等编程体验让人如沐春风。github上很多开源项目都提供了typescript支持。例如,在工程里引入fk-action-type

声明文件

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

代码语言:javascript
复制
// index.ts
class Data{
    constructor(name: string){
        this.name = name;
    }
    dispatch(eventName: string, ...args: any[]){
        return true;
    }
}

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

代码语言:javascript
复制
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文件中为方法添加相应注释即可。

代码语言:javascript
复制
class Data{
    /**
     * 向外派发一个事件,自己的store和外部其他store都可以收到这个事件
     * 用listen或listenOther来监听这些派发的事件
     * @returns 返回派发成功或者失败
     */
    listen: (eventName: string, ...args:any[])=> boolean;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 为你的项目添加typescript支持
    • 声明文件
      • 在npm中引入
        • 注释
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档