reactjs - 根据对象中键的值定义类型

Question

我正在添加一个具有以下结构的 Select 组件。

type Option = {
  value: string | number
  label: string;
  icon?: string
}
type SelectProps = {
  labelKey?: string;
  iconKey?: string;
  valueKe?: string;
  options: Option[]
}

function Select({
  labelKey = 'label',
  iconKey = 'icon',
  valueKey= 'value',
  groupBy = 'groupBy',
  options// need to type Option
}: SelectProps) {
  // some logic to render options
  // options.map(option => (<li key={option[valueKey]}>{option[labelKey]}</li>))
}

在这里， options是一组选项，我试图让用户灵活地提供用于标签、图标等的键，这样用户就不需要一直映射数据。
目前， Option类型具有硬编码键，如 label , value , icon但我想根据传递给 labelKey 的值创建这种类型, valueKey , iconKey等等。
例如，如果用户通过 labelKey="name" Prop 然后 Option类型应允许以下数据:

[ { 
  name: 'Product',
  value: 'product',
  icon: 'product'
}]

到目前为止，我已经尝试了以下实现，但它将所有键的类型设置为字符串。

type OptionKeys = {labelKey: string, valueKey: string, iconKey: string}
type Option<T extends OptionKeys> = {
    [label in T["labelKey" | "valueKey" | "iconKey"]]: string // all the types are string
}

type SelectProps<T extends OptionKeys = {
    labelKey: 'label',
    valueKey: 'value',
    iconKey: 'icon'
}> = {
    labelKey?: string
    valueKey?: string;
    iconKey?: string;
    options: Option<T>[]
}

在这里， Option的键具有类型 string 的值但我想根据键定义类型。例如，如果 key 是 labelKey ，我希望它的值为 number | string等等。
一种选择，我在这里看到的是通过使 Select 组件通用来从外部接受 OptionType 但在这种情况下，我需要重构我的组件并希望现在避免这种重构。
如何更新我的类型以处理这种情况？

Answer 1

使用 FromEntries从此博客文章中键入:https://dev.to/svehla/typescript-object-fromentries-389c ,
定义 SelectProps键入如下:

type SelectProps<LK, VK, IK> = {
    labelKey?: LK
    valueKey?: VK
    iconKey?: IK
    options: FromEntries<[
        [LK, string], 
        [VK, string | number], 
        [IK, string | undefined]
    ]>
}

我们在选项中有三个键，标签键( LK )是一个 string ，值键( VK )是一个 string | number和图标键( IK )，它是一个 string | undefined现在我们定义 Select功能如下:

function Select<
    LK extends string = 'label', 
    VK extends string = 'value', 
    IK extends string = 'icon'
>(props: SelectProps<LK, VK, IK>) {}

将默认键名放在函数本身而不是 SelectProps 上很重要。类型。我不知道为什么。
Full playground link