TypeScript函数体内泛型无法正确推断的问题排查

这个问题的核心在于TypeScript泛型条件类型的特性：当你用泛型参数IsClearable定义onChange的条件类型时，泛型参数是在函数调用时确定的，但在函数内部，TypeScript无法通过isClearable的运行时值反向收窄泛型参数的具体类型。也就是说，即使你判断了isClearable === true，TypeScript依然认为IsClearable可能是宽泛的boolean类型（而非确定的true），所以onChange的类型还是原始的条件类型，不会自动切换到允许undefined参数的分支。

方案1：使用可辨识联合类型（最推荐） #

把Props改成联合类型，明确区分isClearable为true和false的两种情况，TypeScript会通过isClearable这个"辨识符"自动收窄onChange的类型：

type Props = 
  // isClearable为false或不传入时的类型
  | { isClearable?: false; onChange: (v: number) => number }
  // isClearable为true时的类型
  | { isClearable: true; onChange: (v?: number) => number };

function Thing({ isClearable, onChange }: Props): number {
  if (isClearable) {
    onChange(undefined); // 类型正确，无报错
  } else {
    onChange(1);
  }
  return 1;
}

// 调用时类型推断依然正常
Thing({
  onChange: (v) => 1, // v的类型为number
});

Thing({
  isClearable: true,
  onChange: (v) => 1, // v的类型为number | undefined
});

这种方式完全符合TypeScript类型系统设计，类型安全且无需额外代码，是最优解。

方案2：自定义类型守卫收窄泛型参数 #

如果想保留泛型定义，可以自定义类型守卫函数，帮助TypeScript把isClearable的类型收窄为true，从而联动收窄onChange的类型：

interface Props<IsClearable extends boolean = false> {
  isClearable?: IsClearable;
  onChange: IsClearable extends true
    ? (v?: number) => number
    : (v: number) => number;
}

// 自定义类型守卫，判断值是否为true
function isTrue(val: boolean): val is true {
  return val === true;
}

function Thing<IsClearable extends boolean = false>({
  isClearable,
  onChange,
}: Props<IsClearable>): number {
  if (isTrue(isClearable)) {
    onChange(undefined); // 类型正确收窄
  } else {
    onChange(1);
  }
  return 1;
}

方案3：类型断言（简单但不安全） #

如果只是临时快速解决问题，可以用类型断言强制指定onChange的类型，但这种方式需要你自己保证逻辑正确，TypeScript不会再做类型检查：

function Thing<IsClearable extends boolean = false>({
  isClearable,
  onChange,
}: Props<IsClearable>): number {
  if (isClearable) {
    // 断言onChange为允许undefined参数的类型
    (onChange as (v?: number) => number)(undefined);
  } else {
    onChange(1);
  }
  return 1;
}

不推荐在大型项目中使用这种方式，一旦逻辑出错，TypeScript无法帮你发现问题。

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