告别 any!用联合类型打造更灵活、更安全的 TS 代码

一、什么是联合类型?

联合类型使用竖线 | 作为分隔符,表示一个值可以是列出的类型中的任意一种。

typescript 复制代码
// ID 只接收数字或字符串作为参数
function printId(id: number | string) {
      console.log("Your ID is: " + id);
}

printId(101);       // OK
printId("202");     // OK
printId({ id: 303 }); // 类型"{ id: number; }"的参数不能赋给类型"string | number"的参数。

二、使用类型守卫收窄类型(断言类型)

1. typeof 类型守卫

typeof 是最常见的类型守卫,一般处理 string, number, boolean, symbol, bigint, undefined, function 这些基础类型时使用。

typescript 复制代码
function printId(id: number | string) {
    if (typeof id === 'string') {
        // 在这个代码块内,TypeScript 知道 id 的类型是 string
        console.log(id.toUpperCase());
    } else {
        // 在这个代码块内,TypeScript 知 id 的类型是 number
        console.log(id);
    }
}

printId('good');
printId(10);

2. instanceof 类型守卫

当处理类的实例时,使用instanceof 判断类型

typescript 复制代码
class User {
  constructor(public name: string) {
    this.name =  name;
   }
}

class Product {
  constructor(public title: string) { 
    this.title = title;
  }
}

function printEntity(entity: User | Product) {
  if (entity instanceof User) {
    // entity 被收窄为 User 类型
    console.log("User: " + entity.name);
  } else {
    // entity 被收窄为 Product 类型
    console.log("Product: " + entity.title);
  }
}

let user = new User('john')
printEntity(user)
let product = new Product('title')
printEntity(product)

3. in 操作符守卫

在判断对象的属性时,常常使用in

typescript 复制代码
interface Fish {
  swim: () => void;
}

interface Bird {
  fly: () => void;
}

function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    // animal 被收窄为 Fish 类型
    return animal.swim();
  }
  // animal 被收窄为 Bird 类型
  return animal.fly();
}

let fish = {
  swim:()=>{
    console.log('fish is swim');
  }
}

let bird = {
  fly:()=>{
    console.log('bird fly');
  }
}

move(fish);
move(bird);

总结

如果你喜欢本教程,记得点赞+收藏!关注我获取更多TypeScript开发干货

相关推荐
上单带刀不带妹9 分钟前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风13 分钟前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱19 分钟前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年20 分钟前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵30 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_34 分钟前
分片上传-
前端·javascript·状态模式
东北南西38 分钟前
手写React状态hook
前端·javascript·react.js
诗书画唱39 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf40 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
代码青铜41 分钟前
【实战指南】Cursor前端+Zion后端:10分钟打造能收款的AI商业应用MVP
前端·人工智能