.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 {
        ...
    }
    ...
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com