使用const对象作为常量时出现TypeScript类型错误的问题

我在代码中使用const对象存储常量时遇到了TypeScript类型错误：testA函数没有类型问题，但testB函数报错Argument of type 'string' is not assignable to parameter of type '"04" | "01"'。我认为硬编码值和引用常量应该等价，相关代码如下：

function testA(a:string){
    const ans = ['04','01'].includes(a)
    console.log(ans)
}

function testB(a:string){
    const ans = [cat.green, cat.yellow].includes(a)
    console.log(ans)
}

const cat={
    "yellow": "01",
    "red":"02",
    "green": "04"
} as const

问题原因 #

这是因为TypeScript对两种数组的类型推断逻辑存在差异：

• testA里的['04','01']被推断为("04" | "01")[]类型，数组的includes方法参数会自动放宽为string，因此可以接收a:string参数。
• 而[cat.green, cat.yellow]由于cat被as const断言，这个数组会被推断为只读元组类型["04", "01"]，它的includes方法参数被严格限制为元组元素的联合类型"04" | "01"，但函数参数a是范围更广的string类型，因此触发类型不匹配错误。

解决方法 #

有几种可行的解决方式：

1. 显式指定数组为string[]类型

直接把常量数组的类型拓宽为普通字符串数组，让includes接受string参数：

function testB(a:string){
    const ans = [cat.green, cat.yellow] as string[];
    console.log(ans)
}

2. 断言参数类型匹配常量联合类型

如果不想改变数组类型，可以把函数参数断言为常量的联合类型：

function testB(a:string){
    const ans = [cat.green, cat.yellow].includes(a as "04" | "01");
    console.log(ans)
}

3. 用类型别名统一常量类型

先提取cat对象的值类型，再用这个类型做断言，更便于后续维护：

type CatColorValue = typeof cat[keyof typeof cat];

function testB(a:string){
    const ans = [cat.green, cat.yellow].includes(a as CatColorValue);
    console.log(ans)
}

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