TypeScript类型声明文件

② TypeScript类型声明文件

:::tip typescript 类型声明文件相关知识 :::

基本介绍

知道：TS类型声明文件是什么以及作用

项目中安装的第三方库里面都是打包后的JS代码，但是我们使用的时候却有对应的TS类型提示，这是为什么呢？

• 在第三方库中的JS代码都有对应的 TS类型声明文件

什么是类型什么文件？

• 通俗地来讲，在 TypeScript 中以 .d.ts 为后缀的文件，我们称之为 TypeScript 类型声明文件。它的主要作用是描述 JavaScript 模块内所有导出成员的类型信息。

TS 中有两种文件类型：.ts 文件 .d.ts 文件作用是啥？

• .ts 文件:

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

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

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

• .d.ts 文件:

  1. 只包含类型信息的类型声明文件

  2. 不会生成 .js 文件，仅用于提供类型信息,在.d.ts文件中不允许出现可执行的代码，只用于提供类型

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

小结：

• .ts 是 implementation 代码实现文件

• .d.ts 是 declaration 类型声明文件

• 如果要为 JS 库或者模块提供类型，就需要类型声明文件

内置类型声明文件

知道：什么是内置的类型什么文件

• 发现，在使用数组时，数组所有方法都会有相应的代码提示以及类型信息:

const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEach

TypeScript 给 JS 运行时可用的所有标准化内置 API 都提供了声明文件，这个声明文件就是 内置类型声明文件

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

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

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

第三方库类型声明文件

掌握：给第三方库添加对应的类型声明文件

首先，常用的第三方库都有相应的类型声明文件，只是使用的方式不同而已。

情况1：库本身自带类型声明文件

• 比如：axios，安装后可查看 node_modules/axios 可发现对应的类型声明文件。

• 导入 axios 后就会加载对应的类型文件，提供该库的类型声明。

情况2：由 DefinitelyTyped 提供

• 比如：lodash，安装后导入，提示：需要安装 @types/lodash 类型声明包

• DefinitelyTyped 是一个 github 仓库，用来提供高质量 TypeScript 类型声明

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

TypeScript: Search for typed packages 可以搜索是否有对应的 @types/*(不可用！)

自定义类型声明文件

共享类型 ☆☆☆

掌握：使用类型声明文件提供需要共享的TS类型

• 如果多个 .ts 文件中都用到同一个类型，此时可以创建 .d.ts 文件提供该类型，实现类型共享。

• 操作步骤:

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

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

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

src/types/data.d.ts

export type Person = {
  id: number;
  name: string;
  age: number;
};

App.vue

<script lang="ts" setup>
import { Person } from './types/data'
const p: Person = {
  id: 100,
  name: 'jack',
  age: 19
}
</script>

给JS文件提供类型

了解：使用类型声明文件给JS文件添加类型

• 在导入 .js 文件时，TS 会自动加载与 .js 同名的 .d.ts 文件，以提供类型声明。

• declare 关键字：

  • 用于类型声明，为其他地方(比如，.js 文件)已存在的变量声明类型，而不是创建一个新的变量。

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

  2. 其他 JS 变量，应该使用 declare 关键字，明确指定此处用于类型声明。

add/index.js

const add = (a, b) => {
  return a + b;
};
​
const ponit = (p) => {
  console.log('坐标：', p.x, p.y);
};
​
export { add, ponit }

add/index.d.ts

declare const add: (a: number, b: number) => number;
​
type Position = {
  x: number;
  y: number;
};
​
declare const ponit: (p: Position) => void;
​
export { add , ponit};

main.ts

import { add , ponit} from './add';
​
add(3, 10)
​
ponit({x: 100, y: 200})