TypeScript之类型声明文件

别救了这猴子废了
887 阅读3分钟

    作用：为已存在的库，以及第三方包/库或自定义文件提供类型信息（也就是代码类型提示）

内置类型声明文件

       作用：TS为JS运行时可用的所有标准化的内置API提供声明（就是JS中的代码提示）

具体怎么查看JS的‘数据’类型呢？

       这个‘数据’类型指的不单单是JS原生的数据类型，还有TS所新增的数据类型，具体技巧如下：

可以通过 Ctrl + 鼠标左键(Mac：Command + 鼠标左键)来查看内置类型声明文件内容

  • 查看 forEach 方法的类型声明，在 VSCode 中会自动跳转到 lib.es5.d.ts 类型声明文件中

  • 像 window、document 等 BOM、DOM API 也都有相应的类型声明(**lib.dom.d.ts**)

第三方库/包的类型声明文件

       对于为第三方模块/库写声明文件之前，我们需要知道第三方模块/库，是否需要声明文件，或者是否已有声明文件。

  • 若第三方模块/库，是ts编写且无声明文件， 可以使用--declaration配置选项来生成； 可以在命令行中添加 --declaration（简写 -d），或者在 tsconfig.json 中添加 declaration:true 选项

  • 若第三方模块/库，是js编写，分为两种情况：

    1. 与该 npm 包绑定在一起，可以通过查找该库的package.json中的types属性
    2. 发布到 @types 里，可以在官方提供的第三方声明文件库(microsoft.github.io/TypeSearch/…

注意如若上面的情况都不符合， 则需要我们自己手写声明文件

自带类型声明的库

      这种无需任何处理，装完包之后就可以直接使用代码提示了

不带类型声明的库

       这种一般来说都需要我们单独去下载

yarn add @type/库名

       总的来说，并不是所有的第三方库都有TS声明文件，没有类型声明文件只是没有代码提示，并不会导致第三方库的功能不能用，对于这类库，微软内部人员为了自身使用和开源吧，就写了很多声明文件，从而能够更好地提高开发效率。

自定义文件的类型声明文件

场景：

  1. 项目内共享类型

  2. 为已有 JS 文件提供类型声明

步骤:

  1. 创建 index.d.ts 类型声明文件（后缀名为 .d.ts）。

  2. 创建需要共享的类型，并使用 export 导出(TS 中的类型也可以使用 import/export 实现模块化功能)。

  3. 在需要使用共享类型的 .ts 文件中，通过 import 导入即可(.d.ts 后缀导入时，直接省略)

示例：

//declare --用于类型声明，为其他已存在的变量声明类型，而不是创建一个新的变量
declare let Num:number

declare let Str:string

declare interface IPosition{
    x:number,
    y:number
}
export {Num,Str,IPosition}

注意：类型声明文件只是提供声明（代码类型提示），并不会提供逻辑代码

avatar
文章
阅读
粉丝