typescript联合类型

介绍一种 ts 联合类型的用法

# typescript 计算圆和矩形的面积怎么定义

# 面积公式

圆的面积等于 pai 乘以半径的平方

s = Math.PI * shape.radius ** 2

正方形面积等于边长的平方

s = sideLength ** 2

# 定义面积计算方法

首先定义一下图形的 interface

interface Shape {
  kind: 'circle' | 'square'
  radius?: number
  sideLength?: number
}

1
2
3
4
5

然后定义计算方法

function getArea(shape: Shape) {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2
    case 'square':
      return shape.sideLength ** 2
  }
}

1
2
3
4
5
6
7
8

以上代码看起来没什么问题, 但是编辑器报错

这里出现了一个问题: 编码的人输入 circle 类型的时候会输入 radius, 但是编译器不知道, 也就是说编译器不明白 circle 和 radius 是一组, square 和 sideLength 是一组

# 联合类型引入

变换一下思路: 将正方形和圆形类型分开定义

interface Circle {
  kind: 'circle';
  radius: number;
}

interface Square {
  kind: 'square';
  sideLength: number;
}

type Shape = Circle | Square

function getArea(shape: Shape) {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2
    case 'square':
      return shape.sideLength ** 2
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

这样编译器就能正确识别类型

上次更新: 2023/04/05, 09:41:10