TypeScript中基于nullable的组件条件类型异常问题解决

问题描述 #

定义了如下联合类型：

type Criteria = 'Criterion A' | 'Criterion B';
type NoCriteria = 'NO CRITERIA';

type Props = {
  label?: string;
  required?: boolean;
  disabled?: boolean;
} & (
  | {
      onChange: (
        event: MouseEvent,
        value: Criteria | NoCriteria | null,
      ) => void;
      value: Criteria | NoCriteria | null;
      nullable?: true;
    }
  | {
      onChange: (
        event: MouseEvent,
        value: Criteria | NoCriteria,
      ) => void;
      value: Criteria | NoCriteria;
      nullable: false;
    }
);

期望nullable为true时，onChange的参数可以接受null；为false时只能接受非null值。但在组件中给nullable设置默认值true后，TypeScript却将onChange推断为仅接受Criteria | NoCriteria的类型，导致调用时传入null报错：

const NullableComponent = ({
  label,
  value,
  onChange,
  required = false,
  nullable = true,
  disabled = false,
}: Props) => {
  const handleNoCriteriaToggleChange = (
    event: MouseEvent,
    newValue: 'NO CRITERIA' | null,
  ) => {
    if (!nullable) {
      onChange(event, 'NO CRITERIA');
      return;
    }
    onChange(event, newValue ?? null); // 此处报错：类型null不能赋值给Criteria | NoCriteria
  };
};

原因分析 #

TypeScript处理联合类型解构时，会取所有分支中同名属性的类型交集。Props的两个分支中，onChange的类型分别是接受null和不接受null的函数，它们的交集是仅接受非null值的函数。因此即使设置了nullable的默认值，TypeScript也无法自动根据默认值缩小联合类型范围，导致推断错误。

解决方案 #

方法一：使用泛型关联nullable与类型（推荐，类型安全）

将Props定义为泛型类型，通过泛型参数TNullable关联nullable属性和value/onChange的类型：

type Criteria = 'Criterion A' | 'Criterion B';
type NoCriteria = 'NO CRITERIA';

// 泛型Props，默认TNullable为true
type Props<TNullable extends boolean = true> = {
  label?: string;
  required?: boolean;
  disabled?: boolean;
  nullable?: TNullable;
} & (TNullable extends true 
  ? {
      onChange: (event: MouseEvent, value: Criteria | NoCriteria | null) => void;
      value: Criteria | NoCriteria | null;
    }
  : {
      onChange: (event: MouseEvent, value: Criteria | NoCriteria) => void;
      value: Criteria | NoCriteria;
    }
);

// 定义泛型组件，默认TNullable为true
const NullableComponent = <TNullable extends boolean = true>({
  label,
  value,
  onChange,
  required = false,
  nullable = true as TNullable, // 断言默认值符合泛型类型
  disabled = false,
}: Props<TNullable>) => {
  const handleNoCriteriaToggleChange = (
    event: MouseEvent,
    newValue: 'NO CRITERIA' | null,
  ) => {
    if (!nullable) {
      onChange(event, 'NO CRITERIA' as const);
      return;
    }
    onChange(event, newValue ?? null); // 此时类型推断正确，无报错
  };
};

方法二：类型断言临时窄化onChange类型

如果不想修改Props定义，可以在调用onChange时通过类型断言明确指定其类型：

const NullableComponent = ({
  label,
  value,
  onChange,
  required = false,
  nullable = true,
  disabled = false,
}: Props) => {
  const handleNoCriteriaToggleChange = (
    event: MouseEvent,
    newValue: 'NO CRITERIA' | null,
  ) => {
    if (!nullable) {
      // 断言为非null分支的onChange类型
      (onChange as (event: MouseEvent, value: Criteria | NoCriteria) => void)(event, 'NO CRITERIA');
      return;
    }
    // 断言为可接受null的onChange类型
    (onChange as (event: MouseEvent, value: Criteria | NoCriteria | null) => void)(event, newValue ?? null);
  };
};

注意：此方法依赖开发者保证类型断言的正确性，存在一定类型风险，不如泛型方案安全。

额外注意点 #

原代码中'No Criteria'字符串大小写与NoCriteria类型定义的'NO CRITERIA'不匹配，会导致类型错误，需修正为一致的字符串。

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