如何从数组创建TypeScript枚举？实现动态货币属性

要让组件的currency属性自动支持npm库中CURRENCIES数组的所有货币代码，同时保持仅在npm库一处维护列表，你可以利用TypeScript的字面量类型提取特性实现：

步骤1：确保npm库的数组能被推断为字面量类型（可选，若能修改npm库） #

如果有权限修改npm库代码，给CURRENCIES添加as const断言，让TypeScript推断出具体的货币字面量类型，而非宽泛的string[]：

// npm库中的代码
export const CURRENCIES = ['EUR', 'CHF', 'GBP', 'USD', 'DKK'] as const;

步骤2：在项目中提取货币类型并应用到组件 #

在你的TypeScript项目中，导入CURRENCIES并提取其元素的联合类型，替换原来手动编写的货币代码联合类型：

import { CURRENCIES } from '你的npm包名称';

// 提取CURRENCIES数组中所有元素的字面量联合类型
type CurrencyCode = typeof CURRENCIES[number];

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  currency?: CurrencyCode; // 自动覆盖所有CURRENCIES中的货币代码
}

const CurrencyInput = ({ currency = 'EUR' }: InputProps) => {
  // ...你的组件逻辑
};

若无法修改npm库的代码 #

如果不能改动npm库，在项目中导入时用as const断言强制转换为字面量数组类型即可：

import { CURRENCIES } from '你的npm包名称';

// 手动断言为字面量数组，再提取类型
const CURRENCIES_LITERAL = CURRENCIES as const;
type CurrencyCode = typeof CURRENCIES_LITERAL[number];

// 后续Props定义和组件实现同上

效果 #

后续只要npm库中的CURRENCIES数组更新（新增/删除货币代码），项目中的CurrencyCode类型会自动同步，无需手动修改组件的类型定义，完全实现一处维护，多处复用的目标。同时TypeScript会自动校验传入的currency值是否在合法列表中，保证类型安全。

内容的提问来源于stack exchange，提问作者NIKHIL C M