TypeScript中,如何利用数组生成一个联合类型

本文由 ChatMoney团队出品

在开发中我们常常会遇到这样一个问题,代码如下:

const arr = [
  "a",
  "b",
  "c",
  "d",
  "e",
  "f",
  "g",
  "h",
  "i",
  "j",
  "k",
  "l",
  "m",
  "n",
  "o",
  "p",
  "q",
  "r",
  "s",
  "t",
  "u",
  "v",
  "w",
  "x",
  "y",
  "z",
];

const func = (str) => {
    // ...
}

我们想要传入一个参数到str,而且这个参数必须是arr数组中的某一个元素,这时我们希望的是可以直接得到这个arr的联合类型,接下来一般我们会使用传统的方法去声明类型,如下:

type Strs = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z";

const func = (str: Strs) => {
    // ...
}

先不说这样的写法很笨,写的时候就已经很ex了,我们希望的是Strs可以根据上面arr的值来自动生成一个联合类型,这时我们可以有一个技巧来解决这个问题,就是先将str转换为元组:

const arr = [
  "a",
  "b",
  "c",
  // ...
] as const;

没转换前arr的类型为string[]

TypeScript中,如何利用数组生成一个联合类型

转换成元组后:

TypeScript中,如何利用数组生成一个联合类型

然后我们就可以使用typeof来生成一个联合类型:

TypeScript中,如何利用数组生成一个联合类型

最后我们给入参定义这个类型:

TypeScript中,如何利用数组生成一个联合类型

最后大功告成😎。

关于我们

本文由ChatMoney团队出品,ChatMoney专注于AI应用落地与变现,我们提供全套、持续更新的AI源码系统与可执行的变现方案,致力于帮助更多人利用AI来变现,欢迎进入ChatMoney获取更多AI变现方案!

ChatMoney的头像ChatMoney
上一篇 2024年 7月 2日 下午2:47
下一篇 2024年 7月 3日 上午11:00

相关推荐

  • 如何利用浏览器资源提示关键词优化网页性能

    本文由 ChatMoney团队出品 在现代Web开发中,页面加载速度对用户体验至关重要。浏览器提供了一些资源提示关键词(Resource Hints),帮助开发者优化页面加载速度。这些关键词包括 defer、async、preload、prefetch、dns-prefetch、prerender 和 preconnect。合理利用这些关键词,可以显著提高页…

    2024年 7月 11日
    153
  • ThinkPHP6事件系统使用指南

    本文由 ChatMoney团队出品 在ThinkPHP 6中,事件系统提供了一种优雅的方式来实现解耦和动态响应。你可以通过注册事件和对应的监听者来处理各种应用逻辑。 事件注册 闭包注册 闭包是最简单的事件监听者,可以直接在注册时定义。 静态方法与普通方法注册 默认方法 首先定义一个事件类,并包含默认的处理方法。 然后在index.php中注册事件。 自定义方…

    2024年 7月 16日
    147
  • 浅谈工厂模式

    本文由 ChatMoney团队出品 掌握优秀的设计模式,可以显著提高我们的技术能力。此外,它还能让我们编写的代码更加优雅,减少错误,并更好地扩展和维护项目。 基础知识 简单工厂模式 简单工厂模式(Simple Factory Pattern)指的是一个工厂类根据传入的参数来决定创建哪一种产品类的实例。尽管这种模式简单,但它违反了开放封闭原则,因为每增加一个新…

    2024年 7月 23日
    150
  • PHP数据结构之栈

    本文由 ChatMoney团队出品 栈(Stack)是一种后进先出(Last In First Out, LIFO)的数据结构,它只允许在一端(称为栈顶)进行插入和删除操作。栈的应用非常广泛,例如在编程语言的函数调用中,每次函数调用都会将一个新的帧压入栈中,当函数返回时,该帧会被弹出。此外,栈还常用于解决某些算法问题,如括号匹配、深度优先搜索等。 栈的基本概…

    2024年 7月 8日
    410
  • 提升AI绘画生成质量:探索与突破

    本文由 ChatMoney团队出品 随着人工智能技术的蓬勃发展,AI绘画生成技术已成为艺术领域的一颗璀璨新星。然而,尽管AI绘画技术在模仿人类绘画风格、创作独特艺术作品等方面取得了显著进展,但其生成的图像质量仍有待提升。本文旨在深入探讨如何提升AI绘画生成质量,以期为相关领域的研究和实践提供有益的参考。 一、现状与挑战 AI绘画生成技术利用计算机程序和算法,…

    2024年 7月 3日
    126

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信