typeScript 高级类型

所谓高级类型，是typescript为了保证语言的灵活性，对类型进行一些操作。这些特性有助于我们应对复杂多变的开发场景

• 交叉类型
  交叉类型是将多个类型合并为一个类型。可以通过 & 来实现合并，生成的新类型包含了所需的所有类型的特性
  看下面这个例子:

   //   我有一个Person 接口, 还有一个 Action 接口, 现在需要一个接口同时有他们共有属性, 我要怎么操作呢?新的接口完全可以将前两个接口属性重新再描述一遍, 更高级的写法是使用交叉类型
   interface Person {
      name: string
      age: number
    }
   interface Action {
      coding():void
   }
   const staff: Person & Action = {
      name: 'xiaohong',
      age: 20,
      coding(){
        console.log('我 12 点还在写代码!!!!!!')
      }
    }
  // 
  

  以上需要注意的是, 如果两个接口存在同属性,但是类型不一致的话, 新的类型将无法赋值
• 联合类型
  联合类型可以通过管道将变量设置多种类型，赋值时可以根据设置的类型来赋值。也就是说联合类型的变量可以是指定的几种数据类型中的一种，我们可以通过竖线 | 来分隔不同的类型。

  // 想获取一个变量的长度, 这个变量可能是数组,也可能是字符串,我们就可以这样去写
  function getLen<T>(arg: string | T[]) {
    return arg.length
  }
  getLens('hello world')
  getLen<number>([1,2,3])
  

• 类型别名
  以上两种类型如果在多处使用的话, 会不会显得太麻烦, 类型别名就是为了将这种复杂的类型重新声明为一个新类型

// 交叉类型
type Staff = Person & Action
const staff: Staff = {
  name: 'xiaohong',
      age: 20,
      coding(){
        console.log('我 12 点还在写代码!!!!!!')
      }
}
// 联合类型
type mustLens = string | number[]
const getLens = function (arg: mustLens) {
  return arg.length
}
getLens('1111')

• 类型保护与区分类型
  联合守卫的作用在于触发类型缩小, 用来区分类型集合中不同成员

  const toUpperCase = (stringOrArray: string | string[]) => {
    if (typeof stringOrArray === 'string') {
      return stringOrArray.toUpperCase()
    } else {
      return stringOrArray.map(el => el.toUpperCase())
    }
  }
  

  如何区分类型
  • switch

  const convert = (c: 'a' | 1) => {
    switch (c) {
      case 1:
        return c.toFixed(); // c is I
      case 'a':
        return c.toLowerCase(); // c is 'a'
     } 
  }
  

  • typeof
    同 javascript 必须是 "number"， "string"， "boolean"或 "symbol"
  • instanceof
    instanceof的右侧要求是一个构造函数