带你读《现代TypeScript高级教程》十、类型守卫(2)https://developer.aliyun.com/article/1348510?groupCode=tech_library
7.控制流类型守卫
在 TypeScript 中,当执行特定的操作后,编译器会智能地调整变量的类型范围,这被称为控制流类型收窄。以下是一些常见的控制流类型收窄情况:
if 语句的条件判断
function printValue(value: string | number) { if (typeof value === 'string') { console.log(value.toUpperCase()); } else { console.log(value.toFixed(2)); }}
在上面的示例中,当执行 typeof value === 'string' 的条件判断时,TypeScript 编译器会收窄 value 的类型为 string,从而在代码块内部提供相应的智能提示和类型检查。
switch 语句的 case 判断
type Fruit = 'apple' | 'banana' | 'orange'; function getFruitColor(fruit: Fruit) { let color: string; switch (fruit) { case 'apple': color = 'red'; break; case 'banana': color = 'yellow'; break; default: color = 'orange'; } console.log(`The color of fruitis{fruit} is {color}`);}
在上面的示例中,根据 switch 语句中的 case 判断,TypeScript 编译器会智能地收窄 color 的类型为相应的颜色字符串。
真值类型守卫
真值收窄是一种在条件表达式中进行类型收窄的机制。当条件表达式的结果是真值时,TypeScript 编译器会将变量的类型范围缩小为 true 的类型。以下是一个示例:
function processValue(value: string | null) { if (value) { console.log(value.toUpperCase()); } else { console.log('Value is null or empty'); }}
在上面的示例中,当条件表达式 value 的结果是真值(即不为 null 或空字符串)时,TypeScript 编译器会将 value 的类型范围缩小为 string。
8.自定义类型判断式(Type Predicates)守卫
TypeScript 提供了自定义类型判断式的功能,它允许我们定义自己的谓词函数来进行类型判断和类型收窄。以下是一个示例:
interface Bird { fly(): void;} interface Fish { swim(): void;} function isBird(animal: Bird | Fish): animal is Bird { return (animal as Bird).fly !== undefined;} function processAnimal(animal: Bird | Fish) { if (isBird(animal)) { animal.fly(); } else { animal.swim(); }}
在上面的示例中,我们定义了 isBird 谓词函数来判断参数 animal 是否属于 Bird 类型。在 processAnimal 函数中,通过使用自定义谓词函数 isBird,我们能够根据 animal 的具体类型执行相应的代码逻辑,并在代码块内部收窄 animal 的类型范围。