在项目中,有些类型,似乎每个文件都会用到,都需要引入,一个通用型的类型可能会被引用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当成全局声明
总结
好了,全局类型声明就讲这么多了,有了这个东西,就可以避免很多重复的引用了。
有没讲清楚的可以评论留言哈哈