前言
TypeScript 是一种由微软开发的静态类型检查的 JavaScript 超集,它为 JavaScript 添加了类型注解,以提高代码的可读性和可维护性。在 TypeScript 中,除了原生的基本类型外,还可以使用类型别名、交叉类型和联合类型等高级类型,来帮助我们更好地定义和使用类型。
本文将深入介绍 TypeScript 中的类型别名、交叉类型和联合类型,并且通过实际的示例代码,帮助读者更好地理解这些概念。
类型别名
类型别名是一种给类型起别名的方式,它可以用于任何类型,包括基本类型、对象类型、函数类型等。使用类型别名可以让类型更加易读易懂,并且可以减少代码的重复性。
以下是一个使用类型别名的示例:
// www.javascriptcn.com code example
type User = {
name: string;
age: number;
email: string;
};
function sendEmail(user: User, message: string): void {
console.log(`send email to ${user.email}: ${message}`);
}在上面的代码中,我们使用 type 关键字定义了一个名为 User 的类型别名,它表示一个用户对象,包含了 name、age 和 email 三个属性。然后我们在 sendEmail 函数中使用了这个别名来定义 user 参数的类型,使得代码更加清晰易懂。
需要注意的是,类型别名只是一个别名,并不会创建新的类型。也就是说,User 和 { name: string; age: number; email: string; } 是完全等价的,它们只是两个不同的名称而已。
交叉类型
交叉类型可以将多个类型合并为一个类型,它表示一个对象同时拥有多个类型的属性和方法。使用交叉类型可以让我们更加灵活地组合和重用已有的类型。
以下是一个使用交叉类型的示例:
// www.javascriptcn.com code example
type Animal = {
name: string;
eat(food: string): void;
};
type Vehicle = {
speed: number;
move(): void;
};
type Transport = Animal & Vehicle;
function ride(transport: Transport): void {
console.log(`ride on ${transport.name} at speed ${transport.speed}`);
transport.move();
transport.eat('grass');
}在上面的代码中,我们使用 & 运算符将 Animal 和 Vehicle 两个类型合并为一个名为 Transport 的交叉类型。这个类型表示一个既有动物属性又有交通工具属性的对象。
然后我们定义了一个名为 ride 的函数,它接受一个 Transport 类型的参数,并且通过调用 move 和 eat 方法来模拟骑行过程。由于 Transport 类型是 Animal 和 Vehicle 两个类型的交叉类型,所以它必须同时具备这两个类型的属性和方法。
需要注意的是,交叉类型只能合并对象类型,而不能合并基本类型。如果尝试将两个基本类型合并为交叉类型,会得到一个 never 类型。
联合类型
联合类型可以将多个类型组合成一个类型,它表示一个对象可能属于多个类型中的任意一个。使用联合类型可以增强代码的灵活性和适应性。
以下是一个使用联合类型的示例:
// www.javascriptcn.com code example
type Shape = {
kind: 'circle';
radius: number;
} | {
kind: 'square';
side: number;
};
function area(shape: Shape): number {
switch (shape.kind) {
case 'circle':
return Math.PI * shape.radius ** 2;
case 'square':
return shape.side ** 2;
default:
throw new Error(`unknown shape: ${JSON.stringify(shape)}`);
}
}在上面的代码中,我们使用 | 运算符将两个类型组合成一个名为 Shape 的联合类型。这个类型表示一个对象可能是圆形或者正方形,同时必须具备 kind 属性和对应的属性值。
然后我们定义了一个名为 area 的函数,它接受一个 Shape 类型的参数,并且根据 kind 属性来计算不同形状的面积。由于 Shape 类型是圆形和正方形两个类型的联合类型,所以它可以接受任意一个符合要求的对象作为参数。
需要注意的是,联合类型只能使用共有的属性和方法,而不能使用非共有的属性和方法。如果尝试使用一个联合类型中不存在的属性或方法,会得到一个联合类型的交集类型。为了避免这种情况,可以使用类型保护来判断变量的具体类型。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67d150a7a941bf71342c579e