导航

Untitled

type A1 = number
type B1 = string
type C1 = A1 | B1
const c1: C1 = 32

type A2 = { name: string }
type B2 = { age: number }
type C2 = A2 | B2
const c2: C2 = {
  name: 'Lance',
}

类型收窄

为什么会有类型收窄：有联合类型就代表有多种类型可能，在实际传值后就有可能要做类型区分

使用 typeof 区分类型

Untitled

const f1 = (a: number | string) => {
  // a.toFixed() 类型“string | number”上不存在属性“toFixed”
  // a.split(',') 类型“string | number”上不存在属性“split”
  if (typeof a === 'string') { // 类型收窄
    a.split(',')
  } else {
    a.toFixed(2)
  }
}

缺点

typeof xxx 只有8种类型，没法对所有类型进行区分（e.g. null 和对象）
- "string"、"number"、"boolean"、"bigint"、"symbol"、"undefined"、"function"、"object"

Untitled

使用 instanceof 区分类型

const f1 = (a: Array<Date> | Date) => {
  if (a instanceof Date) {
    a.toISOString()
  } else if (a instanceof Array) {
    a[0].toISOString()
  } else {
    throw new Error('Never do this')
  }
}

缺点

不支持 string、number、boolean 等基本类型
不支持 TS 独有的类型（因为ts类型最后转js会被类型擦除）

type Person = {
  name: string
}
type Animal = {
  age: number
}

const f1 = (a: Person | Animal) => {
  if (a instanceof Person) {

  }
}

Untitled

使用 in 区分类型

Untitled

使用逻辑收窄

Untitled

使用类型谓词 is

优点
- 支持所有 TS 类型
缺点
- 麻烦

type Rect = {
  height: number
  width: number
}
type Circle = {
  center: [number, number]
  radius: number
}

function isRect(x: Rect | Circle): x is Rect {
  return 'height' in x && 'width' in x
}

function isCircle(x: Rect | Circle): x is Circle {
  return 'center' in x && 'radius' in x
}

const f1 = (a: Rect | Circle) => {
  if (isRect(a)) {
    a
  } else if (isCircle(a)) {
    a
  } else {
    a
  }
}

可辨别联合

T = A | B | C | D | ...

A、B、C、D ... 有相同属性 kind 或其他
kind 的类型是简单类型
各类型中的 kind 可区分

则称 T 为可辨别联合

一句话概括：同名、可辨别的简单类型的 key

type Circle = { kind: 'circle', name: 'Circle' }
type Square = { kind: 'square', name: 'Square' }
type Shape = Circle | Square

const f1 = (a: Shape) => {
  if (a.kind === "circle") {
    a
  } else {
    a
  }
}

总结

Untitled