TS 小技巧: 使用元组生成联合类型

前言

在我们使用 TypeScript 开发业务的时候，也许你会遇到一个这样的问题：我们如何根据一个数组的值得到一个联合类型？
这里向大家介绍一个开发小技巧：使用元组生成联合类型

开发场景

我们看下面一段 ts 代码：

const colors = ['red','green','orange','blue']; // 这里 ts 解析的是 string[]

// 这里的 value 类型该如何标注，使它的值只能是 colors 中的值
const setColors = (value:?) => {
  console.log('value',value)
};

我们总不能手动去写成这样：

type Colors = 'red' | 'green' | 'orange' | 'blue';

这样显得我们很呆，我们应该根据 colors 自动生成一个联合类型，做法也很简单：

// 1. 先将 colors 转成元组类型，这里 ts 解析的是 readonly ["red", "green", "orange", "blue"]
const colors = ['red','green','orange','blue'] as const; 

// 2. 将元组类型转成联合类型
type Colors = typeof colors[number];

// 这里的 value 类型该如何标注，使它的值只能是 colors 中的值
const setColors = (value:Colors) => {
  console.log('value',value)
};

这样我们就可以完成 ts 的类型检查了：