如何通过数组生成Typescript联合类型type注解

实现方案 #

TypeScript的类型是编译期概念，运行时不会生效，你之前写的map加join是运行时代码，生成的只是普通字符串，没法作为类型注解使用。你可以通过常量断言+类型索引的方式直接从数组提取联合类型：

// 给数组添加as const常量断言，让TypeScript保留精确的字面量类型，而不是推导为宽泛的string[]
const images = ["image1", "image2", "image3"] as const;

// 从数组类型中提取所有元素的联合类型
type Mytype = typeof images[number];
// 此时Mytype等价于你手动写的 "image1" | "image2" | "image3"

使用方式和手动定义的联合类型完全一致：

// 合法赋值
const selectedImg: Mytype = "image1";
// 非法赋值会触发类型校验报错
// const wrongImg: Mytype = "image4";

内容的提问来源于stack exchange，提问作者Dan Wiedenhoever