如何让TypeScript自动识别自定义Select组件基于multiple属性的prop类型

问题原因 #

你在函数参数中提前将props的各个属性解构为独立变量，TypeScript无法建立multiple和selectValue、onSelectChange这些属性之间的类型关联，所以即使判断了multiple的值，也无法自动缩小其他变量的类型，只能手动做类型断言。

解决方案 #

最简单的改法是不要提前解构props，直接对props整体进行类型判断，TypeScript会自动根据multiple这个可辨识字段的值缩小整个props的联合类型，无需手动强制转换：

import React, { ReactNode } from 'react';
import MultipleSelect from './MultipleSelect';
import SingleSelect from './SingleSelect';

interface MultipleSelectProps {
  selectValue: string[];
  multiple: true;
  onSelectChange: (values: string[]) => void;
  renderValue?: (value: string[]) => React.ReactNode;
  children?: ReactNode;
}

interface SingleSelectProps {
  selectValue: string;
  onSelectChange: (values: string) => void;
  multiple?: never;
  renderValue?: (value: string) => React.ReactNode;
  children?: ReactNode;
}

type SelectProps = SingleSelectProps | MultipleSelectProps;

const Select: React.FC<SelectProps> = (props) => {
  if (props.multiple) {
    // 此处TS已自动将props识别为MultipleSelectProps类型
    return (
      <MultipleSelect
        selectValue={props.selectValue}
        onSelectChange={props.onSelectChange}
        renderValue={props.renderValue}
      >
        {props.children}
      </MultipleSelect>
    );
  }
  // 此处TS已自动将props识别为SingleSelectProps类型
  return (
    <SingleSelect
      selectValue={props.selectValue}
      onSelectChange={props.onSelectChange}
      renderValue={props.renderValue}
    >
      {props.children}
    </SingleSelect>
  );
};
export default Select;

补充说明 #

• 两个Props接口补充了children属性定义，符合新版React类型规范，避免访问children时报错
• 最终组件用法完全符合你要求的原生select对齐逻辑：
  • 传multiple属性时，TS自动要求selectValue为string[]、onSelectChange入参为字符串数组
  • 不传multiple属性时，TS自动要求selectValue为string、onSelectChange入参为字符串
  • 类型不匹配会直接抛出编译错误，无需任何额外类型断言

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