文章目录
前言一、类型注解二、类型概述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 与 Vue33.1 defineProps 与 TypeScript3.2 defineEmits 与 TypeScript3.3 ref 与 TypeScirpt3.4 computed 与 TypeScript3.5 事件处理 与 TypeScript3.6 Template Ref 与 TypeScript3.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 = 10let 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 = 18let myName: string = '老师'let isLoading: boolean = false2.2 数组类型
ts中数组类型有两种写法
// 写法一（推荐）：let numbers: number[] = [1, 3, 5]// 写法二：let strings: Array<string> = ['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) => numberconst add: AddFn = (num1, num2) => { return num1 + num2}这种形式只适用于函数表达式
2.6 void类型
如果函数没有返回值，那么，函数返回值类型为： void
// 如果什么都不写，此时，add 函数的返回值类型为： voidconst 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[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字
2.11 类型推论
在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型
// 变量 age 的类型被自动推断为：numberlet age = 18// 函数返回值的类型被自动推断为：numberfunction add(num1: number, num2: number): number {return num1 + num2}发生类型推论的 2 种常见场景:
声明变量并初始化时决定函数返回值时2.12 字面量类型
let str1 = 'Hello TS'const str2 = 'Hello TS'通过 TS 类型推论机制:
变量 str1 的类型为：string变量 str2 的类型为：‘Hello TS’此处的 ‘Hello TS’，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型
// 使用自定义类型:type Direction = 'up' | 'down' | 'left' | 'right'function changeDirection(direction: Direction) {console.log(direction)}// 调用函数时，会有类型提示：changeDirection('up')字面量类型就是把字面量当做类型来用
2.13 枚举类型
枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个
// 创建枚举enum Direction { Up, Down, Left, Right }// 使用枚举类型function changeDirection(direction: Direction) { console.log(direction)}// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员changeDirection(Direction.Up)// Down -> 11、Left -> 12、Right -> 13enum Direction { Up = 10, Down, Left, Right }enum Direction {Up = 'UP',Down = 'DOWN',Left = 'LEFT',Right = 'RIGHT'}因为：其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值(枚举成员都是有值的)
也就是说，其他的类型会在编译为 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，所以，这两种情况下都应该提供类型
function fn(a, b) {} let b2.15 类型断言
使用类型断言来指定更具体的类型
const aLink = document.getElementById('link')标签特有的 href 等属性，导致无法操作 href 等 a 标签特有的属性或方法（这种情况下就需要使用类型断言指定更加具体的类型）
const aLink = document.getElementById('link') as HTMLAnchorElement// 此语法不常用，知道即可：const aLink = <HTMLAnchorElement>document.getElementById('link')2.16 TypeScript泛型
泛型在保证类型安全(不丢失类型信息)的同时，可以让函数等与多种不同的类型一起工作，灵活可复用在 C# 和 Java 等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一//定义泛型函数function id<Type>(value: Type): Type { return value }function id<T>(value: T): T { return value }// 调用泛型函数const num = id<number>(10)const str = id<string>('a')实现了复用的同时保证了类型安全
泛型函数的调用可简化=>省略 <类型> 来简化泛型函数的调用，利用TS内部的类型参数推断
// 省略 <number> 调用函数let num = id(10)let str = id('a')当编译器无法推断类型或者推断的类型不准确时，就需要显式地传入类型参数
2.17 泛型约束
为什么需要泛型约束呢，举例一个场景：
function id<Type>(value: Type): Type {console.log(value.length)return value}id(2)此时，就需要为泛型添加约束来收缩类型 (缩窄类型取值范围)
添加泛型约束收缩类型，主要有以下两种方式：1 .指定更加具体的类型 2. 添加约束
function id<Type>(value: Type[]): Type[] {console.log(value.length)return value}将类型修改为 Type[] (Type 类型的数组)，只要是数组就一定存在 length 属性
添加约束// 创建一个接口interface ILength { length: number }// Type extends ILength 添加泛型约束// 解释：表示传入的类型必须满足 ILength 接口的要求才行，也就是得有一个 number 类型的 length 属性function id<Type extends ILength>(value: Type): Type {console.log(value.length)return value}此方法，传入的实参(比如，数组)只要有 length 属性即可
（类型兼容性) 2.18 泛型约束——多个类型变量
泛型的类型变量可以有多个，并且类型变量之间还可以约束(比如，第二个类型变量受第一个类型变量约束)
比如，创建一个函数来获取对象中属性的值：
function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {return obj[key]}let person = { name: 'jack', age: 18 }getProp(person, 'name')function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key){return obj[key]}2.19 泛型接口
泛型接口：接口也可以配合泛型来使用，以增加其灵活性，增强其复用性
interface IdFunc<Type> {id: (value: Type) => Typeids: () => Type[]}let obj: IdFunc<number> = {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}})// 使用ts的泛型指定props类型defineProps<{money: numbercar?: string}>()// 赋予默认值interface Props { value: boolean;}const props = withDefaults(defineProps<Props>(), { value: false });3.2 defineEmits 与 TypeScript
defineEmits配合运行时声明const emit = defineEmits(['change', 'update'])const emit = defineEmits<{(e: 'changeMoney', money: number): void(e: 'changeCar', car: string): void}>()3.3 ref 与 TypeScirpt
// 简单值 类型可忽略const money = ref<number>(10)const money = ref(10)// 复杂类型 推荐指定泛型type Todo = {id: numbername: stringdone: boolean}const list = ref<Todo[]>([])3.4 computed 与 TypeScript
const leftCount = computed<number>(() => {return list.value.filter((item) => item.done).length})3.5 事件处理 与 TypeScript
const move = (e: MouseEvent) => {mouse.value.x = e.pageXmouse.value.y = e.pageY}<h1 @mousemove="move($event)">根组件</h1>3.6 Template Ref 与 TypeScript
const imgRef = ref<HTMLImageElement | null>(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 文件: 既包含类型信息又可执行代码可以被编译为 .js 文件，然后执行代码用途：编写程序代码的地方 .d.ts 文件: 只包含类型信息的类型声明文件不会生成 .js 文件，仅用于提供类型信息,在.d.ts文件中不允许出现可执行的代码，只用于提供类型用途：为 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 第三方库类型声明文件
第三方库的类型声明文件有两种存在形式:
库自带类型声明文件
这种情况下，正常导入该库（举例axios=>查看 node_modules/axios 目录），TS 就会自动加载库自己的类型声明文件，以提供该库的类型声明。
由 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 文件提供该类型，实现类型共享。
操作步骤:
功能)。在需要使用共享类型的 .ts 文件中，通过 import 导入即可(.d.ts 后缀导入时，直接省略)。
自定义类型声明文件为js提供声明。
为已有js 文件提供类型声明
在将 JS 项目迁移到 TS 项目时，为了让已有的 .js 文件有类型声明。（整个项目从js升级到ts不太可能，工程太庞大了，但是可以为已有js文件添加类型声明，这样在ts中使用时，也有类型提示）成为库作者，创建库给其他人使用。3.8.4 类型声明文件的使用说明
TS 项目中也可以使用 .js 文件。在导入 .js 文件时，TS 会自动加载与 .js 同名的 .d.ts 文件，以提供类型声明。（如果 .js 文件和 .d.ts 文件在同一文件夹下，TypeScript 会自动关联它们。 如果将 .d.ts 文件放在不同的文件夹中，也可以通过配置 tsconfig.json 文件中的 typeRoots 或 paths 选项来实现。）declare 关键字:用于类型声明，为其他地方(比如，.js 文件)已存在的变量声明类型，而不是创建一个新的变量。 对于 type、interface 等这些明确就是 TS 类型的(只能在 TS 中使用的)，可以省略 declare 关键字。对于 let、function 等具有双重含义(在 JS、TS 中都能用)，应该使用 declare 关键字，明确指定此处用于类型声明。let count = 10let 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:numberdeclare let songName: stringinterface Position {x: number,y: number}declare let position: Positiondeclare function add (x :number, y: number) : numbertype Direction = 'left' | 'right' | 'top' | 'bottom'declare function changeDirection (direction: Direction): voidtype FomartPoint = (point: Position) => voiddeclare 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、非空断言和类型声明文件等内容。