TypeScript 声明文件 | 青训营

81 阅读2分钟

简介

声明文件是以 .d.ts 为后缀的文件,开发者在声明文件中编写类型声明,TypeScript 根据声明文件的内容进行类型检查。(注意同目录下最好不要有同名的 .ts 文件和 .d.ts,例如 lib.tslib.d.ts,否则模块系统无法只根据文件名加载模块)

为什么需要声明文件呢?

我们知道 TypeScript 根据类型声明进行类型检查,但有些情况可能没有类型声明:

  • 第三方包,因为第三方包打包后都是 JavaScript 语法,而非 TypeScript,没有类型。
  • 宿主环境扩展,如一些 hybrid 环境,在 window 变量下有一些 bridge 接口,这些接口没有类型声明。

如果没有类型声明,在使用变量、调用函数、实例化类的时候就没法通过 TypeScript 的类型检查。

声明文件就是针对这些情况,开发者在声明文件中编写第三方模块的类型声明 / 宿主环境的类型声明。让 TypeScript 可以正常地进行类型检查。

除此之外,声明文件也可以被导入,使用其中暴露的类型定义。

声明文件的两种用法

  • 被通过import导入,使用其中暴露的类型定义和变量声明。
  • 和相关模块关联,为模块进行类型声明。

对于第二种用法,声明文件如何同相关模块关联呢?

比如有个第三方包名字叫 “ foo ”,那么 TypeScript 会在 node_modules/foo 中根据其 package.json 的 typestyping 字段查找声明文件查找到的声明文件被作为该模块的声明文件;TypeScript 也会在 node_modules/@types/foo/ 目录中查找声明文件,如果能找到就被作为 foo 模块的声明文件;TypeScript 还会在我们的项目中查找 .d.ts 文件,如果遇到 declare module 'foo' 语句,则该声明被用作 foo 模块的声明。

总结

  • 在内部项目中,TypeScript会读取tsconfig.json中的文件集合,在其中的声明文件才会被处理。
  • 读取node_modules中各第三方包的package.json的types或者typing指定的文件。
  • 读取@types目录下同名包的声明文件。

声明文件中的代码不会出现在最终的编译结果中,编译后会把转换后的 JavaScript 代码输出到 outDir 选项指定的目录中,并且把 .ts 模块中使用到的值的声明都输出到 declarationDir 指定的目录中。