React TypeScript联合类型Props默认值致onChange类型异常问题

这个问题的核心是TypeScript无法自动关联defaultProps里的variant默认值和对应的onChange参数类型，导致联合类型的类型推断失效，最终onChange参数退化为any。下面提供两种可行的解决方法：

方案1：用函数参数默认值替代defaultProps（推荐） #

React官方现在更建议直接在函数参数中设置默认值，这种方式能让TypeScript更好地进行类型推断，完全避开defaultProps带来的类型问题。

首先定义关联variant和onChange类型的Props：

type DropdownVariant = 'single' | 'multiple';

// 用条件类型根据variant自动推导onChange的参数类型
type DropdownProps<T extends DropdownVariant> = {
  variant: T;
  onChange: T extends 'single' 
    ? (value: string) => void 
    : (value: string[]) => void;
  options: { label: string; value: string }[];
};

然后编写组件时，给variant设置默认参数，并通过泛型默认值指定默认的variant类型：

function Dropdown<T extends DropdownVariant = 'single'>(
  props: DropdownProps<T>
) {
  // 这里用as T确保类型和泛型一致
  const { variant = 'single' as T, onChange, options } = props;
  
  // 组件渲染逻辑...
  return <div>{/* 下拉框内容 */}</div>;
}

使用时的类型表现完全符合预期：

// 不传variant，onChange参数自动推断为string
<Dropdown 
  options={[{ label: '选项1', value: 'opt1' }]} 
  onChange={(value) => console.log(value)} // value类型：string
/>

// 指定variant='multiple'，onChange参数自动推断为string[]
<Dropdown 
  variant="multiple"
  options={[{ label: '选项1', value: 'opt1' }]} 
  onChange={(values) => console.log(values)} // values类型：string[]
/>

方案2：保留defaultProps并手动修正类型 #

如果你一定要保留defaultProps的写法，可以通过泛型和类型断言来强制修正类型关联：

先定义基础Props和带可选variant的Props：

type DropdownVariant = 'single' | 'multiple';

type BaseDropdownProps<T extends DropdownVariant> = {
  variant: T;
  onChange: T extends 'single' 
    ? (value: string) => void 
    : (value: string[]) => void;
  options: { label: string; value: string }[];
};

// 将variant设为可选，用于defaultProps
type DropdownProps<T extends DropdownVariant = 'single'> = 
  Partial<Pick<BaseDropdownProps<T>, 'variant'>> & 
  Omit<BaseDropdownProps<T>, 'variant'>;

然后编写组件并设置defaultProps，最后手动指定组件的默认类型：

function Dropdown<T extends DropdownVariant = 'single'>(props: DropdownProps<T>) {
  const { variant = 'single', onChange, options } = props;
  
  // 组件渲染逻辑...
  return <div>{/* 下拉框内容 */}</div>;
}

Dropdown.defaultProps = {
  variant: 'single'
};

// 手动修正组件类型，确保默认情况下onChange参数类型正确
type DefaultDropdownProps = DropdownProps<'single'>;
const DefaultDropdown = Dropdown as React.FC<DefaultDropdownProps> & {
  defaultProps: { variant: 'single' };
};

这样使用时，默认场景下onChange的参数类型也能被正确推断：

<DefaultDropdown 
  options={[{ label: '选项1', value: 'opt1' }]} 
  onChange={(value) => console.log(value)} // value类型：string
/>

核心逻辑说明 #

通过泛型<T extends DropdownVariant>和条件类型，我们让TypeScript能根据variant的具体值，自动关联对应的onChange参数类型。而使用函数默认参数的方案，能让TypeScript默认将泛型T推断为'single'，从根源上避免了defaultProps导致的类型推断失效问题。

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