乐趣区

关于前端:TypeScript-的交叉类型联合类型和类型保护

jiezi

●这一章咱们来聊一下 TS 内的高级类型
●其实就是把一些根底的货色进行各种各样的组合, 一些绝对高级的用法
●在之前几章外面咱们也或多或少的提到过某些内容
●当初就来汇总专门说一下这个事件穿插类型 (Intersection Types)
●这个就和咱们运算符外面的 与 (&&) 是一样的, 既要 … 又要 … 还要 … O(∩_∩)O~●应用 & 作为穿插符号

一个小栗子 

// 对象接口 1
interface One {
  name: string
  age: number
}

// 对象接口 2
interface Two {
  gender: string
  classRoom: number
}

// 简略筹备一个函数
function combine(o1: One, o2: Two) {
  const result = {
      ...o1,
      ...o2
  }
  return result
}

○咱们看到, 一个简略的性能函数就是把两个对象合并到一个对象
○咱们给到参数进行了限度, 然而返回值咋办呢 ?
○这个时候就能够用到穿插类型了 

function combine(o1: One, o2: Two): One & Two {
  const result = {
      ...o1,
      ...o2
  }
  return result
}

○这样的话, 就是返回值既要满足 One 的接口要求, 也要满足 Two 的接口要求

○你看, 少了任何一个都不行○其实就是 与 的关系 O(∩_∩)O~ 联结类型（Union Types）
●这个就和咱们运算符外面的 或 (||) 是一样的, 哪一个都行 O(∩_∩)O~
●应用 | 作为联结符号
●很多时候, 咱们在定义一些内容的时候, 可能须要应用到多种都能够, 不论是类型, 包含字面量束缚也是一样的 

let foo: number | string = 100
foo = 'hello world'
foo = 200

○咱们给 foo 赋值为 number 类型或者 string 类型都是能够的
●字面量也是能够联结的

let color: 'yellow' | 'blue' | 'orange'

●这就是联结类型类型爱护 (Type Guards)
●先来看一个案例 

interface One {
  name: string
  sayHi(): void}
interface Two {
  name: string
  play(): void}

const user1: One = { 
    name: 'Jack', 
    sayHi: () => console.log('hello world') 
}
const user2: Two = { 
    name: 'Rose', 
    play: () => console.log('basketball')
}

function util(user: One | Two): void {console.log(user.name)
  user.sayHi()
  user.play()}

util(user1)
util(user2)

○咱们发现外面报错了○这是因为, 两个接口外面都有 name 属性, 所以调用 name 属性没问题○然而你得 user 不确定是 One 还是 Two 类型
■调用 sayHi 的活, 如果是 Two 类型就没有, 就会提醒谬误
■调用 play 的话, 如果是 One 类型就没有, 就会提醒谬误
○一旦联结当前, 咱们就只能拜访两个类型公共的数据
●可能有同学想到判断一下不就好了 

function util(user: One | Two): void {console.log(user.name)
  if (user.sayHi) {user.sayHi()
  } else {user.play()
  }

}

○仍旧是一个提醒谬误的状态
●这个时候就须要用到断言来对类型进行一次爱护 

function util(user: One | Two): void {console.log(user.name)
  if ((user as One).sayHi) {(user as One).sayHi()} else {(user as Two).play()}

}

○当我在拜访一些非公共属性的时候, 进行一下断言, 确定它肯定会有这个属性我才拜访○断言也有另外一种写法, 也是能够的 

function util(user: One | Two): void {console.log(user.name)
  if ((<One>user).sayHi) {(<One>user).sayHi()} else {(<Two>user).play()}

}

●这两种书写形式是一样的, 都是能够实现类型爱护自定义类型爱护
●通过方才的案例, 咱们发现能够解决问题, 然而很麻烦
●因为要不停的写一些断言来验证一下

●随着前面的应用, 用的越多, 须要写断言的中央就越多, 少一个都不行
●这个时候, 咱们就能够本人写一个类型验证函数, 作用就是专门用于查看类型
●先来定义一个类型验证函数 

function isOne(pet: One | Two): pet is One {return (<One>pet).sayHi !== undefined
}

●这里的返回值设置, pet is One 是 TS 的语法, 示意 pet 是不是 One 这个类型, 后果必然是一个布尔值, true 或者 false○留神 : 这里的 pet 必须是该函数的形参才能够哦
● 前面应用的时候, 间接应用 isOne 函数就能够了哦 

function util(user: One | Two): void {if (isOne(user)) {user.sayHi()
  } else {user.play()
  }
}
退出移动版