TypeScript未检测到类型收窄：类型不兼容报错如何修复？

问题代码 #

function encodeToken(value: number | string | null | undefined) {
  if (value !== null && value !== undefined) {
    value = value.toString()
  }

  return encodeBase64(value) // typescript complains this line
}

function encodeBase64(value: string | null | undefined) { ... }

报错信息 #

(parameter) value: string | number
Argument of type 'string | number' is not assignable to parameter of type 'string'.
Type 'number' is not assignable to type 'string'

问题原因 #

TypeScript对函数参数的类型收缩存在限制：尽管你在分支中把number类型的value转换为了string，但函数参数的类型仍被视为原始的联合类型string | number | null | undefined，TypeScript无法自动识别赋值后的类型变更，因此认为传入encodeBase64的参数可能是number类型，导致报错。

解决方案 #

方案1：使用临时变量跟踪类型 #

通过临时变量接收参数，让TypeScript能正确跟踪类型变更，这是最安全的方式：

function encodeToken(value: number | string | null | undefined) {
  let processedValue = value;
  if (processedValue !== null && processedValue !== undefined) {
    processedValue = processedValue.toString();
  }
  return encodeBase64(processedValue);
}

方案2：使用类型断言 #

如果能确保逻辑的正确性，可以直接通过类型断言告诉TypeScript参数的实际类型：

function encodeToken(value: number | string | null | undefined) {
  if (value !== null && value !== undefined) {
    value = value.toString()
  }

  return encodeBase64(value as string | null | undefined);
}

方案3：重构为提前返回逻辑 #

提前处理null/undefined的情况，让后续逻辑的类型更清晰：

function encodeToken(value: number | string | null | undefined) {
  if (value === null || value === undefined) {
    return encodeBase64(value);
  }
  // 此处value的类型已收缩为string | number，转换后直接传入
  return encodeBase64(value.toString());
}

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