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

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 {

你可能感兴趣的:(JavaScript,typescript,interface,axios,安全,类型)