如何用TypeScript泛型限制React组件对象键与数组项一致？

完全可以通过泛型实现这个需求，核心思路是利用TypeScript的泛型捕获items数组的字面量类型，再约束values对象的键必须属于该类型集合，编译阶段就能拦截非法参数。

具体实现示例 #

import React from 'react';

// 定义带泛型约束的组件Props
type MyComponentProps<T extends string> = {
  // items数组的元素类型由泛型T捕获
  items: T[];
  // values的键必须是T类型，值类型按示例设为boolean（可按需调整）
  values: Record<T, boolean>;
};

// 实现组件
const MyComponent = <T extends string>({ items, values }: MyComponentProps<T>) => {
  return (
    <div>
      <h3>配置项</h3>
      <ul>
        {items.map(item => (
          <li key={item}>
            {item}: {values[item].toString()}
          </li>
        ))}
      </ul>
    </div>
  );
};

// 合法使用：values的键完全匹配items元素
const ValidDemo = () => {
  return <MyComponent values={{ dog: true }} items={['dog']} />;
};

// 不合法使用：TypeScript会直接报错，提示'cat'不在允许的键集合中
const InvalidDemo = () => {
  // @ts-expect-error 此处触发类型检查错误
  return <MyComponent values={{ dog: true, cat: true }} items={['dog']} />;
};

关键说明 #

• 泛型T会自动推导items数组的字面量类型（比如传入['dog']时，T会被推导为"dog"）
• Record<T, boolean>类型确保values的键只能是T包含的成员，值类型可根据业务需求调整为其他类型（比如string、number，甚至额外泛型参数）
• 如果items是预先定义的变量，需要用as const固定其字面量类型，避免TypeScript将其推导为宽泛的string[]：

  const animalItems = ['dog', 'cat'] as const;
  // 合法：键完全匹配
  <MyComponent values={{ dog: true, cat: false }} items={animalItems} />;
  // 不合法：'bird'不在animalItems的元素类型中
  <MyComponent values={{ dog: true, bird: true }} items={animalItems} />;
  

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