如何解决TypeScript if语句中的“类型不可赋值”错误？

问题描述 #

我有两组键集合：

• KEY_SET_1：包含键A至D
• KEY_SET_2：包含键E至H

编写函数分别处理这两组键时，出现类型错误：

Argument of type 'AllKeySetType' is not assignable to parameter of type '"A" | "B" | "C" | "D"'. Type '"E"' is not assignable to type '"A" | "B" | "C" | "D"'.

尝试将key断言为KeySet1Type能消除错误，但不确定这是否是最优方案。

相关代码：

const KEY_SET_1 = ['A', 'B', 'C', 'D'] as const;
const KEY_SET_2 = ['E', 'F', 'G', 'H'] as const;

type KeySet1Type = (typeof KEY_SET_1)[number];
type KeySet2Type = (typeof KEY_SET_2)[number];
type AllKeySetType = KeySet1Type | KeySet2Type;

const handleKey = (key: AllKeySetType) => {
  if (KEY_SET_1.includes(key)){ // <- 此处报错
    // 处理KEY_SET_1的键
  }else{
    // 处理KEY_SET_2的键
  }
}

原因分析 #

TypeScript对const断言后的数组，会将其includes方法的参数类型严格限制为数组元素类型。这里KEY_SET_1.includes只接受KeySet1Type类型的参数，但传入的key是AllKeySetType（包含KeySet2Type的可能），所以类型检查不通过。直接断言key为KeySet1Type虽然能消错，但会跳过类型检查，存在安全隐患。

最佳解决方案 #

方案1：自定义类型守卫函数（最安全） #

通过类型守卫让TypeScript正确识别分支内的类型：

const KEY_SET_1 = ['A', 'B', 'C', 'D'] as const;
const KEY_SET_2 = ['E', 'F', 'G', 'H'] as const;

type KeySet1Type = (typeof KEY_SET_1)[number];
type KeySet2Type = (typeof KEY_SET_2)[number];
type AllKeySetType = KeySet1Type | KeySet2Type;

// 自定义类型守卫，判断key是否属于KEY_SET_1
const isKeySet1 = (key: AllKeySetType): key is KeySet1Type => {
  return (KEY_SET_1 as readonly string[]).includes(key);
};

const handleKey = (key: AllKeySetType) => {
  if (isKeySet1(key)){
    // 此处key被自动推断为KeySet1Type
    console.log('处理KEY_SET_1的键:', key);
  }else{
    // 此处key被自动推断为KeySet2Type
    console.log('处理KEY_SET_2的键:', key);
  }
}

临时将KEY_SET_1断言为readonly string[]是为了让includes接受AllKeySetType参数，而类型守卫的返回值key is KeySet1Type会告诉TypeScript分支内的准确类型，既安全又不丢失类型推断能力。

方案2：给includes指定类型参数（最简洁） #

直接为includes显式声明兼容的泛型参数：

const handleKey = (key: AllKeySetType) => {
  if (KEY_SET_1.includes<AllKeySetType>(key)){
    // 处理KEY_SET_1的键
  }else{
    // 处理KEY_SET_2的键
  }
}

这种方式无需额外函数，通过指定泛型参数让TypeScript允许传入AllKeySetType类型的参数，同时分支内的类型也能被正确推断。

方案3：对象映射（适合复杂逻辑） #

如果两组键的处理逻辑差异较大，用对象映射替代条件判断，代码更优雅且类型安全：

const KEY_HANDLERS = {
  A: () => console.log('处理A'),
  B: () => console.log('处理B'),
  C: () => console.log('处理C'),
  D: () => console.log('处理D'),
  E: () => console.log('处理E'),
  F: () => console.log('处理F'),
  G: () => console.log('处理G'),
  H: () => console.log('处理H'),
} as const;

type AllKeySetType = keyof typeof KEY_HANDLERS;

const handleKey = (key: AllKeySetType) => {
  KEY_HANDLERS[key]();
}

这种方式完全避免了条件判断，TypeScript会自动校验key的合法性，同时每个键的处理逻辑清晰分离。

总结 #

• 优先选择自定义类型守卫或给includes指定类型参数，兼顾安全性与可读性；
• 不推荐直接断言key类型，会丢失TypeScript的类型检查保护；
• 处理逻辑复杂时，对象映射是更优雅的实现方式。

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