Typescript 项目中使用全局类型

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是用来干啥的？

www.tslang.cn/docs/handbo…

对，是用来告诉 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 文件中使用玩耍了。

欢迎点赞。

TypeScirpt类型声明完全指南
Vue.js 3 中 TypeScript 全局类型 & 全局变量 & 局部类型

本文正在参加「金石计划」