使用随机数组字符串键入对象键/属性 - TypeScript答案

【问题标题】：Using random array strings to type object keys/properties - TypeScript使用随机数组字符串键入对象键/属性 - TypeScript
【发布时间】：2020-09-05 17:17:00
【问题描述】：

我想要一个动态的Array<string>，然后用数组值中的key/property 生成一个动态的Object。（用于 reactjs 打字稿中的道具使用）

这是一个示例代码：

interface Props {
  buttons: Array<string>;
  buttonProps?: { [key: string]: string }; //want key here to correspond with values of buttons
}

我猜你在这里使用泛型，但我不确定如何继续。

【问题讨论】：

标签： arrays typescript object generics dynamic

【解决方案1】：

因为 key 是 string 你必须添加一个泛型，否则任何字符串都是有效的，这意味着你可以在按钮和 buttonProps 中放置任何东西。

我希望我的问题是正确的。

interface Props<T extends keyof any = keyof any> {
  buttons: Array<T>;
  buttonProps?: { [key in T]: string };
};

const buttons: Props<'test1' | 'test2'> = {
  buttons: [
    'test1', 'test2',
  ],
  buttonProps: {
    test1: 'string1',
    test2: 'string2',
  },
};

【讨论】：

只是一个后续，如果它是一个无状态的反应组件，我想在其他地方定义buttons，我该如何处理？
你需要一个定义所有按钮的类型，比如type allButtons = 'test1' | 'test2'，然后你可以在任何你定义按钮的地方使用这个类型，你也可以将它传递给Props。
太棒了！编码愉快！