目录
- 1,什么是声明文件
- 2,作用
- 3,位置
- 1,`tsconfig.json` 配置的包含目录中
- 2,`node_modules/@types` 目录中
- 3,`typeRoots` 配置项中的目录
- 4,与 js 文件同名同目录的文件
- 4,编写
- 1,ts 项目
- 2,js 项目
- 三斜线指令
1,什么是声明文件
以 .d.ts
结尾的文件。
2,作用
为 js 代码提供类型声明。
1,某些使用 js 开发的第三方库,如果没有声明文件,在 TS 中使用时会没有代码提示。
2,第三方库或自己定义的全局变量。如果没有声明文件,TS 找不到它们会报错。
不过,一般都会提供同名的 @types/xxx
依赖使用。 比如 jQuery 的
npm i @types/jquery -D
3,位置
4个位置可选
1,tsconfig.json
配置的包含目录中
{"compilerOptions": {// ...},"include": ["./src"]
}
只要在 ./src
目录下,文件名无所谓,只要是 .d.ts
结尾,ts 就可以找到。
2,node_modules/@types
目录中
这也是 npm 安装依赖的类型声明文件的位置。
3,typeRoots
配置项中的目录
{"compilerOptions": {// ..."typeRoots": [], },"include": ["./src"]
}
注意,如果有手动配置的,则上面2个位置的类型声明文件失效。
4,与 js 文件同名同目录的文件
index.js
index.d.ts
一般来说,如果项目使用的 ts 开发,最终要发布到 npm 上,打包后的结果就是这种形式(自动生成 .d.ts
文件)。
而使用 js 开发的项目,则会使用第2种方式,编写类型声明文件放到统一的位置。
4,编写
1,ts 项目
修改配置项 declaration
即可。在编译时会自动生成第4种格式的声明文件。
{"compilerOptions": {// ..."declaration": true, },"include": ["./src"]
}
2,js 项目
声明文件中,不能赋值(初始化),只能编写类型。
declare const console = {log(msg?: any): void
}
同
interface Console {log(msg?: any): void
}declare const console: Console;
同
declare namespace console {function log(message?: any): void;
}
三斜线指令
用于在当前声明文件中,引入目录的声明文件。就是 import
的作用。
只能放在文件开头。
/// <reference path="../../xxx.d.ts" />
以上。