| TypeScript（五）类型别名及类型符号 | 您所在的位置：网站首页 › 车祸碾压人图片真实高清图下载 › TypeScript（五）类型别名及类型符号 |
|
目录 引言 类型别名 基本用法 字面量类型 数字字面量 字符串字面量 布尔字面量 空字面量 枚举字面量 类型符号 联合类型 交叉类型 类型断言 尖括号 as关键字 非空断言 获取变量类型 获取键名类型 属性检查 type or interface? 二者的区别： 应用场景 总结 参考文章 引言在编写JS代码时，我们通常使用const、var、let来定义一个变量，进行变量的运算或者逻辑编写等。在TS中也有一种类似变量的写法那就是类型别名，与运算逻辑相对应的便是类型符号 类型别名在前面的文章中，我们介绍了TypeScript中常用的类型，然而在实际项目开发中，不可避免的会遇到各种复杂类型，有些可以使用接口或对象类型来描述，但是有些数据类型更灵活、复杂，那么此时，类型别名是一种非常有用的工具，它可以帮助我们简化代码，提高代码的可读性和可维护性； 基本用法类型别名使用 type 类型名 = 类型值 的方式来定义，如 interface IFn { (): void } interface IDog { name: string age?: number [key: string]: unknown } type myStr = string// 字符串 type myNum = number// 数字 type myArr = string[]// 数组 type myFn = IFn// 函数 type myDog = IDog// 接口 type myObj = { str: string num: number arr: myArr }// 对象 const str: myStr = "string" const num: myNum = 10 const arr: myArr = ['a', 'b'] const fn: myFn = () => null const dog: myDog = { name: "阿黄" } const obj: myObj = { str: "string", num: 11, arr: arr } 字面量类型字面量类型（Literal Types）用来表示具体的字面量值，包括字符串、数字、布尔值等。它们可以作为类型注解的一部分，用来限制变量、函数参数、函数返回值等的取值范围 数字字面量数字字面量类型（Numeric Literal Types）是一种用来表示具体数字值的类型，它使用一个具体的数字来定义一个类型 type Num = 10 const num: Num = 10 const num2: Num = 20 // 抛错，不能将20赋值给类型10 字符串字面量字符串字面量类型（String Literal Types）：用来表示一个具体的字符串值的类型。 type Str = "a" const num: Str = "a" 布尔字面量布尔字面量类型（Boolean Literal Types）：用来表示一个具体的布尔值的类型。 type Bool = false const bool: Bool = false 空字面量空字面量类型（Empty Literal Types）：用来表示一个空值的类型，被定义的类型只能被赋值为undefined或null type Void = void; const isNull: Void = null const isUndefined: Void = undefined const isVoid: Void = void 0 枚举字面量枚举字面量类型（Enum Literal Types）：用来表示一个具体的枚举值的类型 enum Color { Red = 1, Green, Blue } type colorBlue = Color.Blue const blue: colorBlue = 3 类型符号如果说类型别名是一个人，那么类型符号就是它的灵魂。在TypeScript中，类型符号是构建类型系统的基础，是实现类型别名的核心。 联合类型联合类型（Union Types）用来表示一个变量可以包含多种类型之一的情况。联合类型使用或符号 | 来连接两个或多个类型，例如： let strOrNum: string | number = 10 strOrNum = "a"我们使用上面讲到的类型别名试试 type strOrNum = string | number const str: strOrNum = "a" const num: strOrNum = 10 交叉类型交叉类型（Intersection Types）可以用来将多个类型合并为一个类型。交叉类型使用且符号&进行连接两个或多个类型；值得注意的是交叉类型一般使用于对象定义这种复杂的数据类型，如果使用交叉类型定义基础类型，则会转换为never类型，因为一个类型不可能同时兼备两种基础类型，如 type str = string type num = number type StrAndNum = str & num // never类型上面代码中number和string是互斥的类型，不存在既是number又是string的值，然而程序不会逻辑报错，因为number和string会包装成对象类型 下面是一个交叉类型的案例 type Animal = { name: string age?: number } type Dog = { readonly color: string getColor(): string } type WhiteDog = Animal & Dog const whiteDog: WhiteDog = { name: "阿黄", color: "white", getColor() { return this.color }, }tips：交叉类型和接口继承有点类似，如果对象同时存在同名不同类型的属性时会抛错 类型断言类型断言（Type Assertion）是一种显式地告诉编译器变量的类型的方式，它允许我们手动指定一个变量的类型，从而绕过TypeScript编译器对该变量类型的检查。 断言的使用方式有两种，分别是尖括号和as关键字 尖括号 let str: unknown const len: number = (str).length在上面的代码中，我们使用断言的方式将str转换为字符串类型，并获取字符串的长度 as关键字 let str: unknown const len: number = (str as string).length与尖括号一样，在变量的后面增加 as 类型 使用类型断言 非空断言在JS中，我们通常使用可选链操作符（ .? ）来判断一个对象是否为空，来增加代码健壮性 在TS中，我们可以使用非空断言（Non-null Assertion）来告诉编译器变量或表达式一定不为空 在下面代码中，str可能是null或者字符串类型，若直接使用str.length会提示：对象可能为"null" const str: string | null = null const len: number = str.lengthtips：上述代码没抛错可能因为在tsconfig中未开启strictNullChecks 此时我们可以通过 ! 非空断言或 ? 可选链操作符以及 ?? 空值合并操作符告诉编译器str不为null或处理变量为空的异常 let str: string | null = null if (window) { str = "abc" } const len: number = str!.length const len2: number = str?.length ?? 10 获取变量类型TypeScript的typeof和JavaScript的typeof在语法上是相同的，但是在行为上有区别。在TS中typeof可以获取变量的类型，如 let num = 10 let str = 'abc' type myStr = typeof str type myNum = typeof num const str1: myStr = "bcd" const num1: myNum = 20 获取键名类型在TS中我们可以使用keyof关键字来获取一个对象类型或接口的类型的所有键的联合类型。 interface IDog { name: string color: string age: number } type IDogKeys = keyof IDog // 相当于 'name' | 'color' | 'age' const dogAge: IDogKeys = "age" const dogColor: IDogKeys = "color" const dogName: IDogKeys = "name"上述代码的IDogKeys相当于获取了IDog的所有键的联合类型，使用类型别名描述对象的方式同样可以达到效果 type IDog = { name: string color: string age: number } type IDogKeys = keyof IDog // 相当于 'name' | 'color' | 'age' const dogAge: IDogKeys = "age" const dogColor: IDogKeys = "color" const dogName: IDogKeys = "name" 属性检查in运算符在TypeScript和JavaScript中都存在，并且用法基本相同，用来检查某个属性是否存在于某个对象或其原型链中 interface IDog { name: string color?: string } const dog: IDog = { name: "阿黄" } console.log('name' in dog);// true console.log('color' in dog);// false type or interface?Type和Interface都是用于定义类型的关键字，那么其二者分别适用什么场景？ 二者的区别： Type可以声明基本类型、联合类型、元组、枚举、函数等，而Interface主要用于定义对象、类、函数等复杂类型 Type是类型别名的作用，不能被扩展，而Interface可以被继承 Type可以使用联合类型，交叉类型等高级类型进行操作，而Interface不支持 应用场景Type：定义一个基本类型、联合类型、元组、枚举等类型，或需要使用高级类型操作的类型 Interface：定义对象、类等复杂类型，或使用对类型扩展，继承等操作时接口更适用 tips：使用type定义的对象类型同样可以被类实现 type IAnimel = { name: string getName(): string } class Animal implements IAnimel { name = 'dog' getName() { return this.name } } 总结本文从类型别名和类型符号两个模块；介绍了类型别名的使用及字面量类型，并且从联合类型，交叉类型等高级类型操作的方面将类型别名的应用场景连接起来，最后将类型别名对比接口介绍了二者的使用场景 感谢你看到了最后，有任何问题可以在评论区讨论，如果文章对你有帮助，还望多多支持一下！ 参考文章高级类型 - TypeScript 中文手册 |
| CopyRight 2018-2019 实验室设备网 版权所有 |