TypeScript中如何将数组元素作为类属性的类型？

在TypeScript里，你可以通过const断言和类型查询的组合，轻松让类属性的类型自动关联数组的元素类型，不用手动重复写联合类型。具体步骤如下：

1. 用as const定义你的允许颜色数组，这会让TypeScript把数组推断为一个只读的字面量元组（而不是宽泛的string[]），保留每个元素的具体类型：

   const allowedColors = ['red', 'blue'] as const;
   

2. 通过typeof和索引访问[number]提取数组的元素类型，得到你想要的联合类型：

   type AllowedColor = typeof allowedColors[number];
   // 此时AllowedColor的类型就是 'red' | 'blue'
   

3. 最后把这个类型用到你的类属性上即可：

   class SomeClass {
     color: AllowedColor;
   
     constructor(color: AllowedColor) {
       this.color = color;
     }
   }
   

为什么要这么做？ #

• 避免重复代码：如果之后需要新增或修改允许的颜色，只需要修改allowedColors数组，AllowedColor类型会自动同步更新，不用手动修改联合类型。
• 类型安全：TypeScript会严格检查color属性的赋值，确保只能是数组里存在的颜色值。

举个使用的例子：

const validInstance = new SomeClass('red'); // ✅ 合法
const invalidInstance = new SomeClass('green'); // ❌ 报错，因为'green'不在allowedColors里

内容的提问来源于stack exchange，提问作者Pedro Arantes