TypeScript进阶

TypeScript 类型声明文件

基本介绍

三种文件：

• .js 文件：只有代码逻辑，没有类型声明

• .d.ts 文件：只有类型声明，没有代码逻辑

• .ts 文件：既有类型声明，又有代码逻辑

.d.ts 类型声明文件的作用：为 JS 代码提供类型支持。

使用场景：使用第三方库时，引入的都是它的 js 文件，想要有类型支持，就需要第三方库提供相应的类型声明文件。

如果第三方库的源码是 ts 写的，它会将 ts 源码编译成 js + .d.ts，供开发者使用。

内置类型声明文件

• TypeScript 为所有内置 JS API 都提供了类型声明文件。

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

const arr = ['a', 'b', 'c']

// 鼠标放在 forEach 上查看类型

arr.forEach

• 实际上这都是 TS 提供的内置类型声明文件（在安装 ts 后，会自动下载这些内置声明文件）

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

第三方库类型声明文件

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

第三方库的类型声明文件有两种存在形式：1.库自带类型声明文件；2.由 DefinitelyTyped 提供。

1. 库自带类型声明文件：比如 axios

• 查看 node_modules/axios 目录

• 解释：这种情况下，正常导入该库，TS 就会自动加载库自己的类型声明文件，以提供该库的类型声明。

1. 由 DefinitelyTyped 提供

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

• 可以通过 npm/yarn 来下载该仓库提供的 TS 类型声明包，这些包的名称格式为:@types/*

• 比如，@types/jquery、@types/lodash 等

• 说明：在实际项目开发时，如果你使用的第三方库没有自带的声明文件，VSCode 会给出明确的提示

import lodash from 'lodash' // 报错，提示安装 lodash 的类型声明文件

loadsh.cloneDeep

自定义类型声明文件

自定义类型声明文件的作用：

1. 类型复用（重要）

2. 为已有的 js 代码提供类型支持（了解）

类型复用

如果项目中的多个地方都用到同一个类型，此时可以创建 .d.ts 文件提供该类型，实现类型复用。

操作步骤:

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

2. 定义类型，使用 export 导出

3. 在需要使用的地方，通过 import 导入即可（导入时，.d.ts 后缀要省略）

没有类型复用的情况

App.vue

<script setup lang="ts">

type Person = {

  name: string,

  age: number,

  gender: string

}

const person: Person = {

  name: 'zs',

  age: 18,

  gender: '男'

}

</script>

<template>

  <div>

    <h1>我是 App 组件</h1>

  </div>

</template>

Child.vue

<script setup lang="ts">

type Person = {

  name: string,

  age: number,

  gender: string

}

const person: Person = {

  name: 'ls',

  age: 19,

  gender: '女'

}

</script>

<template>

  <div>

    <h1>我是 Child 组件</h1>

  </div>

</template>

类型复用的情况

src/types/index.d.ts

export type Person = {

  name: string,

  age: number,

  desc: string

}

App.vue

<script setup lang="ts">

import { Person }  from './types/index'

const person: Person = {

  name: 'zs',

  age: 18,

  gender: '男'

}

</script>

<template>

  <div>

    <h1>我是 App 组件</h1>

  </div>

</template>

Child.vue

<script setup lang="ts">

import { Person }  from '../types/index'

const person: Person = {

  name: 'ls',

  age: 19,

  gender: '女'

}

</script>

<template>

  <div>

    <h1>我是 Child 组件</h1>

  </div>

</template>

为 js 提供类型声明

使用场景：

1. 自己封装了库给别人使用，需要提供类型声明文件

2. 让项目中的 js 老代码，拥有类型提示

类型声明文件写法

1. 新建一个与 js 文件同名的 .d.ts 文件

2. 在里面编写对应的类型说明

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

src/utils/index.js

// 只需要对导出的内容做类型声明

export let count = 10

export let songName = '痴心绝对'

export let position = {

  x: 0,

  y: 0

}

export const fomartPoint = point => {

  console.log('当前坐标：', point)

}

export function changeDirection(direction) {

  console.log(direction)

}

src/utils/index.d.ts

// declare 关键字：用于为变量声明类型

export declare let count: number

export declare let songName: string

type Position = {

  x: number

  y: number

}

export declare let position: Position

export declare const formatPoint: (point: Position) => void

type Direction = 'up' | 'down' | 'left' | 'right'

export function changeDirection(direction: Direction): void