从传入组件的对象推断类型：约束displayValue为属性名

我想把至少包含id属性的任意对象列表传给泛型组件，怎么强制displayValue必须是options对象的某个属性名的字符串？

示例代码：

export default function App() {
  const options = [
    { id: 1, name: "Apple" },
    {
      id: 2,
      name: "Banana"
    },
  ];

  return (
    <div className="App">
      <ListDisplay options={options} displayValue="name" />
    </div>
  );
}

解决办法 #

直接用TypeScript的泛型+类型约束就能实现：

1. 先定义基础类型约束对象必须包含id，再给组件Props做泛型限制，让displayValue只能是options元素的属性名：

import React from 'react';

// 规定传入的对象必须有id属性
type HasId = { id: number | string };

// 泛型Props：T必须满足HasId，displayValue只能是T的属性名
type ListDisplayProps<T extends HasId> = {
  options: T[];
  displayValue: keyof T;
};

// 泛型组件
function ListDisplay<T extends HasId>({ options, displayValue }: ListDisplayProps<T>) {
  return (
    <ul>
      {options.map(item => (
        <li key={item.id}>{item[displayValue]}</li>
      ))}
    </ul>
  );
}

export default function App() {
  const options = [
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" },
  ];

  // 这里displayValue只能传"id"或"name"，输错会直接在编辑器里报错
  return (
    <div className="App">
      <ListDisplay options={options} displayValue="name" />
    </div>
  );
}

2. 这么做的好处：

• TypeScript会自动根据传入的options推导类型，displayValue只能选对象存在的属性，从根源避免拼写错误
• 确保运行时不会出现“找不到属性”的报错

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