React TypeScript类型安全Select组件实现问题求助

方案1：修改组件Props接受readonly数组 #

直接调整Select组件的选项数组类型为readonly，让as const生成的只读数组能直接传递，完全保留类型安全。

组件类型与实现 #

// 定义选项的基础类型
type Option<T extends string | number> = {
  key: T;
  label: string;
};

// 组件Props改为接受readonly数组
type SelectProps<T extends string | number> = {
  options: readonly Option<T>[];
  value: T;
  onChange: (value: T) => void;
};

export const Select = <T extends string | number>({ options, value, onChange }: SelectProps<T>) => {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value as T)}>
      {options.map((option) => (
        <option key={option.key} value={option.key}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

使用示例 #

// 用as const锁定数组类型，推导精确联合类型
const difficulties = [
  { key: 'easy', label: '简单' },
  { key: 'medium', label: '中等' },
  { key: 'hard', label: '困难' },
] as const;

// 自动推导Difficulty为 'easy' | 'medium' | 'hard'
type Difficulty = (typeof difficulties)[number]['key'];

// 直接传递readonly数组给组件
<Select
  options={difficulties}
  value="easy"
  onChange={(selectedKey) => {
    // selectedKey自动约束为Difficulty类型，类型安全
    // 传给后端时直接使用该key，符合类型要求
    fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify({ difficulty: selectedKey })
    });
  }}
/>

方案2：将readonly数组转为普通数组（保留类型） #

如果无法修改组件代码，可通过解构或类型断言将只读数组转为普通数组，同时保留字面量类型信息。

示例代码 #

const difficulties = [
  { key: 'easy', label: '简单' },
  { key: 'medium', label: '中等' },
  { key: 'hard', label: '困难' },
] as const;

// 用解构生成普通数组，自动保留精确类型（推荐）
const mutableDifficulties = [...difficulties];

// 或用类型断言（仅在确定不会修改数组时使用）
// const mutableDifficulties = difficulties as Option<Difficulty>[];

// 传递转换后的数组给组件
<Select
  options={mutableDifficulties}
  value="easy"
  onChange={(selectedKey) => {
    // 依然保持类型约束
    console.log(selectedKey);
  }}
/>

核心逻辑 #

as const会将数组和对象锁定为只读字面量类型，让TypeScript推导出最精确的联合类型（比如'easy' | 'medium' | 'hard'而非宽泛的string）。只要让组件兼容只读数组，或者将只读数组转为普通数组但保留字面量类型，就能同时满足类型安全与赋值需求。

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