带你读《现代TypeScript高级教程》十、类型守卫(3)

简介: 带你读《现代TypeScript高级教程》十、类型守卫(3)

带你读《现代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 的类型范围。

相关文章
|
4月前
|
JavaScript 前端开发
揭秘 TypeScript 条件类型:超越简单类型检查
揭秘 TypeScript 条件类型:超越简单类型检查
|
4月前
|
JavaScript 安全 索引
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
TypeScript 高级类型工具:Partial, Required, Record 的妙用与陷阱
|
4月前
|
JavaScript 安全 IDE
TypeScript 类型体操:别让 `any` 毁了你的安全网!
TypeScript 类型体操:别让 `any` 毁了你的安全网!
|
4月前
|
JavaScript 安全 编译器
TypeScript 类型守卫:让你的类型系统更智能
TypeScript 类型守卫:让你的类型系统更智能
|
9月前
|
存储 安全 JavaScript
TypeScript-内置应用程序类型-Recode
通过使用 `Record` 类型,开发者可以显著提升代码的安全性和可维护性。无论是配置对象、字典结构还是动态表单,`Record` 类型都提供了一个简洁、类型安全的解决方案。
377 82
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
278 0
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
159 0
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
283 106
|
12月前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
311 6

热门文章

最新文章

下一篇
开通oss服务