如何基于组件labels属性值自动推断组件Props类型？

问题背景 #

现有一个接收labels属性的组件，使用示例如下：

<Component
  defaultValue={FURNITURE.BED}
  labels={[
    {
      value: FURNITURE.BED,
      text: 'Bed',
    },
    {
      value: FURNITURE.COUCH,
      text: 'Couch',
    },
    {
      value: FURNITURE.CHAIR,
      text: 'Chair',
    },
  ]}
  onSubmit={onSubmit}
  ...otherAttributes
/>

其中枚举和类型定义：

export enum FURNITURE {
  BED = 'bed',
  COUCH = 'couch',
  CHAIR = 'chair'
}

type FurnitureOptions = `${FURNITURE}` // 等价于 'bed' | 'couch' | 'chair'

const onSubmit = (value: FurnitureOptions) => processFurniture(value)

当前组件的类型定义中，value相关属性被设置为string | number，导致传入onSubmit时需要类型断言，存在lint问题：

interface ILabel {
  readonly label: string;
  readonly value: string | number;
}

interface IComponentProps {
  readonly labels: ILabel[];
  readonly defaultValue: string | number | null;
  readonly onSubmit: (value: ILabel) => void;
  // ...其他属性
}

const Component = ({
  labels, defaultValue, onSubmit, ...otherAttributes
}: IComponentProps) => { /* 组件逻辑 */ }

需求是让组件能够基于传入的labels数组中的value自动推断出具体类型（比如示例中的FurnitureOptions），无需手动指定泛型参数，避免类型断言和lint错误。

尝试过通过Extract提取值类型，但直接在组件参数中使用时出现循环引用错误：

type PossibleValues = Extract<typeof labels[number], { readonly [v in 'value']: unknown }>['value']

错误提示：'labels' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer. ts(7022)

解决方案 #

方法1：泛型组件实现自动推断 #

将组件定义为泛型组件，让TypeScript根据传入的labels自动推断value的类型，无需手动指定泛型参数：

// 泛型Label类型，T为value的具体类型
interface ILabel<T extends string | number> {
  readonly label: string;
  readonly value: T;
}

// 泛型组件Props，T由labels的value类型推断而来
interface IComponentProps<T extends string | number> {
  readonly labels: readonly ILabel<T>[];
  readonly defaultValue: T | null;
  readonly onSubmit: (value: T) => void;
  // ...其他属性
}

// 泛型组件，TypeScript自动推导T
const Component = <T extends string | number>({
  labels, defaultValue, onSubmit, ...otherAttributes
}: IComponentProps<T>) => {
  // 组件逻辑示例
  const handleSubmit = (selectedValue: T) => {
    onSubmit(selectedValue);
  };
  return /* 组件JSX */;
};

使用时TypeScript会自动推断类型：

// 自动推断T为 'bed' | 'couch' | 'chair'
<Component
  defaultValue={FURNITURE.BED}
  labels={[
    { value: FURNITURE.BED, label: 'Bed' },
    { value: FURNITURE.COUCH, label: 'Couch' },
    { value: FURNITURE.CHAIR, label: 'Chair' },
  ]}
  onSubmit={(value) => {
    // value自动推断为FurnitureOptions类型，无需断言
    processFurniture(value);
  }}
/>

方法2：索引类型+泛型约束简化定义 #

如果不想单独给ILabel加泛型，可以直接在组件Props中用泛型约束labels结构，自动提取value类型：

// 泛型Props，Labels为labels数组的具体类型
interface IComponentProps<Labels extends readonly { value: string | number; label: string }[]> {
  readonly labels: Labels;
  readonly defaultValue: Labels[number]['value'] | null;
  readonly onSubmit: (value: Labels[number]['value']) => void;
  // ...其他属性
}

// 组件定义，Labels由传入的labels自动推断
const Component = <Labels extends readonly { value: string | number; label: string }[]>({
  labels, defaultValue, onSubmit, ...otherAttributes
}: IComponentProps<Labels>) => {
  // 组件逻辑
  return /* 组件JSX */;
};

这种方式同样能实现自动推断，且更简洁：

// 自动推断Labels为readonly [{value: FURNITURE.BED; label: string}, ...]
// defaultValue和onSubmit的value类型自动推导为FURNITURE的枚举值
<Component
  defaultValue={FURNITURE.BED}
  labels={[
    { value: FURNITURE.BED, label: 'Bed' },
    { value: FURNITURE.COUCH, label: 'Couch' },
    { value: FURNITURE.CHAIR, label: 'Chair' },
  ]}
  onSubmit={(value) => processFurniture(value)}
/>

关键注意点 #

• 给labels加上readonly修饰，让TypeScript能准确推断每个value的字面量类型，而非宽泛的string或number。
• 泛型参数的约束要精准，既要覆盖string | number场景，又要允许TypeScript推断出具体子类型（比如枚举值、字面量类型）。

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