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

Posted 2023-03-13

【中文标题】使用随机数组字符串键入对象键/属性 - TypeScript

【英文标题】：Using random array strings to type object keys/properties - 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

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

【参考方案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。

太棒了！编码愉快！