TypeScript中基于动态字符串数组定义对象键/属性类型的实现

嘿，你猜的完全没错，泛型就是实现这个需求的核心！我们可以通过泛型约束让buttonProps的键严格对应buttons数组里的字符串值，这样TypeScript就能在编译时帮你做类型检查，避免拼写错误或者不匹配的情况。

完整实现代码 #

interface Props<T extends string> {
  buttons: T[];
  buttonProps?: { [K in T]?: string };
}

怎么用这个泛型接口？ #

当你使用这个Props时，TypeScript会自动推断出泛型T的类型，你也可以显式指定，灵活性拉满：

// 自动推断：T会被识别为"submit" | "cancel"联合类型
const ButtonGroup = ({ buttons, buttonProps }: Props) => {
  return (
    <div className="button-group">
      {buttons.map(btn => (
        <button 
          key={btn} 
          className={buttonProps?.[btn]}
        >
          {btn}
        </button>
      ))}
    </div>
  );
};

// 使用组件时，buttons的元素会直接约束buttonProps的键
<ButtonGroup 
  buttons={["submit", "cancel"]} 
  buttonProps={{ submit: "primary-btn", cancel: "secondary-btn" }} 
/>

// 要是buttonProps里出现了buttons没有的键，TypeScript会直接报错！
<ButtonGroup 
  buttons={["submit", "cancel"]} 
  buttonProps={{ wrongKey: "error-btn" }} // ❌ 类型不匹配，编译报错
/>

额外优化：按需调整可选性 #

上面的代码里我给buttonProps的属性加了?，意味着不需要为每个button都指定props。如果你希望必须覆盖所有buttons的属性，只需要去掉这个?：

buttonProps?: { [K in T]: string }; // 此时必须为每个button都定义对应的props值

这样一来，你的Props定义就完全动态且类型安全了，完美适配React TypeScript的开发场景！

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