Bootstrap

Typescript 练习

1. 类型谓词

格式:类型谓词采用parameterName is Type格式,其中parameterName必须是当前函数的参数

interface Iuser {
  type: 'user'
  name: string
  age: number
  occupation: string
}

interface Iadmin {
  type: 'admin'
  name: string
  age: number
  role: string
}

export type Person = Iuser | Iadmin

export const person: Person[] = [
  { type: 'user', name: 'Max Mustermann', age: 25, occupation: 'Chimney sweep' },
  { type: 'admin', name: 'Jane Doe', age: 32, role: 'Administrator' },
  { type: 'user', name: 'Kate Müller', age: 23, occupation: 'Astronaut' },
  { type: 'admin', name: 'Bruce Willis', age: 64, role: 'World saver' },
]

// 类型谓词
const isAdmin = (person: Person): person is Iadmin => {
  return person.type === 'admin'
}

// 类型谓词
const isUser = (person: Person): person is Iuser => {
  return person.type === 'user'
}

export const logPerson = (person: Person) => {
  let test: string = ''
  if (isAdmin(person)) {
    test = person.role
  }
  if (isUser(person)) {
    test = person.occupation
  }
  console.log('test:', test)
}

核心代码:

const isAdmin = (person: Person): person is Iadmin => {
  return person.type === 'admin'
}

const isUser = (person: Person): person is Iuser => {
  return person.type === 'user'
}

如果不使用类型收缩的话,会提示类型不存在

使用场景:在接口返回数据中,有两个不同的字段需要展示在table上时,前端做类型接收,使用interface定义两个接口,在处理数据时,判断当前的数据内容符合哪一个interface进行赋值,使用is进行类型收缩。

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;