TypeScript中基于外部类型属性值动态定义属性名的实现

要实现用Options中的promptField和valueField属性值替换OptionsItem的prompt、value属性名，可以利用TypeScript的泛型来动态约束属性名称，以下是具体实现：

完整代码实现 #

export type simpleValue = string | number | boolean | Date | null;

// 定义泛型Options接口，PromptField和ValueField指定属性名，默认值为原属性名
export interface Options<PromptField extends string = 'prompt', ValueField extends string = 'value'> {
  inline?: OptionsItem<PromptField, ValueField>[] | unknown[];
  promptField?: PromptField;
  selectedValues?: unknown[];
  valueField?: ValueField;
}

// 根据泛型动态生成属性名的OptionsItem类型
export type OptionsItem<PromptField extends string, ValueField extends string> = {
  [K in PromptField]: string;
} & {
  [K in ValueField]: simpleValue;
};

用法示例 #

当你需要自定义属性名时，只需在使用Options时传入泛型参数：

// 示例：用label替代prompt，id替代value
type CustomOptions = Options<'label', 'id'>;
type CustomOptionsItem = OptionsItem<'label', 'id'>;

// 此时CustomOptionsItem的结构为：{ label: string; id: simpleValue }
const item: CustomOptionsItem = {
  label: '选项1',
  id: 123
};

const options: CustomOptions = {
  promptField: 'label',
  valueField: 'id',
  inline: [item]
};

说明 #

• 泛型PromptField和ValueField被约束为string类型，确保传入的是合法的属性名称
• 默认情况下，Options和OptionsItem会保持原有的prompt、value属性名，兼容原有代码
• 通过交叉类型（&）将两个动态属性合并为一个类型，保证结构完整性

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