对期望 'number | 的属性使用泛型类型值。字符串 | 不明确的'

Question

这个问题使用 React 代码，但特定于 typescript 而不是 react。

我正在使用一个简化的示例来尝试使其更易于阅读。我有一个组件MyList，它接受一个传递给 props 类型的泛型类型参数。

这种泛型类型推断出一个用于生成子组件的对象。我想使用T[keyof T]||的值来键控每个子组件 它的索引在T[].

创建列表并使用索引没有问题，但我无法弄清楚如何正确键入，listKey以便它可以与key预期的reacts属性一起使用number | string | undefined。

type MyListProps<T> = {

  list: T[],

  listKey: keyof T,

  contentKey: keyof T

}

class MyList<T extends object> extends React.Component<MyListProps<T>, any> {

  public render() {

    return (

      <div>

        { this.props.list.map((value: T, index: number) => {

            const key = value[this.props.listKey];

            return (

              // Type T[keyof T] is not assignable 

              // to type 'number | string | undefined'

              <Item key={key}>{value[this.props.contentKey]}</Item>

            );

        }

      </div>

    );

  }

}

我怎么能推断出该listKey类型可以key使用泛型分配给预期类型的 reacts道具？