类型声明文件
类型声明文件
:用来为已存在的 JS 库提供类型信息。这样在 TS 项目中使用这些库时,就像用 TS 一样,都会有代码提示、类型保护等机制了。
TS的两种文件类型
.ts文件
- 既包含类型信息又可执行代码。
- 可以被编译为.js文件,然后执行代码
- 用途:编写程序代码的地方。
.d.ts文件
- 只包含类型信息的类型声明文件
- 不会生成 .js 文件,仅用于提供类型信息。
- 用途:为 JS 提供类型信息
总结:.ts
是 implementation
(代码实现文件);.d.ts
是 declaration
(类型声明文件)。
如果要为 JS 库提供类型信息,要使用 .d.ts
文件。
类型声明文件的使用说明
内置类型声明文件
TS 为 JS 运行时可用的所有标准化内置 API 都提供了声明文件。
可以通过
Ctrl + 鼠标左键
(Mac:option + 鼠标左键)来查看内置类型声明文件内容。
查看 forEach 方法的类型声明,在 VSCode 中会自动跳转到
lib.es5.d.ts
类型声明文件中。
window、document 等 BOM、DOM API 也都有相应的类型声明(
lib.dom.d.ts
)。
第三方库的类型声明文件
-
库自带类型声明文件
这种情况下,正常导入该库,TS 就会自动加载库自己的类型声明文件,以提供该库的类型声明。 -
由
DefinitelyTyped
提供
DefinitelyTyped 是一个
github
仓库,用来提供高质量TypeScript
类型声明。
可以通过npm/yarn
来下载该仓库提供的 TS 类型声明包,这些包的名称格式为:@types/*
。
比如,@types/react、@types/lodash 等。
说明:在实际项目开发时,如果你使用的第三方库没有自带的声明文件,VSCode 会给出明确的提示。
当安装 @types/* 类型声明包后,TS 也会自动加载该类声明包,以提供该库的类型声明。
补充:TS 官方文档提供了一个页面,可以来查询 @types/* 库。
项目类型共享
如果多个
.ts
文件中都用到同一个类型, 此时可以创建.d.ts
文件提供该类型,实现类型共享
type Props = {x: number, y: string}
export {Props}
- 创建
index.d.ts
类型声明文件。 - 创建需要共享的类型,并使用
export
导出(TS 中的类型也可以使用 import/export 实现模块化功能)。 - 在需要使用共享类型的 .ts 文件中,通过 import 导入即可(
.d.ts
后缀导入时,直接省略)。
为已有JS提供类型声明
- 在将 JS 项目迁移到 TS 项目时,为了让已有的 .js 文件有类型声明。
- 成为库作者,创建库给其他人使用。