为什么TypeScript函数内用类型守卫后返回值类型未被收窄

核心原因 #

1. 类型守卫的类型收窄效果仅在当前作用域块内生效，无法穿透函数作用域影响外部的类型推导结果。
2. TypeScript 仅依据函数的公开签名判断调用后的返回类型，不会读取函数内部实现逻辑做反向推导。你当前的函数签名明确声明返回值为联合类型 Ex，因此调用端拿到的返回值自然会被推导为 Ex 而非更窄的子类型。

解决方案 #

如果你的逻辑符合「输入什么类型的参数就返回什么类型的参数」，可以通过泛型约束实现入参与返回值的类型关联：

type Ex1 = {
  contents: 'contents',
  param1: 'yes'
}

type Ex2 = {
  contents: 'contents',
  param2: true
}

type Ex = Ex1 | Ex2;

// 泛型T约束为Ex的子类型，入参和返回值类型均为T
export const exampleFunc = <T extends Ex>(example: T): T => {
  const isEx1 = (unknownExample: Ex): unknownExample is Ex1 => {
    // 原三元判断可简化为in运算符判断属性是否存在
    return 'param1' in unknownExample;
  }

  const execute = (): T => {
    if (isEx1(example)) {
      return example;
    }
    return example;
  }

  return execute()
}

// 调用测试
const ex1: Ex1 = {
  contents: 'contents',
  param1: 'yes'
}
const test = exampleFunc(ex1);
// 此时test类型被正确推导为Ex1，访问test.param1不会触发类型错误

如果实际场景中返回值类型和入参类型不是完全对等，而是根据入参类型映射不同返回类型，可以使用函数重载显式声明不同入参对应的返回类型：

// 重载签名，对外暴露的类型规则
export function exampleFunc(example: Ex1): Ex1;
export function exampleFunc(example: Ex2): Ex2;
// 实现签名，仅供给内部实现使用
export function exampleFunc(example: Ex): Ex {
  const isEx1 = (unknownExample: Ex): unknownExample is Ex1 => {
    return 'param1' in unknownExample;
  }
  if (isEx1(example)) {
    return example;
  }
  return example;
}

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