阅读须知:本文示例的运行环境是 TypeScript 官网的 Playground,对应的编译器版本是 v3.8.3。
TypeScript 可辨识联合(Discriminated Unions)类型,也称为代数数据类型或标签联合类型。它包含 3 个要点:可辨识、联合类型和类型守卫。
这种类型的本质是结合联合类型和字面量类型的一种类型保护方法。如果一个类型是多个类型的联合类型,且多个类型含有一个公共属性,那么就可以利用这个公共属性,来创建不同的类型保护区块。
一、可辨识
可辨识要求联合类型中的每个元素都含有一个单例类型属性,比如:
enum CarTransmission {
Automatic = 200,
Manual = 300
}
interface Motorcycle {
vType: "motorcycle"; // discriminant
make: number; // year
}
interface Car {
vType: "car"; // discriminant
transmission: CarTransmission
}
interface Truck {
vType: "truck"; // discriminant
capacity: number; // in tons
}
在上述代码中,我们分别定义了 Motorcycle
、 Car
和 Truck
三个接口,在这些接口中都包含一个 vType
属性,该属性被称为可辨识的属性,而其它的属性只跟特性的接口相关。
二、联合类型
基于前面定义了三个接口,我们可以创建一个 Vehicle
联合类型:
type Vehicle = Motorcycle | Car | Truck;
现在我们就可以开始使用 Vehicle
联合类型,对于 Vehicle
类型的变量,它可以表示不同类型的车辆。
三、类型守卫
下面我们来定义一个 evaluatePrice
方法,该方法用于根据车辆的类型、容量和评估因子来计算价格,具体实现如下:
const EVALUATION_FACTOR = Math.PI;
function evaluatePrice(vehicle: Vehicle) {
return vehicle.capacity * EVALUATION_FACTOR;
}
const myTruck: Truck = { vType: "truck", capacity: 9.5 };
evaluatePrice(myTruck);
对于以上代码,TypeScript 编译器将会提示以下错误信息:
Property 'capacity' does not exist on type 'Vehicle'.
Property 'capacity' does not exist on type 'Motorcycle'.
原因是在 Motorcycle 接口中,并不存在 capacity
属性,而对于 Car 接口来说,它也不存在 capacity
属性。那么,现在我们应该如何解决以上问题呢?这时,我们可以使用类型守卫。下面我们来重构一下前面定义的 evaluatePrice
方法,重构后的代码如下:
function evaluatePrice(vehicle: Vehicle) {
switch(vehicle.vType) {
case "car":
return vehicle.transmission * EVALUATION_FACTOR;
case "truck":
return vehicle.capacity * EVALUATION_FACTOR;
case "motorcycle":
return vehicle.make * EVALUATION_FACTOR;
}
}
在以上代码中,我们使用 switch
和 case
运算符来实现类型守卫,从而确保在 evaluatePrice
方法中,我们可以安全地访问 vehicle
对象中的所包含的属性,来正确的计算该车辆类型所对应的价格。
四、穷举检查
假设我们想要往前面已经定义的 Vehicle
联合类型,添加新的类型,那么会出现什么问题呢?下面我们来实际验证一下。首先我们先新增一个新的 Bicycle
接口,接着继续更新 Vehicle
联合类型的定义,具体代码如下:
interface Bicycle {
vType: "bicycle";
make: number;
}
type Vehicle = Motorcycle | Car | Truck | Bicycle;
更新完以上代码之后,TypeScript 编译器会提示以下的错误信息:
Not all code paths return a value.
为什么会提示这个错误信息呢?原因是因为我们之前创建的 evaluatePrice
方法还没处理 Bicycle
类型。那好,我们再来更新一下 evaluatePrice
方法,即增加对新增 Bicycle
类型的处理逻辑:
function evaluatePrice(vehicle: Vehicle) {
switch(vehicle.vType) {
case "car":
return vehicle.transmission * EVALUATION_FACTOR;
case "truck":
return vehicle.capacity * EVALUATION_FACTOR;
case "motorcycle":
return vehicle.make * EVALUATION_FACTOR;
case "bicycle":
return vehicle.make * EVALUATION_FACTOR;
}
}
虽然现在问题已经解决了,但如果以后还要新增新的车辆类型呢?针对这个问题,有没有更好的解决方案呢?答案是有的,可以利用 TypeScript 中的 never 类型,具体代码如下:
function evaluatePrice(vehicle: Vehicle) {
switch(vehicle.vType) {
case "car":
return vehicle.transmission * EVALUATION_FACTOR;
case "truck":
return vehicle.capacity * EVALUATION_FACTOR;
case "motorcycle":
return vehicle.make * EVALUATION_FACTOR;
case "bicycle":
return vehicle.make * EVALUATION_FACTOR;
default:
const invalidVehicle: never = vehicle;
throw new Error(`Unknown vehicle: ${invalidVehicle}`);
}
}
在上面代码中,我们新增了默认的处理分支,在该分支中,我们把收窄为 never 类型的 vehicle 变量赋值给同为 never 类型的 invalidVehicle 变量,这样有什么好处呢?现在我们来把前面新增的 Bicycle
类型的处理逻辑注释掉,这时 TypeScript 编译器也会提示错误信息,但此时的错误信息是这样的:
Type 'Bicycle' is not assignable to type 'never'.
相比之前的错误信息,是不是更加直观了。在 evaluatePrice
方法中,我们新增了默认的处理分支,穷举了所有可能的车辆类型。此外我们还引入了 never 类型避免出现新增了联合类型没有对应的实现,目的就是写出类型绝对安全的代码。
五、参考资源
Zhihu - 如何评价 TypeScript 最新加入的 Discriminated union type?
understanding-discriminated-unions-in-typescript
▼
往期精彩回顾
▼
回复“加群”与大佬们一起交流学习~
点这,与大家一起分享本文吧~