TypeScript中从回调函数返回泛型类型的正确写法

你原有代码的报错原因有两点：

• 箭头函数的泛型<T>在支持JSX的TS解析环境中会被误识别为JSX标签，触发语法错误
• 当传入值为0时，两个正负判断分支都不会命中，函数隐式返回undefined，和类型声明的返回路径不匹配，触发类型校验错误

可直接运行的标准实现 #

const callSelectedCallback = <T,>(
  callbackForPositiveValue: () => T,
  callbackForNegativeValue: () => T,
  value: number,
): T | undefined => {
  if (value > 0) {
    return callbackForPositiveValue();
  }
  if (value < 0) {
    return callbackForNegativeValue();
  }
  // 显式覆盖值为0的边界场景返回
  return undefined;
};

关键语法说明 #

• 泛型写法<T,>是TS官方推荐的箭头函数泛型兼容写法，后缀的逗号可以明确告诉解析器这是泛型声明而非JSX标签，在.ts、.tsx文件中都能正常编译
• 显式补充0值分支的返回逻辑，消除隐式返回带来的类型不匹配问题
• 如果业务场景要求传入值不可能为0，可以通过 branded type 收紧入参类型，此时返回值不需要包含undefined：

// 定义非0数值类型
type NonZero = number & { _brand: 'non-zero' };
const callSelectedCallback = <T,>(
  callbackForPositiveValue: () => T,
  callbackForNegativeValue: () => T,
  value: NonZero,
): T => {
  return value > 0 ? callbackForPositiveValue() : callbackForNegativeValue();
};

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