.d.ts 文件
在 vue 项目中,有时会存在多个以.d.ts结尾文件。比如:env.d.ts、shims-vue.d.ts等,它是 ts 用来声明(declare)变量、模块、type、interface等。在.d.ts声明变量或者模块等东西之后,在其他地方可以不用import
导入就可以直接使用,而且有语法提示。
在 vue 项目中,存在有一个 ts 配置文件tsconfig.json(或者其分级文件)中:
"compilerOptions": { ...... "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], ...... }
src/**/*:递归匹配任意子目录下的任意文件。
declare
declare 的作用
- ts 用户在使用别人编译好的 ts 代码时,TSC 会寻找与 js 文件对应的.d.ts文件,让 ts 知道项目中涉及哪些类型,并有代码类型提示,无需重新编译 ts 代码,极大减少编译时间。
- 定义在项目中任何地方都可以使用的全局类型,无需导入就可以使用(外参类型声明,需要和变量声明区别开)。
- 描述通过 npm 安装的第三方模块(外参模块声明)。
- 在.d.ts文件里,顶级声明必须以declare开头。
- 在.d.ts文件里,以declare声明的变量和模块后,其他地方不需要引入,就可以直接使用。
注意:
- 在.d.ts文件里,declare与export不要同级使用,不然的话,声明文件就需要导入(
import ..... from ...
)。 - 在.d.ts文件里,如果顶级声明不用export的话,declare和直接写
type
、interface
效果是一样的,在其他地方都可以直接引用。
type myType = string | number; // 两者效果相同declare type myType = string | number;
声明一个类型
declare type Asd { name: string; }
在 include 包含的文件范围内可以直接使用 Asd 这个 type。
声明一个模块
declare module '*.css';declare module '*.less';declare module '*.png';
这样,我们可以在 ts 中引入相关的文件而不报错了。
声明一个变量
declare var jQuery: (selector: string) => any; // 声明变量直接使用 jQuery("#box")
对于引入第三方的库特别有效。
声明一个作用域
declare namespace API{ interface ResponseObj { ... } ... }