TypeScript中类型守卫Type Guard的介绍和使用

本文介绍了TypeScript中的类型守卫,包括空值校验、typeof、instanceof操作符以及自定义Type Guard的使用。重点讨论了自定义Type Guard在处理未知外部数据时的重要性,并通过实例展示了如何确保类型安全。同时,文章还探讨了在处理数组时,如何利用Type Guard避免类型错误,确保正确获取所需类型的数据。
摘要由CSDN通过智能技术生成

Type Guard不是一种类型,而是一种能够确认具体类型的一种机制,如针对union类型经常设置一个type字段来作为当前类型的唯一标识,从而在使用时能够正确识别:

type Contact = { type: 'email'; email: string; } | { type: 'phone'; phone: string; }

function saveContact(contact: Contact) {
  if (contact.type === 'email') {
    // 这里能够确定类型是 { type: 'email'; email: string; },能够访问contact.email
  } else {
    // 这里能够确定类型是 { type: 'phone'; phone: string; },能够访问contact.phone
  }
}

在开发过程中,我们可能都不自觉地使用了下面的一些方式来确定当前访问数据的类型,其实它们也是Type Guard

空值校验

function hello(name?: string) {
  if (name) {
    // 这里能确定name是string类型
    console.log(`Hello, ${name.toUpperCase()}`)
  } else {
    console.log('Hello')
  }
}

typeof

使用typeof也能确定类型,不过只能用于js的基本数据类型(null除外),而不能用于interfacetype定义的类型,因为在运行时这些类型就不在了:

function setValue(value: number | string) {
  if (typeof value === 'number') {
    return value.toFixed(2)
  } else {
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值