首页 > 其他分享 >TypeScript中,如何利用数组生成一个联合类型

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

时间:2024-07-02 11:45:05浏览次数:15  
标签:arr TypeScript const str AI 生成 数组 类型 ChatMoney

本文由 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[]:

转换成元组后:

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

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

最后大功告成

标签:arr,TypeScript,const,str,AI,生成,数组,类型,ChatMoney
From: https://www.cnblogs.com/chatlin/p/18279588

相关文章

  • 数组模拟队列
    829.模拟队列-AcWing题库#include<bits/stdc++.h>usingnamespacestd;#defineintlonglong#defineendl'\n'constintN=5e5+10;intq[N];inthh=0,tt=-1;//hh头tt尾signedmain(){ios::sync_with_stdio(0);cin.tie(0);cout.tie(0);......
  • R语言数据分析案例38-高等教育学生成绩分析(多元线性回归)
    一、研究背景学生成绩是衡量教育质量的重要指标,同时也是教育工作者进行教学反思和改进的重要依据。随着现代教育的不断发展,各类学科课程的设置日益多样化,学生的学习表现也呈现出复杂多样的特征。为了深入了解学生在各门课程中的表现,找出影响学生成绩的关键因素,有必要对学生成......
  • C#面:实现产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复
    对生成的数组排序,需要支持升序、降序两种顺序usingSystem;usingSystem.Collections.Generic;classProgram{staticvoidMain(string[]args){Randomrandom=newRandom();HashSet<int>set=newHashSet<int>();while(set.C......
  • 339 Refresh Tokens 01(生成RefreshToken)
    步骤1、appsettings.json"Jwt":{"Issuer":"http://localhost:7221","Audience":"http://localhost:4200","EXPIRATION_MINUTES":1,"Key":"thisissecretkeyforjwtthisisse......
  • 随机生成50个0-100之间的数字,生成对应个数的随机字母,再按数字大小从小到大排序最后写
    importjava.util.ArrayList;importjava.util.Collections;importjava.util.List;importjava.util.Random;importjava.io.FileNotFoundException;importjava.io.PrintStream;publicclassRandomNum{publicstaticvoidmain(String[]args)throwsFileNotF......
  • Unity 导航路线生成,小地图同步映射, 经过以后地图与小地图删除点位(点击小地图控制导航
    效果:(如下图所示)操作方法:搭建小地图UI截取图片创建地面挂载如下代码:usingSystem.Collections.Generic;usingUnityEngine;usingUnityEngine.UI;[RequireComponent(typeof(MeshFilter),typeof(MeshCollider),typeof(MeshRenderer))]publicclassMap:Mo......
  • 【JavaScript脚本宇宙】从发票生成到网页保存:JavaScript PDF库指南
    探索顶级JavaScriptPDF库:高效处理PDF文档的利器前言随着数字化信息的普及和无纸化办公理念的深入,PDF文档因其高度兼容性和稳定性成为了存储、分享和展示信息的首选格式。为了满足不同用户对PDF文档生成和处理的需求,各类功能强大的JavaScript库应运而生。这篇文章将详细介......
  • TypeScript一些特性让代码更优雅
    TypeScript不仅仅是JavaScript的类型超集,它还提供了一系列强大的高级特性,可以显著提高代码的质量和可维护性,掌握TypeScript的这些高级功能,不仅可以让你的代码更加健壮,还能大大提升你的开发效率。赶紧来看看吧!一、深入理解TypeScript的高级类型推断TypeScript的类型推断系......
  • 记一次vue脚手架打包生成的js里面变量逻辑错误的解决
    问题背景开发环境调用threejs,实现3d功能组件,开发环境测试正常,打包部署到现场后异常。浏览器控制台,报变量i和r,没有定义下图是点击报错地方打开的控制台截图。可以看到有ir变量。解决思路开发调试没有问题,那肯定是打包之后命名的变量存在不正确的逻辑了。肯定不能修改dis......
  • 【算法探险】在排序数组中查找元素的第一个和最后一个位置
    【算法探险】在排序数组中查找元素的第一个和最后一个位置一、引言:算法界的寻宝图二、技术概述:双剑合璧,左右逢源定义与核心特性优势代码示例:初露锋芒三、技术细节:抽丝剥茧,揭秘算法奥秘原理解析难点剖析四、实战应用:数字海洋,定位精准应用场景案例展示五、优化与改进:精......