阅读量:0
文章目录
前言
学习一门语言之前，我们首先肯定要知道我们为什么而学？
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<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) => 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 种常见场景:
- 声明变量并初始化时
- 决定函数返回值时
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') - 解释：参数 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 类型的情况
- 声明变量不提供类型也不提供默认值
- 函数参数不加类型
注意：因为不推荐使用 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 = <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) - Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length
此时，就需要为泛型添加约束来收缩类型 (缩窄类型取值范围)
添加泛型约束收缩类型，主要有以下两种方式：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 } - 创建描述约束的接口 ILength，该接口要求提供 length 属性
- 通过 extends 关键字使用该接口，为泛型(类型变量)添加约束
- 该约束表示：传入的类型必须具有 length 属性
此方法，传入的实参(比如，数组)只要有 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') - 两个类型变量之间的使用，用逗号分隔。
- keyof 关键字接收一个对象类型，生成其键名称(可能是字符串或数字)的联合类型。
- 本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型，也就是： ‘name’ | ‘age’
- 类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性
function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key) { return obj[key] } 2.19 泛型接口
泛型接口：接口也可以配合泛型来使用，以增加其灵活性，增强其复用性
interface IdFunc<Type> { id: (value: Type) => Type ids: () => 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 } }) - defineProps配合ts的泛型，定义props类型校验
// 使用ts的泛型指定props类型 defineProps<{ money: number car?: string }>() // 赋予默认值 interface Props { value: boolean; } const props = withDefaults(defineProps<Props>(), { 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<number>(10) const money = ref(10) // 复杂类型 推荐指定泛型 type Todo = { id: number name: string done: 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.pageX mouse.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 文件提供该类型，实现类型共享。
操作步骤:
- 创建 index.d.ts 类型声明文件。
- 创建需要共享的类型，并使用 export 导出(TS 中的类型也可以使用 import/export 实现模块化
功能)。 - 在需要使用共享类型的 .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 = 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、非空断言和类型声明文件等内容。
