TypeScript实战:快速掌握全局类型声明的方法

4,514 阅读3分钟

在项目中,有些类型,似乎每个文件都会用到,都需要引入,一个通用型的类型可能会被引用40-50次,这感觉有点浪费。

我们可以想一个好的办法,就是将该类型变成一个全局的类型声明。到时候想用的时候直接用就好了,不需要额外声明了。

TS类型来源

首先我们要知道的是,TS它的类型来源有哪些?在推断一个类型的时候,会依次扫描哪些文件?然后我们就将声明了全局类型的文件放在TS扫描的地方,这样文件才会生效嘛。

第一个来源lib

一些标准的API,浏览器的API,DOM相关的API,相关的类型声明是放在typescript库下面的lib文件夹中,主要是.d.ts文件

可以在tsconfig.json文件中配置需要的es版本的类型声明

如果这里面没有DOM,那代码中就不能使用window,document之类的对象了

好心的vscode还会提示你,“要不要改改你的lib配置?”

第二个来源

第二个来源是文件夹@types下面的文件

相关的tsconfig.json配置是types,typeRoots

types:表示搜索typeRoots下面的哪些包

typeRoots: 表示搜索非标准类型的时候,在哪个文件夹下面搜索类型文件

第三个来源

第三个来源是tsconfig.json文件中的配置项:include,files

include表示ts搜集自定义类型文件的路径,格式有src/, src/**/, 前者表示src文件夹下一层,后者无视文件夹层级。两者都会匹配 .ts / .tsx/ .jsx/ .js/ .d.ts后缀的文件。( 支持js 、 jsx需要开始allowJS的配置 )

files表示特定的文件。

小结:

TS寻找类型的顺序,依次从lib文件夹下,typeRoots文件夹、include,file文件中找类型声明

声明自己的全局类型

新建一个文件index.d.ts

在TS中,以.d.ts结尾的文件默认是全局模块,里面声明的类型,或者变量会被默认当成全局性质的。

其他后缀结尾的文件默认是局部模块。对于局部模块要在文件里面显式写import或者export,否则会报错。当然,也可以通过关闭配置文件中的 isolatedModules:false,取消这样的限制。

此限制是为了将每个文件都当成独立的模块,方便其他编译器编译ts代码

在另外一个文件直接使用add表达式,没有导入,TS也可以识别出它的类型

要实现这一点,要保证tsconfig.json中include或者file配置包含index.d.ts文件

在index.d.ts声明一个全局接口,也可以在另一个文件直接使用。和变量不一样,前面不需要加declare

其实在其他后缀的文件中也可以声明全局类型,因为其他后缀文件有import或者export,会被当成独立模块文件,所以需要特别的语法

这个特别的语法就是declare global,这里面的声明会被TS当成全局声明

总结

好了,全局类型声明就讲这么多了,有了这个东西,就可以避免很多重复的引用了。

有没讲清楚的可以评论留言哈哈