文章目录

• 前言
• 一、类型注解
• 二、类型概述
• • 2.1 原始数据类型
  • 2.2 数组类型
  • 2.3 联合类型
  • 2.4 类型别名
  • 2.5 函数类型
  • 2.6 void类型
  • 2.7 可选参数
  • 2.8 对象类型
  • 2.9 接口类型
  • 2.9.1 接口继承
  • 2.10 元组类型
  • 2.11 类型推论
  • 2.12 字面量类型
  • 2.13 枚举类型
  • 2.14 any类型
  • 2.15 类型断言
  • 2.16 TypeScript泛型
  • 2.17 泛型约束
  • 2.18 泛型约束——多个类型变量
  • 2.19 泛型接口
• 三、TypeScript 与 Vue3
• • 3.1 defineProps 与 TypeScript
  • 3.2 defineEmits 与 TypeScript
  • 3.3 ref 与 TypeScirpt
  • 3.4 computed 与 TypeScript
  • 3.5 事件处理 与 TypeScript
  • 3.6 Template Ref 与 TypeScript
  • 3.7 非空断言
  • 3.8 TypeScript类型声明文件
  • 3.8.1 内置类型声明文件
  • 3.8.2 第三方库类型声明文件
  • 3.8.3 自定义类型声明文件——共享类型
  • 3.8.4 类型声明文件的使用说明
• 总结

前言

学习一门语言之前，我们首先肯定要知道我们为什么而学？
JS 的类型系统存在“先天缺陷”弱类型，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）。
这些经常出现的错误，导致了在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影响开发效率。
TypeScript 属于静态类型（编译期做类型检查）的编程语言，JavaScript 属于动态类型（执行期做类型检查）的编程语言
对于 JS 来说：需要等到代码真正去执行的时候才能发现错误（晚）
对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）
并且，配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间。

Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端项目的首选编程语言

一、类型注解

TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统
JS也有类型（比如，number/string 等），但是 JS 不会检查变量的类型是否发生变化，而 TS 会检查
TypeScript 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

let age: number = 10 let username: string = '刘狄威' 

上述代码中，约定变量 age 的类型为 number 类型，username的类型为string类型，约定了什么类型，就只能给变量赋值该类型的值，否则就会报错

约定了类型之后，代码的提示就会非常的清晰

二、类型概述

可以将 TS 中的常用基础类型细分为两类：

• JS 已有类型
  原始数据类型（ number/string/boolean/null/undefined ）
  复杂数据类型（数组，对象，函数等）
• TS 新增类型
  联合类型
  自定义类型（类型别名）
  接口
  元组
  字面量类型
  枚举
  void
  …

2.1 原始数据类型

原始类型：number/string/boolean/null/undefined

let age: number = 18 let myName: string = '老师' let isLoading: boolean = false 

2.2 数组类型

ts中数组类型有两种写法

// 写法一（推荐）： let numbers: number[] = [1, 3, 5] // 写法二： let strings: Array = ['a', 'b', 'c'] 

2.3 联合类型

通过联合类型将多个类型组合成一个类型

如果数组中既有 number 类型，又有 string 类型，那么这个数组的类型应该如何写?

  let arr: (number | string)[] = [1, 2, 3, 'abc']   // 注意事项: | 的优先级较低, 需要用 () 包裹提升优先级   // 一旦使用联合类型, 说明 arr 中存储的既可能是 number 也可能是 string, 所以会丢失一部分提示信息 (只能提示共有的方法和属性)   let timerId: number | null = null 

| （竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
注意：这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（||）混淆了

2.4 类型别名

使用类型别名给类型起别名，简化类型的使用

当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用

// 将一组类型存储到「变量」里, 用 type 来声明这个特殊的「变量」 type CustomArray = (number | string)[] let arr1: CustomArray = [1, 'a', 3, 'b'] let arr2: CustomArray = ['x', 'y', 6, 7] 

2.5 函数类型

函数的类型实际上指的是： 函数参数 和 返回值 的类型

• 单独指定参数、返回值的类型

  // 函数声明   // function 函数名(参数1: 参数1类型, 参数2: 参数2类型): 返回值类型 { 函数体 }    function add(a: number, b: number): number {      return a + b    }   // 函数表达式    const fn = function(a: number, b: number): number {      return a + b    }   // 箭头函数   // 注意事项: 以前箭头函数如果只有一个参数, 则可省略小括号, ts不行   // ts箭头函数必须要有小括号    const sub = (a: number): number => {      return a    }    const sub = (a: number, b: number): number => {      return a - b    } 

• 同时指定参数、返回值的类型（函数的类型别名）

type AddFn = (num1: number, num2: number) => number const add: AddFn = (num1, num2) => {     return num1 + num2 } 

这种形式只适用于函数表达式

2.6 void类型

如果函数没有返回值，那么，函数返回值类型为： void

// 如果什么都不写，此时，add 函数的返回值类型为： void const add = () => {} // 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同 const add = (): void => {} // 但如果指定返回值类型为 undefined 时，函数体中必须显式的 return undefined 才可以 const add = (): undefined => { // 此处，返回的 undefined 是 JS 中的一个值 return undefined } 

2.7 可选参数

使用?给函数指定可选参数类型

  // 注意事项: 必选参数不能在可选参数后(可选参数只能出现在参数列表的最后)   const print = (name?: string, gender?: string): void => {     if (name && gender) {       console.log(name, gender)     }   } 

2.8 对象类型

JS 中的对象是由属性和方法构成的，而 TS 对象的类型就是在描述对象的结构（有什么类型的属性和方法）

let person: {   name: string   sayHi(): void } = {   name: 'jack',   sayHi(content: string) {} } 

也可以用类型别名进行简化

  type Person = {     name: string,     age: number,     girlFriend?: string, // ? 表示可选属性     // sayHi: (content: string) => void     sayHi(content: string): void   }    // ts 就像在写注释, 以前写的注释是给程序员看的, ts 写的类型是给编辑器看的, 程序员也可以看   let obj1: Person = {     name: 'james',     age: 39,     sayHi(content) {       console.log(content)     }   } 

2.9 接口类型

当一个对象类型被多次使用时，一般会使用接口（ interface ）来描述对象的类型，达到复用的目的

interface IPerson {   name: string   age: number   sayHi(): void } let person: IPerson = {   name: 'jack',   age: 19,   sayHi() {} } 

interface（接口）和 type（类型别名）的对比：

• 相同点：都可以给对象指定类型
• 不同点:
  接口只能为对象指定类型
  类型别名不仅可以为对象指定类型，实际上可以为任意类型指定别名

推荐：能使用 type 就是用 type

2.9.1 接口继承

接口继承: 可以实现一个接口使用另一个接口的类型约束, 实现接口的复用

  interface IPerson {     username: string     age: number     gender: string     sayHi: () => void   }   // 接口继承: IStudent 具备 IPerson 的所有约束规则   interface IStudent extends IPerson {     score: number     sleep: () => void   }    const s1: IStudent = {     username: 'james',     age: 19,     gender: '男',     sayHi() {       console.log('詹姆斯')     },     score: 59,     sleep() {       console.log('詹姆斯正在睡觉...')     },   } 

使用type也能实现类似继承的效果

// 使用 type 实现和 interface 类似继承的效果   type Person = {     username: string     age: number     gender: string     sayHi: () => void   }    // & 与连接符: 既要满足前面的也要满足后面的   // | 或连接符: 满足其中一个即可   type Student = {     score: number     sleep: () => void   } & Person      const s2: Student = {     username: 'james',     age: 28,     gender: '未知',     sayHi() {       console.log('hello!')     },     score: 80,     sleep() {       console.log('我在睡觉')     },   } 

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

2.10 元组类型

元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型

let position: [number, number] = [39.5427, 116.2317] 

• 元组类型可以确切地标记出有多少个元素，以及每个元素的类型
• 该示例中，元素有两个元素，每个元素的类型都是 number

使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字

2.11 类型推论

在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型

// 变量 age 的类型被自动推断为：number let age = 18 // 函数返回值的类型被自动推断为：number function add(num1: number, num2: number): number { return num1 + num2 } 

发生类型推论的 2 种常见场景:

1. 声明变量并初始化时
2. 决定函数返回值时

2.12 字面量类型

let str1 = 'Hello TS' const str2 = 'Hello TS' 

通过 TS 类型推论机制:

1. 变量 str1 的类型为：string
2. 变量 str2 的类型为：‘Hello TS’

此处的 ‘Hello TS’，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型

// 使用自定义类型: type Direction = 'up' | 'down' | 'left' | 'right' function changeDirection(direction: Direction) { console.log(direction) } // 调用函数时，会有类型提示： changeDirection('up') 

• 解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
• 优势：相比于 string 类型，使用字面量类型更加精确、严谨

字面量类型就是把字面量当做类型来用

2.13 枚举类型

枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个

// 创建枚举 enum Direction { Up, Down, Left, Right } // 使用枚举类型 function changeDirection(direction: Direction) {     console.log(direction) } // 调用函数时，需要应该传入：枚举 Direction 成员的任意一个 // 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员 changeDirection(Direction.Up) 

• 数字枚举：默认为从 0 开始自增的数值

// Down -> 11、Left -> 12、Right -> 13 enum Direction { Up = 10, Down, Left, Right } 

• 字符串枚举：字符串枚举的每个成员必须有初始值（没有自增长行为）

enum Direction { 	Up = 'UP', 	Down = 'DOWN', 	Left = 'LEFT', 	Right = 'RIGHT' } 

• 枚举是 TS 为数不多的非 JavaScript 类型级扩展(不仅仅是类型)的特性之一
  因为：其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值(枚举成员都是有值的)
  也就是说，其他的类型会在编译为 JS 代码时自动移除。但是，枚举类型会被编译为 JS 代码

enum Direction { 	Up = 'UP', 	Down = 'DOWN', 	Left = 'LEFT', 	Right = 'RIGHT' } // 会被编译为以下 JS 代码： var Direction; (function (Direction) { 	Direction['Up'] = 'UP' 	Direction['Down'] = 'DOWN' 	Direction['Left'] = 'LEFT' 	Direction['Right'] = 'RIGHT' })(Direction || Direction = {}) 

2.14 any类型

这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
当值的类型为 any 时，可以对该值进行任意操作，并且不会有代码提示

• 其他隐式具有 any 类型的情况

1. 声明变量不提供类型也不提供默认值
2. 函数参数不加类型

注意：因为不推荐使用 any，所以，这两种情况下都应该提供类型

  function fn(a, b) {}   let b 

2.15 类型断言

使用类型断言来指定更具体的类型

const aLink = document.getElementById('link') 

• 该方法返回值的类型是 HTMLElement，此类型只包含所有标签公共的属性或方法，不包含 a
  标签特有的 href 等属性，导致无法操作 href 等 a 标签特有的属性或方法（这种情况下就需要使用类型断言指定更加具体的类型）

const aLink = document.getElementById('link') as HTMLAnchorElement 

• 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）

// 此语法不常用，知道即可： const aLink = document.getElementById('link') 

2.16 TypeScript泛型

• 泛型在保证类型安全(不丢失类型信息)的同时，可以让函数等与多种不同的类型一起工作，灵活可复用
• 在 C# 和 Java 等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一

//定义泛型函数 function id(value: Type): Type { return value } function id(value: T): T { return value } 

• 该类型变量相当于一个类型容器，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)

// 调用泛型函数 const num = id(10) const str = id('a') 

实现了复用的同时保证了类型安全

泛型函数的调用可简化=>省略 <类型> 来简化泛型函数的调用，利用TS内部的类型参数推断

// 省略  调用函数 let num = id(10) let str = id('a') 

当编译器无法推断类型或者推断的类型不准确时，就需要显式地传入类型参数

2.17 泛型约束

为什么需要泛型约束呢，举例一个场景：

function id(value: Type): Type { 	console.log(value.length) 	return value } id(2) 

• Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length

此时，就需要为泛型添加约束来收缩类型 (缩窄类型取值范围)
添加泛型约束收缩类型，主要有以下两种方式：1 .指定更加具体的类型 2. 添加约束

1. 指定更加具体的类型

function id(value: Type[]): Type[] { 	console.log(value.length) 	return value } 

将类型修改为 Type[] (Type 类型的数组)，只要是数组就一定存在 length 属性

2. 添加约束

// 创建一个接口 interface ILength { length: number } // Type extends ILength 添加泛型约束 // 解释：表示传入的类型必须满足 ILength 接口的要求才行，也就是得有一个 number 类型的 length 属性 function id(value: Type): Type { 	console.log(value.length) 	return value } 

• 创建描述约束的接口 ILength，该接口要求提供 length 属性
• 通过 extends 关键字使用该接口，为泛型(类型变量)添加约束
• 该约束表示：传入的类型必须具有 length 属性
  此方法，传入的实参(比如，数组)只要有 length 属性即可（类型兼容性)

2.18 泛型约束——多个类型变量

泛型的类型变量可以有多个，并且类型变量之间还可以约束(比如，第二个类型变量受第一个类型变量约束)
比如，创建一个函数来获取对象中属性的值：

function getProp(obj: Type, key: Key) { 	return obj[key] } let person = { name: 'jack', age: 18 } getProp(person, 'name') 

1. 两个类型变量之间的使用，用逗号分隔。
2. keyof 关键字接收一个对象类型，生成其键名称(可能是字符串或数字)的联合类型。
3. 本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型，也就是： ‘name’ | ‘age’
4. 类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性

function getProperty(obj: Type, key: Key) { 	return obj[key] } 

2.19 泛型接口

泛型接口：接口也可以配合泛型来使用，以增加其灵活性，增强其复用性

interface IdFunc { 	id: (value: Type) => Type 	ids: () => Type[] } let obj: IdFunc = { 	id(value) { return value }, 	ids() { return [1, 3, 5] } } 

在接口名称的后面添加 <类型变量> ，那么这个接口就变成了泛型接口。

三、TypeScript 与 Vue3

vue3配合ts中，还需要额外安装一个vscode插件：Typescript Vue Plugin TypeScript 与组合式 API

3.1 defineProps 与 TypeScript

• defineProps配合vue3默认语法进行类型校验：

defineProps({ 	money: { 		type: Number, 		required: true	 }, 	car: { 		type: String, 		required: true } }) 

• defineProps配合ts的泛型，定义props类型校验

// 使用ts的泛型指定props类型 defineProps<{ 	money: number 	car?: string }>()  // 赋予默认值 interface Props {   value: boolean; } const props = withDefaults(defineProps(), { value: false }); 

3.2 defineEmits 与 TypeScript

• defineEmits配合运行时声明

const emit = defineEmits(['change', 'update']) 

• defineEmits配合ts类型声明

const emit = defineEmits<{ 	(e: 'changeMoney', money: number): void 	(e: 'changeCar', car: string): void }>() 

3.3 ref 与 TypeScirpt

// 简单值 类型可忽略 const money = ref(10) const money = ref(10)  // 复杂类型 推荐指定泛型 type Todo = { 	id: number 	name: string 	done: boolean } const list = ref([]) 

3.4 computed 与 TypeScript

const leftCount = computed(() => { 	return list.value.filter((item) => item.done).length }) 

3.5 事件处理 与 TypeScript

const move = (e: MouseEvent) => { 	mouse.value.x = e.pageX 	mouse.value.y = e.pageY } 
根组件
  

3.6 Template Ref 与 TypeScript

const imgRef = ref(null) onMounted(() => { 	console.log(imgRef.value?.src) }) 

如何查看一个DOM对象的类型：通过控制台进行查看

document.createElement('img').__proto__ 

3.7 非空断言

如果我们明确的知道对象的属性一定不会为空，那么可以使用非空断言 !
注意：非空断言一定要确保有该属性才能使用，不然使用非空断言会导致bug

// 告诉typescript, 明确的指定obj不可能为空 let nestedProp = obj!.second; 

3.8 TypeScript类型声明文件

• 类型声明文件：用来为已存在的 JS 库提供类型信息
  TS 中有两种文件类型：1 .ts 文件 2 .d.ts 文件
• .ts 文件:

1. 既包含类型信息又可执行代码
2. 可以被编译为 .js 文件，然后执行代码
3. 用途：编写程序代码的地方

• .d.ts 文件:

1. 只包含类型信息的类型声明文件
2. 不会生成 .js 文件，仅用于提供类型信息,在.d.ts文件中不允许出现可执行的代码，只用于提供类型
3. 用途：为 JS 提供类型信息
   总结：.ts 是 implementation (代码实现文件)；.d.ts 是 declaration(类型声明文件)
   如果要为 JS 库提供类型信息，要使用 .d.ts 文件

3.8.1 内置类型声明文件

• TS 为 JS 运行时可用的所有标准化内置 API 都提供了声明文件
  比如，在使用数组时，数组所有方法都会有相应的代码提示以及类型信息:

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

比如，查看(ctrl+鼠标左键) forEach 方法的类型声明，在 VSCode 中会自动跳转到 lib.es5.d.ts 类型声明文件中
当然，像 window、document 等 BOM、DOM API 也都有相应的类型声明( lib.dom.d.ts )

3.8.2 第三方库类型声明文件

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

1. 库自带类型声明文件
   这种情况下，正常导入该库（举例axios=>查看 node_modules/axios 目录），TS 就会自动加载库自己的类型声明文件，以提供该库的类型声明。

2. 由 DefinitelyTyped 提供 => 提供 TypeScript 类型定义文件（.d.ts 文件）用于流行的 JavaScript 库和框架。它的目的是为那些原本没有内置 TypeScript 支持的 JavaScript 库提供类型定义，以便开发者在使用这些库时能够享受到 TypeScript 的类型检查和智能提示功能。

可以通过npm/yarn来下载该仓库提供的 TS 类型声明包，这些包的名称格式为: @types/*，比如，@types/react、@types/lodash 等
当安装 @types/* 类型声明包后，TS 也会自动加载该类声明包，以提供该库的类型声明。 查询 @types/* 库

3.8.3 自定义类型声明文件——共享类型

项目内共享类型

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

1. 创建 index.d.ts 类型声明文件。
2. 创建需要共享的类型，并使用 export 导出(TS 中的类型也可以使用 import/export 实现模块化
   功能)。
3. 在需要使用共享类型的 .ts 文件中，通过 import 导入即可(.d.ts 后缀导入时，直接省略)。

自定义类型声明文件为js提供声明。

为已有js 文件提供类型声明

1. 在将 JS 项目迁移到 TS 项目时，为了让已有的 .js 文件有类型声明。（整个项目从js升级到ts不太可能，工程太庞大了，但是可以为已有js文件添加类型声明，这样在ts中使用时，也有类型提示）
2. 成为库作者，创建库给其他人使用。

3.8.4 类型声明文件的使用说明

• TS 项目中也可以使用 .js 文件。
• 在导入 .js 文件时，TS 会自动加载与 .js 同名的 .d.ts 文件，以提供类型声明。（如果 .js 文件和 .d.ts 文件在同一文件夹下，TypeScript 会自动关联它们。 如果将 .d.ts 文件放在不同的文件夹中，也可以通过配置 tsconfig.json 文件中的 typeRoots 或 paths 选项来实现。）
• declare 关键字:用于类型声明，为其他地方(比如，.js 文件)已存在的变量声明类型，而不是创建一个新的变量。

1. 对于 type、interface 等这些明确就是 TS 类型的(只能在 TS 中使用的)，可以省略 declare 关键字。
2. 对于 let、function 等具有双重含义(在 JS、TS 中都能用)，应该使用 declare 关键字，明确指定此处用于类型声明。

let count = 10 let songName = '痴心绝对' let position = { 	x: 0, 	y: 0 } function add(x, y) { 	return x + y } function changeDirection(direction) { 	console.log(direction) } const fomartPoint = point => { 	console.log('当前坐标：', point) } export { count, songName, position, add, changeDirection, fomartPoint } 

为以上js文件提供类型声明文件

declare let count:number declare let songName: string interface Position { 	x: number, 	y: number } declare let position: Position declare function add (x :number, y: number) : number type Direction = 'left' | 'right' | 'top' | 'bottom' declare function changeDirection (direction: Direction): void type FomartPoint = (point: Position) => void declare const fomartPoint: FomartPoint // TypeScript 通过 export 关键字了解哪些类型声明应该暴露给外部使用，从而在其他模块中提供类型检查和代码提示。 export { count, songName, position, add, changeDirection, FomartPoint, fomartPoint }  

总结

• 一、类型注解
  TypeScript 是 JavaScript 的超集，增加了类型系统。通过类型注解，可以避免意外的类型错误，提高代码的可读性和维护性。

• 二、类型概述
  文章详细介绍了 TypeScript 中的各种类型，包括基础类型（如 number、string）、数组类型、联合类型、类型别名、函数类型、void 类型、可选参数、对象类型、接口类型、元组类型、类型推论、字面量类型、枚举类型、any 类型、类型断言和泛型。

• 三、TypeScript 与 Vue3
  文章最后介绍了如何在 Vue 3 中使用 TypeScript，包括 defineProps、defineEmits、ref、computed、事件处理、Template Ref、非空断言和类型声明文件等内容。