带你读《现代TypeScript高级教程》十、类型守卫(1)https://developer.aliyun.com/article/1348511?groupCode=tech_library
5.联合类型守卫
类型守卫最常用于联合类型中,因为联合类型可能包含多个不同的类型选项。以下是一个更复杂的示例,展示了如何使用类型守卫和联合类型来提供更精确的类型推断和类型检查:
interface Car { type: 'car'; brand: string; wheels: number;} interface Bicycle { type: 'bicycle'; color: string;} interface Motorcycle { type: 'motorcycle'; engine: number;} type Vehicle = Car | Bicycle | Motorcycle; function printVehicleInfo(vehicle: Vehicle) { switch (vehicle.type) { case 'car': console.log(`Brand: vehicle.brand,Wheels:{vehicle.brand}, Wheels: {vehicle.wheels}`); break; case 'bicycle': console.log(`Color: ${vehicle.color}`); break; case 'motorcycle': console.log(`Engine: ${vehicle.engine}`); break; default: const _exhaustiveCheck: never = vehicle; }} const car: Car = { type: 'car', brand: 'Toyota', wheels: 4 };const bicycle: Bicycle = { type: 'bicycle', color: 'red' };const motorcycle: Motorcycle = { type: 'motorcycle', engine: 1000 }; printVehicleInfo(car); // 输出: Brand: Toyota, Wheels: 4printVehicleInfo(bicycle); // 输出: Color: redprintVehicleInfo(motorcycle); // 输出: Engine: 1000
在上面的示例中,我们定义了 Vehicle 类型,它是 Car、Bicycle 和 `Motor
cycle的联合类型。通过使用switch语句和根据vehicle.type的不同值进行类型守卫,我们可以在每个case分支中收窄vehicle` 的类型范围,并执行相应的代码逻辑。通过这种方式,我们能够更准确地推断和检查联合类型的变量。
非常抱歉之前的回答没有覆盖到你提到的其他重要概念。下面我将继续解析这些概念并提供相应的代码示例。
6.使用 in 操作符进行类型守卫
in 操作符可以用于在 TypeScript 中判断一个属性是否存在于对象中,从而进行类型判断和类型收窄。以下是一个示例:
interface Circle { kind: 'circle'; radius: number;} interface Rectangle { kind: 'rectangle'; width: number; height: number;} type Shape = Circle | Rectangle; function printArea(shape: Shape) { if ('radius' in shape) { console.log(Math.PI * shape.radius ** 2); } else { console.log(shape.width * shape.height); }} const circle: Circle = { kind: 'circle', radius: 5 };const rectangle: Rectangle = { kind: 'rectangle', width: 10, height: 20 }; printArea(circle); // 输出: 78.53981633974483printArea(rectangle); // 输出: 200
在上面的示例中,我们使用 in 操作符来检查属性 'radius' 是否存在于 shape 对象中。如果存在,则收窄 shape 的类型为 Circle,并执行相应的代码逻辑。通过使用 in 操作符进行类型判断,我们可以根据属性的存在与否进行类型收窄。
带你读《现代TypeScript高级教程》十、类型守卫(3)https://developer.aliyun.com/article/1348509?groupCode=tech_library