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

简介: 这篇文章介绍了使用TypeScript开发时,如何根据一个数组的值得到一个联合类型。作者介绍了一个开发小技巧:使用元组生成联合类型。文章中给出了具体的开发场景和示例代码,以及实现的步骤。通过将数组转成元组类型,然后将元组类型转成联合类型,可以实现类型检查。

前言

在我们使用 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 的类型检查了:
n8ln9ahw87b7fzma05upkbinz8dqovpt.jpg

相关文章
|
4月前
TS 系列:使用元祖生成联合类型
TS 系列:使用元祖生成联合类型
31 0
|
6月前
|
JavaScript
ts中的元组是什么有什么用
ts中的元组是什么有什么用
115 0
|
6月前
|
JavaScript
ts的交叉类型是什么
ts的交叉类型是什么
64 0
|
JavaScript 前端开发
ts -函数的类型
在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expression)
|
JavaScript 编译器 索引
TS进阶篇 | TS高级类型之字面量类型、联合类型、交叉类型(上)
TypeScript中除了基本类型之外,还定义了很多高级类型,高级类型包括字面量类型、联合类型、交叉类型、索引类型、映射类型、条件类型、this类型等。因为内容太多,所以这篇文章先来介绍前三个类型,其余类型会在高级类型的下篇介绍。
1183 0
|
编译器
【TS】联合类型--类型断言--类型推断
【TS】联合类型--类型断言--类型推断
96 0
【TS】数组和元组
【TS】数组和元组
103 0
【TS】函数和函数类型
【TS】函数和函数类型
80 0
TS中的&交叉类型
TS中的&交叉类型
145 0