TypeScript中如何通过error类型收窄自动推断extraData类型

问题原因 #

你遇到的问题本质是：extraData的类型ExtraData[typeof error]在变量声明阶段就被固定为string | number，后续对error的类型收窄不会回溯修改已声明变量的类型关联。而在if块内声明时，typeof error已经被收窄为具体的错误码，所以类型计算是基于收窄后的结果，自然能正确推断。

解决方案 #

方案1：封装联合类型对象（最推荐） #

将错误码和对应的关联数据封装成联合类型对象，让TypeScript自动关联两者的类型关系，无需手动维护类型守卫，扩展性也更好。

export enum ErrorCodes {
  Unknown = 'UNKWN',
  BadRequest = 'BDREQ',
}

// 定义每个错误码对应的完整结构
type ErrorWithExtra = 
  | { code: ErrorCodes.Unknown; extraData: string }
  | { code: ErrorCodes.BadRequest; extraData: number };

// 使用时直接声明联合类型变量
let errorWithExtra: ErrorWithExtra;

if (errorWithExtra.code === ErrorCodes.Unknown) {
  console.log(errorWithExtra.extraData); // 自动推断为string
}

if (errorWithExtra.code === ErrorCodes.BadRequest) {
  console.log(errorWithExtra.extraData); // 自动推断为number
}

这种方式不仅能自动完成类型收窄，后续新增错误码时，只需要在ErrorWithExtra里新增对应的分支即可，类型检查会自动覆盖所有场景。

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

如果无法修改现有变量结构，可以通过自定义类型守卫函数，手动建立error和extraData的类型关联，实现收窄。

export enum ErrorCodes {
  Unknown = 'UNKWN',
  BadRequest = 'BDREQ',
}

interface ExtraData {
  [ErrorCodes.Unknown]: string,
  [ErrorCodes.BadRequest]: number,
}

let error: ErrorCodes;
let extraData: ExtraData[typeof error];

// 自定义类型守卫，同时收窄error和extraData的类型
function isErrorOfType<T extends ErrorCodes>(
  err: ErrorCodes,
  extra: ExtraData[ErrorCodes],
  targetCode: T
): extra is ExtraData[T] {
  return err === targetCode;
}

// 使用类型守卫进行判断
if (isErrorOfType(error, extraData, ErrorCodes.Unknown)) {
  console.log(extraData); // 正确推断为string
}

if (isErrorOfType(error, extraData, ErrorCodes.BadRequest)) {
  console.log(extraData); // 正确推断为number
}

为什么原写法不生效 #

原代码中，extraData的类型是在声明时通过ExtraData[typeof error]计算的，此时error的类型是整个ErrorCodes枚举，所以extraData被推断为string | number。后续对error的类型收窄只是缩小了error变量的类型范围，但不会重新计算extraData的类型——因为TypeScript不会认为两者的类型关联会随error的变化而动态改变。

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