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 提供。
-
库自带类型声明文件：比如 axios
-
查看
node_modules/axios目录 -
解释：这种情况下，正常导入该库，TS 就会自动加载库自己的类型声明文件，以提供该库的类型声明。
-
由 DefinitelyTyped 提供
-
DefinitelyTyped 是一个 github 仓库，用来提供高质量 TypeScript 类型声明
-
可以通过 npm/yarn 来下载该仓库提供的 TS 类型声明包，这些包的名称格式为:
@types/* -
比如，@types/jquery、@types/lodash 等
-
说明：在实际项目开发时，如果你使用的第三方库没有自带的声明文件，VSCode 会给出明确的提示
import lodash from 'lodash' // 报错，提示安装 lodash 的类型声明文件
loadsh.cloneDeep
自定义类型声明文件
自定义类型声明文件的作用：
-
类型复用（重要）
-
为已有的 js 代码提供类型支持（了解）
类型复用
如果项目中的多个地方都用到同一个类型，此时可以创建 .d.ts 文件提供该类型，实现类型复用。
操作步骤:
-
创建 types/index.d.ts 类型声明文件。
-
定义类型，使用 export 导出
-
在需要使用的地方，通过 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 提供类型声明
使用场景：
-
自己封装了库给别人使用，需要提供类型声明文件
-
让项目中的 js 老代码，拥有类型提示
类型声明文件写法
-
新建一个与 js 文件同名的 .d.ts 文件
-
在里面编写对应的类型说明
-
在导入 .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