TS 类型收窄教程示例详解

JS方法

typeof

缺点

typeof null —→ object
typeof 数组 —→ object
typeof 日期 —→ object

a instanceof A : A 是否出现在a的原型链上

缺点

不支持string 、number 、boolean 等原始类型

不支持TS的自定义类型，如下：

type Person {
  name: string
}

key in obj
Array.isArray()

👍🏻类型谓词is

重点在 shape is Rect

type Rect = {
  width: number
  height: number
}
type Circle = {
  center: [number, number]
  radius: number
}
const area = (shape: Rect | Circle): number => {
  if(isRect(shape)) {
    return shape.width * shape.height
  } else {
    return Math.PI * shape.radius ^ 2
  }
}
const isRect = (shape: Rect | Circle): shape is Rect => {
  return 'width' in shape && 'height' in shape
}

👍🏻👍🏻可辨别联合

要求：T = A | B | C

A | B | C … 要有一个相同的属性 type或其它
type类型只能为简单类型
A | B | C …的type属性无交集

type Rect = {
  type: 'rect',
  width: number
  height: number
}
type Circle = {
  type: 'circle'
  center: [number, number]
  radius: number
}
const area = (shape: Rect | Circle): number => {
  if(shape.type === 'rect') {
    return shape.width * shape.height
  } else {
    return Math.PI * shape.radius ^ 2
  }
}

以上就是TS 类型收窄教程示例详解的详细内容，更多关于TS 类型收窄的资料请关注其它相关文章！

若文章对您有帮助，帮忙点个赞！

0赞

-5踩

发布时间 2022-09-22 12:07:05

TS 类型收窄教程示例详解

目录

JS方法

👍🏻类型谓词is

👍🏻👍🏻可辨别联合