Typescript 项目中使用全局类型
站长
· 阅读数 20
Typescript 项目中难免我们会有这样的需求就是需要定义全局的类型直接使用，省去 import 导入的麻烦。怎么解决这个需求呢？我 google 了一圈，加实际操作，把方法记录一下。提前剧透一下，那就是使用类型声明文件。
类型声明文件是什么？是一个以 .d.ts 作为文件后缀名的 TypeScript 文件，只包含与类型相关的代码，不包含逻辑代码，他们的作用在于给开发者提供类型信息，所以他们只在开发阶段起作用。TypeScript 编译后会将这类信息移除。
自定义声明文件
在 src/types/ 目录下创建一个声明文件 main.d.ts 文件。比如声明一个全局接口：
// src/types/main.d.ts
declare interface APIPage {
pageNum: number
pageSize: number
}
声明入口 typeRoots 或 types
在 Typescript 的配置文件 tsconfig.json 中配置 typeRoots 字段，typeRoots是用来干啥的？
对，是用来告诉 TypeScript 类型声明文件的位置在哪里的。以我的项目为例，添加一下：
在 ts 文件中使用
OK啦，不报错
在 vue 文件中使用
如果直接在 vue 文件中使用，会报 'APIPage' is not defined.eslint[no-undef](https://eslint.org/docs/rules/no-undef) 的错，这个是 eslint 报的错，对于这种全局的类型或变量，要去 .eslintrc.js 文件里配置一下：
// .eslintrc.js
module.exports = {
...
globals: {
APIPage: 'readable',
}
}
好了，这下可以在 vue 文件中使用玩耍了。
欢迎点赞。