美文网首页
05-TypeScript-交叉类型-联合类型-类型保护

05-TypeScript-交叉类型-联合类型-类型保护

作者: 低头看云 | 来源:发表于2020-10-03 08:13 被阅读0次

交叉类型

  • 格式: type1 & type2 & ...
  • 交叉类型是将多个类型合并为一个类型
    let mergeFn = <T, U>(arg1: T, arg2: U): T & U => {
    let res = {} as T & U
    res = Object.assign(arg1, arg2)
    return res
     }

  let res = mergeFn({ name: 'cs' }, { age: 11 })
  console.log('res', res)

联合类型

  • 格式: type1 | type2 | ...
  • 联合类型是多个类型中的任意一个类型
  // 联合类型
  let value: string | number
  value = 'abc'
  value = 123
}

类型保护

  • 对于联合类型的变量,在使用时如何确切告诉编译器他是哪一种类型
  • 主要有类型断言和类型保护
 
  let getRandomValue = (): string | number => {
    let num = Math.random()
    return num >= 0.5 ? 'abc' : 123.3
  }
  // 无法得知res1返回值类型
  let res1 = getRandomValue()
  console.log('res1', res1)
  • 方式一
  • 虽然类型断言可以确切告诉编译器当前的变量是什么类型
  • 但是每一次使用的时候都需要手动告诉编译器, 这样比较麻烦
  if ((res1 as string).length) {
    console.log((res1 as string).length)
  } else {
    console.log((res1 as number).toFixed())
  }
  • 方式二
  • 定义一个类型保护函数, 这个函数的返回类型是布尔类型
  • 这个函数的返回值是, 传入的参数 + is 具体类型

  function isString(value: string | number): value is string {
    return typeof value === 'string'
  }
  if (isString(res1)) {
    console.log((res1 as string).length)
  } else {
    console.log((res1 as number).toFixed())
  }

  • 方式三
  • 使用 typeof 来实现类型保护
  • 如果使用 typeof 来实现类型保护, 那么只能使用 === 或者 !==
  • 如果使用typeof 来是实现类型保护, 那么只能保护 number/ string/ boolean/ symbol类型
  if (typeof res1 === 'string') {
    console.log((res1 as string).length)
  } else {
    console.log((res1 as number).toFixed())
  }

  • 可以通过typeof来是来实现类型保护以外, 我们可以使用 instance
  class Person {
    name: string = 'css'
  }

  class Animal {
    age: number = 12
  }

  let getRandomObject = (): Person | Animal => {
    let num = Math.random()
    return num >= 0.5 ? new Person() : new Animal()
  }

  let obj = getRandomObject()
  console.log('obj', obj)
  if (obj instanceof Person) {
    console.log(obj.name)
  } else {
    console.log(obj.age)
  }
}

相关文章

  • 05-TypeScript-交叉类型-联合类型-类型保护

    交叉类型 格式: type1 & type2 & ... 交叉类型是将多个类型合并为一个类型 联合类型 格式: ...

  • TypeScript 08 - 高级类型

    交叉类型 联合类型 类型保护 可以为 null 的类型 字符串字面量类型 1. 交叉类型 交叉类型是将多个类型合并...

  • 03|typescript高级用法

    一、交叉类型 交叉类型取所有类型的并集 二、联合类型 声明的类型不确定,是多个类型中的一个联合类型取所有类型的交集...

  • TypeScript06(类型断言 | 联合类型 | 交叉类型)

    联合类型 函数使用联合类型 交叉类型 多种类型的集合,联合对象将具有所联合类型的所有成员 类型断言 语法:值 as...

  • 泛型扩展

    基础必备知识 联合类型vs交叉类型 联合类型使用 “|”表示或的关系, 满足其中的一个情况即可。 交叉类型使用“&...

  • typescript入门-高级类型

    交叉类型 联合类型 联合类型表示一个值可以是几种类型之一 只能访问此联合类型的所有类型里共有的成员 类型区分 通过...

  • 高级TypeScript

    1、联合类型和类型保护 联合类型:一个变量可能有两种或两种以上的类型。 类型保护:联合类型的具体实例需...

  • TS 联合类型和交叉类型

    联合类型 通过 | 将变量设置多种类型,赋值时可以根据设置的类型来赋值。举例说明: 联合基础类型 联合对象类型 可...

  • TypeScript - 类型深入

    更深入了解 TypeScript 类型系统 通过 联合类型、交叉类型、字面量类型 来满足更多的标注需求 通过 类型...

  • 联合类型和类型保护

    类型保护 1、类型断言的方式 2、in 语法做类型保护 3、typeof 方式 4、instanceof 方式

网友评论

      本文标题:05-TypeScript-交叉类型-联合类型-类型保护

      本文链接:https://www.haomeiwen.com/subject/cqguuktx.html