TypeScript如何约束泛型数组属性值为另一属性的合法取值

你之前写的Array<T>[number]['value']索引访问逻辑本身是正确的，最终没有得到预期的字面量联合类型、退化为通用string，核心原因是TypeScript的默认类型加宽规则：没有额外约束时，对象字面量中的字符串属性会被推导为宽泛的string类型，而非代码里写的具体字符串字面量。此时泛型T被推导为{value: string, label: string}，自然提取出的value类型就是通用string，无法做精准范围限制。

只需要新增一个字符串泛型参数，专门捕获options数组中所有value的字面量联合类型即可，不需要改动组件内部逻辑：

1. 调整Option类型支持传入value的字面量泛型
2. Props中直接用该泛型约束defaultValue的取值范围

完整类型和组件代码如下：

import React from 'react';
import { MdExpandMore } from 'react-icons/md';

// 调整Option类型，支持传入value的字面量类型参数，默认回退为string
type Option<V extends string = string> = {
  value: V;
  label: string;
};

// Props定义，用V约束defaultValue必须是options中存在的value值
interface SelectInputProps<V extends string> {
  options: Option<V>[];
  defaultValue: V;
}

const SelectInput = <V extends string>({
  options,
  defaultValue,
}: SelectInputProps<V>) => {
  const [value, setValue] = React.useState(defaultValue);
  const [isSelecting, setIsSelecting] = React.useState(false);

  const optionElements = options.map((option) => (
    <option value={option.value} key={option.value}>
      {option.label}
    </option>
  ));

  return (
    <div className="relative">
      <div className="flex justify-between items-center">
        <p>{options.find((op) => op.value === value)?.label}</p>
        <MdExpandMore size={'1.5rem'} />
      </div>
    </div>
  );
};

传入组件参数时，TypeScript会自动根据传入的options数组推导所有value的联合类型，对defaultValue做精准校验：

// 合法：defaultValue为options中存在的value
<SelectInput
  options={[
    { value: 'apple', label: '苹果' },
    { value: 'banana', label: '香蕉' }
  ]}
  defaultValue="apple"
/>

// 类型报错：defaultValue传入了options中不存在的'orange'
<SelectInput
  options={[
    { value: 'apple', label: '苹果' },
    { value: 'banana', label: '香蕉' }
  ]}
  defaultValue="orange"
/>

如果你提前把options定义为独立变量再传入组件，需要给变量加as const断言，避免TS把value类型加宽为string：

// 加as const锁定数组和属性的字面量类型
const fruitOptions = [
  { value: 'apple', label: '苹果' },
  { value: 'banana', label: '香蕉' }
] as const;

// 正常做类型校验
<SelectInput options={fruitOptions} defaultValue="apple" />

如果不想修改原有Option接口的定义，也可以用如下兼容写法，效果完全一致：

interface Option {
  value: string;
  label: string;
}

interface SelectInputProps<T extends Option> {
  options: readonly T[]; // 加readonly兼容as const生成的只读数组类型
  defaultValue: T['value'];
}

// 泛型增加V参数捕获value字面量类型
const SelectInput = <T extends Option & { value: V }, V extends string>({
  options,
  defaultValue,
}: SelectInputProps<T>) => {
  // 组件内部逻辑不变
};

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