React组件函数中类型收窄失效的原因及修复方案

问题说明 #

以下React组件中，通过typeof props.value === 'string'判断出value是字符串类型后，onChange仍保持联合类型，无法自动收窄为对应(value: string) => void类型：

type Props =
  | { value: string; onChange: (value: string) => void }
  | {
      value: Array<string>;
      onChange: (value: Array<string>) => void;
    };

const App = (props: Props) => {
  const func = () => {
    if (typeof props.value === 'string') {
      const val = props.value; // 正确收窄为string类型
      const change = props.onChange; // 仍为联合类型：((value: string) => void) | ((value: string[]) => void)
    }
  };

  return <div></div>;
};

原因是TypeScript默认不会自动关联联合类型中多个属性的匹配关系，仅判断单个属性无法让编译器确定当前props完全符合联合类型的某一个分支。

修复方案 #

方案1：类型断言 #

直接将props断言为目标分支类型，强制收窄onChange的类型：

const App = (props: Props) => {
  const func = () => {
    if (typeof props.value === 'string') {
      const val = props.value;
      const change = (props as { value: string; onChange: (value: string) => void }).onChange;
      // 此时change类型为(value: string) => void
    }
  };

  return <div></div>;
};

注意：需确保判断逻辑准确，否则可能引入类型不安全的风险。

方案2：自定义类型守卫 #

编写类型守卫函数，明确告诉TypeScript如何判断props属于哪个分支：

// 自定义类型守卫，判断props是否为字符串分支
function isStringProps(props: Props): props is { value: string; onChange: (value: string) => void } {
  return typeof props.value === 'string';
}

const App = (props: Props) => {
  const func = () => {
    if (isStringProps(props)) {
      const val = props.value;
      const change = props.onChange; // 自动收窄为(value: string) => void
    }
  };

  return <div></div>;
};

这种方式更安全，适合复杂的类型判断场景。

方案3：使用可辨识联合（推荐） #

给联合类型的每个分支添加唯一的判别属性（如type），让TypeScript自动完成类型收窄：

// 添加type字段作为可辨识属性
type Props =
  | { type: 'string'; value: string; onChange: (value: string) => void }
  | {
      type: 'array';
      value: Array<string>;
      onChange: (value: Array<string>) => void;
    };

const App = (props: Props) => {
  const func = () => {
    if (props.type === 'string') {
      const val = props.value;
      const change = props.onChange; // 自动收窄为(value: string) => void
    }
  };

  return <div></div>;
};

该方案结构清晰，类型收窄完全由编译器自动处理，是最推荐的实现方式。

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