在编写 TypeScript 代码时，我们常常需要定义一些复杂的类型，这些类型可能是由多个基本类型组合而成，或者是由其他类型经过某些加工得到的。在 TypeScript 中，我们可以使用类型别名来定义这些类型。
ES11 标准中引入了类型别名的概念，可以使开发者更加方便地管理和复用类型定义。本文将介绍 ES11 类型别名的相关知识，包括类型别名的基本用法、高级用法以及一些实用技巧。
基本用法
类型别名的基本语法如下：
type TypeName = Type;
其中，TypeName 是自定义的类型名称，Type 是需要定义的类型。例如，我们可以使用类型别名定义一个 Person 类型：
type Person = { name: string; age: number; };
此时，我们可以将 Person 类型用于变量、函数参数、函数返回值等多个场景：
-- -------------------- ---- ------- -- ---- --- ------- ------ - - ----- ----- ---- -- -- -- ---- -------- ------------------- ------- - -------------------------------------------------- - -- --------------- -------- ------------------ ------- ---- -------- ------ - ------ - ----- --- -- -展开代码
通过使用类型别名，我们可以避免在多个地方重复定义相同的类型，提高代码的可维护性和可读性。
高级用法
除了基本用法外，类型别名还支持一些高级用法，包括联合类型、交叉类型、泛型等。
联合类型
联合类型可以通过 | 运算符将多个类型合并成一个类型。例如，我们可以定义一个 Name 类型，表示一个人的姓名可以是字符串或者数组：
type Name = string | string[];
此时，Name 类型可以表示以下两种情况：
let name1: Name = '张三'; // 字符串 let name2: Name = ['张', '三']; // 字符串数组
在编写复杂类型时，联合类型可以帮助我们减少重复定义类型的工作量。
交叉类型
交叉类型可以通过 & 运算符将多个类型合并成一个类型。例如，我们可以定义一个 PersonWithGender 类型，表示一个人的基本信息与性别：
type PersonBase = { name: string; age: number; }; type PersonWithGender = PersonBase & { gender: 'male' | 'female'; };
此时，PersonWithGender 类型包含 PersonBase 和额外的 gender 属性：
let person: PersonWithGender = { name: '张三', age: 18, gender: 'male' };
交叉类型可以对不同的类型进行组合，帮助我们定义更加复杂的类型。
泛型
泛型可以将类型作为参数进行传递，帮助我们定义更加通用的类型。例如，我们可以定义一个泛型类型 Prop<T>，表示一个对象的属性为字符串类型，值为 T 类型。
type Props<T> = { [key: string]: T; };
此时，我们可以定义一个 Person 类型，其中 age 是数值类型，其余属性都是字符串类型：
type Person = { name: string; age: number; address: string; phone: string; }; type PersonProps = Props<string>; // Person 的属性名为字符串，属性值为字符串
同时，泛型还可以用于定义函数类型。例如，我们可以定义一个泛型函数 toPair<T>，将输入的数值类型转换为字符串类型对：
function toPair<T>(n1: T, n2: T): [string, string] { return [n1.toString(), n2.toString()]; } let pair = toPair(1, 2); // ['1', '2']
泛型在定义通用的类型、函数时非常有用，能够大大提高代码的复用性和可扩展性。
实用技巧
在使用类型别名时，还有一些实用技巧可以帮助我们更好地管理和复用类型定义。下面介绍一下这些技巧。
类型交叉和类型联合的区别
类型交叉和类型联合虽然看起来很相似，但其实有一个非常重要的区别：类型交叉表示两个类型的并集，而类型联合表示两个类型的交集。
例如，我们有两个类型 A 和 B，分别包含属性 x 和 y：
-- -------------------- ---- ------- ---- - - - -- ------- -- ------- -- ---- - - - -- ------- -- -------- --展开代码
此时，通过联合类型可以组合出一个类型 C，包含 A 和 B 中的所有属性：
type C = A | B; // { x: number, y: string } | { y: number, z: boolean }
而通过交叉类型可以组合出一个类型 D，包含 A 和 B 中的所有属性和方法：
type D = A & B; // { x: number, y: number } & { y: string, z: boolean }
因此，在使用交叉类型和联合类型时需要格外注意其含义，避免出现错误的类型定义。
使用类型别名组织类型
当我们的项目中存在大量类型定义时，可以考虑使用类型别名来组织类型定义，以便于后续的维护和复用。例如，我们可以定义一个 Types 类型，包含项目中的所有类型定义：
-- -------------------- ---- ------- ---- ------ - - ----- ------- ---- ------- -- ---- ----- - - -- ------- -- ------- -- ---- ----- - - ------- ------- ------ ------ --展开代码
此时，我们可以通过 Types.Person 和 Types.Point 来访问对应的类型定义。
使用类型别名组织类型有助于我们快速地查找和编辑类型定义，提高代码的可维护性。
组合类型别名
当我们的类型定义非常复杂时，可以考虑使用多个类型别名结合起来定义一个更加复杂的类型。例如，我们可以通过组合多个类型别名定义一个 Coordinate 类型，表示一个点在三维坐标系中的坐标：
-- -------------------- ---- ------- ---- ------ - - -- ------- -- ---- ------ - - -- ------- -- ---- ------ - - -- ------- -- ---- ---------- - ------ - ------ - ------- --- ------ ---------- - - -- -- -- -- -- - --展开代码
此时，Coordinate 类型包含 CoordX、CoordY、CoordZ 中的所有属性。
使用组合类型别名可以使类型定义更加清晰明了，方便阅读和维护。
结语
ES11 类型别名是 TypeScript 中非常重要的概念，可以帮助我们定义和管理复杂的类型。本文介绍了类型别名的基本用法、高级用法以及一些实用技巧，希望能对大家加深对 TypeScript 的理解和掌握帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ceb43fe46428fe9e947f9b
