Vue3+TypeScript中Type 'string'无法赋值给'never'报错的解决方法

问题复现 #

以下代码中，使用枚举类型定义响应式数据后，尝试反转字符串赋值时出现TypeScript类型错误：

enum A {
  GIRL = "Girl",
  BOY = "Boy",
}

interface AI {
  a: A;
}
const opt = reactive<AI>({
  a: A.GIRL,
})
const optArr = [
  {
    category: "a",
    buts: [A.GIRL, A.BOY],
  },
]

// 尝试反转字符串赋值，运行结果正确但TS报错
let str = opt[optArr[0].category as keyof typeof opt]
opt[optArr[0].category as keyof typeof opt] = str.split("").reverse().join("")
console.log(opt[optArr[0].category as keyof typeof opt])

报错信息：Type 'string' is not assignable to type 'never'.ts(2322)

而将枚举替换为普通字符串类型时，无此报错。

原因分析 #

枚举A的成员是固定的字符串字面量类型（仅"Girl"和"Boy"），但split("").reverse().join("")返回的是宽泛的string类型，TypeScript无法确认该字符串属于A的成员范围。同时，通过keyof typeof opt进行键访问时，类型推导出现异常收窄，最终导致赋值目标类型被推断为never，触发类型不兼容错误。普通字符串类型没有固定字面量限制，因此不会出现该问题。

修复方案 #

方案1：调整接口类型（推荐，贴合实际业务逻辑） #

由于实际业务中需要赋值非枚举成员的字符串（反转后的结果），将接口AI中a的类型从枚举A改为string：

enum A {
  GIRL = "Girl",
  BOY = "Boy",
}

interface AI {
  a: string; // 修改为string类型，允许任意字符串赋值
}
const opt = reactive<AI>({
  a: A.GIRL,
})

// 后续赋值代码无需修改，不再报错
let str = opt[optArr[0].category as keyof typeof opt]
opt[optArr[0].category as keyof typeof opt] = str.split("").reverse().join("")

方案2：使用类型断言强制赋值（类型不安全，谨慎使用） #

若必须保留枚举类型定义，可通过类型断言绕过TypeScript的类型检查，但需注意反转后的字符串并不属于枚举A的成员，可能带来潜在类型风险：

let str = opt[optArr[0].category as keyof typeof opt]
// 断言为A类型，强制通过类型检查
opt[optArr[0].category as keyof typeof opt] = str.split("").reverse().join("") as A;

方案3：使用字符串字面量类型替代枚举 #

如果不需要枚举的其他特性，可将枚举替换为字符串字面量类型，若需支持反转后的字符串，同样需要调整为string类型：

type A = "Girl" | "Boy";

interface AI {
  a: string; // 或保留A类型，但赋值时需断言
}
const opt = reactive<AI>({
  a: "Girl",
})

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