TypeScript 类型声明文件

类型声明文件:用来为已存在的 JS 库提供类型信息。

TS 中的两种文件类型

    1. .ts 文件(是 implementation 代码实现文件)

      1. 既包含类型信息又可执行代码。

      2. 可以被编译为 .js 文件,然后,执行代码。

      3. 用途:编写程序代码的地方。

    2. .d.ts 文件(是 declaration 类型声明文件)

      1. 只包含类型信息的类型声明文件。不能出现可执行代码

      2. 不会生成 .js 文件,仅用于提供类型信息。

      3. 用途:为 JS 提供类型信息。

 

类型声明文件的使用说明

在 TS 中,类型声明文件的使用有2种方式:

  1. 使用已有的类型声明文件

    1. 使用已有的类型声明文件

      1. 内置类型声明文件:TS 为 JS 运行时可用的所有标准化内置 API 都提供了声明文件。(通过 Ctrl + 鼠标左键 | mac:option + 鼠标左键)

      2. 第三方库的类型声明文件(有两种存在形式):

        1. 库自带类型声明文件 例:axios (导入时 TS 会自动加载库自己的类型声明文件)

        2. DefinitelyTyped 提供

          1. DefinitelyTyped 是 github 仓库,用来提供高质量 TypeScript 类型声明。可以通过 npm / yarn 来下载该仓库提供的 TS 类型声明包,这些包的名称格式为:@types/*

          2. 当安装 @types/* 类型声明包后,TS 也会自动加载该类声明包,以提供该库的类型声明。

  2. 创建自己的类型声明文件

    1. 项目内共享类型

      1. 创建 index.d.ts 类型声明文件

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

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

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

      1. 将 JS 项目迁移到 TS 项目时,为了让已有的 .js 文件有类型声明

      2. 成为库作者,创建库给其他人使用

      3. 类型声明文件的编写与模块化方式相关,不同的模块化方式有不同的写法。

      4. 在导入 .js 文件时, TS 会自动加载与 .js 同名的 .d.ts 文件

      5. declare 关键字:用于类型声明,为其他地方(比如 .js 文件)已存在的变量声明类型,而不是创建一个新的变量。

        1. 对于 type \ interface 等这些明确就是 TS 类型的(只能在 TS 中使用),可以省略 declare 关键字

        2. 对于 let \ function 等具有双重含义(在 JS \ TS 中都能用),应该使用 declare 关键字,明确指定此处用于类型声明

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

declare let count: number 
declare let songName: string interface Point { x: number, y: number } 
declare let position: Point 
declare function add (x: number, y: number): number 
type FomartPoint = (point: Point) => void 
declare const fomartPoint: FomartPoint // 注意:类型提供好以后,需要使用 模块化方案 中提供的模块化语法,来导出声明好的类型。然后,才能在其他的 .ts 文件中使用 
export { count, position, songName, Point, add, fomartPoint }
 
posted @ 2022-12-11 18:33  东八区  阅读(204)  评论(0编辑  收藏  举报