TypeScript为何无法自动推断与表单ID关联的状态变量类型？

问题场景 #

已定义FORM_ID枚举、FormIdToFormValues类型映射各表单ID对应的状态类型，并实现泛型函数getNextRoute。但在switch语句中判断formId为FORM_ID.STEP_1时，TypeScript无法自动推断state为Step1FormValues类型，报错提示属性'a'不存在于联合类型上。

代码示例 #

export enum FORM_ID {
  STEP_1 = 'step1',
  STEP_2 = 'step2',
  STEP_3 = 'step3',
}

export type FormIdToFormValues = {
  [FORM_ID.STEP_1]: Step1FormValues;
  [FORM_ID.STEP_2]: Step2FormValues;
  [FORM_ID.STEP_3]: Step3FormValues;
};

type Step1FormValues = {
    a: string
}
type Step2FormValues = {
    b: string
}

type Step3FormValues = {
    c: string
}

// Define the type of the state parameter
type StateType<F extends FORM_ID> = FormIdToFormValues[F];

export const getNextRoute = <F extends FORM_ID>(formId: F, state: StateType<F>) => {
  switch (formId) {
    case FORM_ID.STEP_1:
      // Error happens here -----
      if (state?.a) {
        return '/step-3';
      }
      return '/step-2';
    default:
      return '/';
  }
};

错误详情 #

Property 'a' does not exist on type 'Step1FormValues | Step2FormValues | Step3FormValues'.
  Property 'a' does not exist on type 'Step2FormValues'.

问题原因 #

FormIdToFormValues映射本身是正确的，但泛型约束F extends FORM_ID意味着函数getNextRoute可以接受任意FORM_ID枚举值作为参数。此时TypeScript无法通过switch中的case FORM_ID.STEP_1反向缩小泛型参数F的范围，因此state的类型依然是Step1FormValues | Step2FormValues | Step3FormValues的联合类型，而非预期的Step1FormValues。

解决办法 #

方案一：自定义类型守卫手动关联类型 #

编写类型守卫函数，明确绑定formId和state的对应关系，让TypeScript能正确推断类型：

// 自定义类型守卫
function isStep1State(formId: FORM_ID, state: FormIdToFormValues[FORM_ID]): state is Step1FormValues {
  return formId === FORM_ID.STEP_1;
}

export const getNextRoute = <F extends FORM_ID>(formId: F, state: StateType<F>) => {
  if (isStep1State(formId, state)) {
    if (state.a) {
      return '/step-3';
    }
    return '/step-2';
  }
  // 其他case的处理逻辑
  return '/';
};

方案二：使用可辨识联合（推荐） #

将函数参数改为绑定formId和state的联合类型，利用TypeScript的可辨识联合特性，让switch自动完成类型推断：

// 定义绑定formId和state的联合类型
type FormRouteParams = {
  [K in FORM_ID]: { formId: K; state: FormIdToFormValues[K] }
}[FORM_ID];

export const getNextRoute = (params: FormRouteParams) => {
  switch (params.formId) {
    case FORM_ID.STEP_1:
      // 自动推断params.state为Step1FormValues
      if (params.state?.a) {
        return '/step-3';
      }
      return '/step-2';
    case FORM_ID.STEP_2:
      if (params.state?.b) {
        return '/step-1';
      }
      return '/step-3';
    case FORM_ID.STEP_3:
      return '/';
    default:
      return '/';
  }
};

这种方式更贴合TypeScript类型系统设计，兼顾可读性与类型安全性。

方案三：类型断言（不推荐） #

如果只是临时快速解决，可以用类型断言强制指定state类型，但会跳过TypeScript的类型检查，存在安全隐患：

export const getNextRoute = <F extends FORM_ID>(formId: F, state: StateType<F>) => {
  switch (formId) {
    case FORM_ID.STEP_1:
      const step1State = state as Step1FormValues;
      if (step1State?.a) {
        return '/step-3';
      }
      return '/step-2';
    default:
      return '/';
  }
};

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