TypeScript类型声明文件

今天几乎所有的JavaScript应用都会引入许多第三方库来完成任务需求。

这些第三方库不管是否是用TS编写的，最终都要编译成JS代码，才能发布给开发者使用。

我们知道是TS 提供了类型，才有了代码提示和类型保护等机制。

但在项目开发中使用第三方库时，你会发现它们几乎都有相应的TS类型，这些类型是怎么来的呢? 类型声明文件

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

这样在 TS 项目中使用这些库时，就像用TS一样，都会有代码提示、类型保护等机制了。

TS 的两种文件类型
类型声明文件的使用说明

TS 中的两种文件类型

TS 中有两种文件类型:1. ts 文件 2. d.ts 文件。

.ts 文件:

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

type Pross = { a: number, b: number }

function add(num: number, num1: number): number {
    return num + num1
}

可以被编译为.js 文件，然后，执行代码。
用途:编写程序代码的地方。

.d.ts 文件:

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

type Pross = { a: number, b: number }

//错误的写法
function add(num: number, num1: number): number {
    return num + num1
}

不会生成.js 文件，仅用于提供类型信息。
用途:为JS 提供类型信息。

总结:.ts是implementation(代码实现文件);. d.ts是declaration(类型声明文件)。

如果要为 JS 库提供类型信息，要使用.d.ts 文件。

类型声明文件的使用说明

在使用 TS 开发项目时，类型声明文件的使用包括以下两种方式:

使用已有的类型声明文件
- 使用已有的类型声明文件: 1内置类型声明文件 2 第三方库的类型声明文件。
  1. 内置类型声明文件 :TS为JS运行时可用的所有标准化内置API都提供了声明文件。
比如，在使用数组时，数组所有方法都会有相应的代码提示以及类型信息:
```
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
```
实际上这都是 TS 提供的内置类型声明文件。

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

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

当然，像 window、document等 BOM、DOM API也都有相应的类型声明(lib.dom.d.ts)。
```
document.querySelector()

window
```
第三方库的类型声明文件:目前，几乎所有常用的第三方库都有相应的类型声明文件。

第三方库的类型声明文件有两种存在形式:1 库自带类型声明文件 2 由 DefinitelyTyped 提供
- 库自带类型声明文件:比如，axios。
  
  解释:这种情况下，正常导入该库，TS就会自动加载库自己的类型声明文件，以提供该库的类型声明。
- 由 DefinitelyTyped 提供。
  
  DefinitelyTyped是一个 github 仓库，用来提供高质量Typescript类型声明。
  
  可以通过 npm/yarn 来下载该仓库提供的TS类型声明包，这些包的名称格式为:@types/*。
  
  比如，@types/react、@types/lodash等。
  
  说明:在实际项目开发时，如果你使用的第三方库没有自带的声明文件，VSCode会给出明确的提示。
  
  解释:当安装 @types/**类型声明包后，TS也会自动加载该类声明包，以提供该库的类型声明。*
  补充:TS 官方文档提供了一个[页面](这个页面已经没有了官方说不需要了)，可以来查询 @types/*库。
创建自己的类型声明文件

创建自己的类型声明文件: 1项目内共享类型 2 为已有 JS 文件提供类型声明。

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

操作步骤:
1. 创建 index.d.ts 类型声明文件。
2. 创建需要共享的类型，并使用export导出(TS中的类型也可以使用import/export 实现模块化功能)。
3. 在需要使用共享类型的.ts 文件中，通过import 导入即可(.d.ts后缀导入时，直接省略)。
```
//index.d.ts
type Props = { x: number; y: number }

export {Props}

//first.ts
import {Props} from "./index";

// type Props = { x: number; y: number }

let p1: Props = {
    x: 1, y: 2
}
```
为已有JS 文件提供类型声明:
1. 在将JS 项目迁移到 TS 项目时，为了让已有的.js 文件有类型声明。
2. 成为库作者，创建库给其他人使用。
注意:类型声明文件的编写与模块化方式相关，不同的模块化方式有不同的写法。但由于历史原因，JS 模块化的发展经历过多种变化(AMD、CommonIS、UMD、ESModule等)，而TS支持各种模块化形式的类型声明。这就导致，类型声明文件相关内容又多又杂。

演示: 基于最新的 ESModule(import/export)来为已有.js 文件，创建类型声明文件。

开发环境准备: 使用webpack搭建，通过ts-loader处理.ts 文件。

说明:TS 项目中也可以使用.js 文件。

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

declare 关键字:用于类型声明，为其他地方(比如，.js文件)已存在的变量声明类型，而不是创建一个新的变量。
1. 对于 type、interface 等这些明确就是TS 类型的(只能在TS 中使用的)，可以省略declare 关键字。
2. 对于let、function等具有双重含义(在JS、TS 中都能用)，应该使用declare 关键字，明确指定此处用于类型声明。
```
//utils.js
let count = 10

let position = {
    x: 0, y: 0
}

function add(x, y) {
    return x + y
}

function changeDirection(direction) {
    console.log(direction)
}

const formatPoint = point => {
    console.log("当前坐标：", point)
}

export {count, position, add, changeDirection, formatPoint}


//utils.d.ts
declare let count: number
interface Point {
    x: number;
    y: number
}

declare let position: Point

declare function add(x: number, y: number): number

declare function changeDirection(direction: 'up' | 'down'): void

type FormatPoint = (point: Point) => void
declare const formatPoint:FormatPoint

//注意：类型提供好以后，需要使用模块化方案中提供的模块化语法，来导出声明好的类型。然后才能在其他的.ts文件中使用
export {count, position, add, changeDirection, formatPoint}

//index.ts
import {count, add, formatPoint} from './utils'

console.log(count)
```

学习顺序:先会用(别人的)再会写(自己的)

posted @ 2025-05-05 13:05 snail灬阅读(62) 评论(0) 收藏举报

刷新页面返回顶部

snail

TypeScript类型声明文件

TS 中的两种文件类型

类型声明文件的使用说明

公告