TypeScript数组字面量约束：includes类型不兼容问题排查与解决

问题场景 #

现有以下TypeScript基础代码：

export const LETTERS = {
    // internal
    a: 'a',
    // external
    b: 'b',
    c: 'c',
} as const;

export const internalLetters = [
    LETTERS.a,
] as const;

export type LETTER_TYPE = typeof LETTERS[keyof typeof LETTERS];

需要编写辅助函数isInternal，接收任意LETTER_TYPE类型的字母并判断其是否为内部字母，写出的代码如下，但出现类型错误：

const isInternal = (letter: LETTER_TYPE) => internalLetters.includes(letter);

问题原因 #

internalLetters通过as const声明为只读数组，TypeScript会将它的类型精确推断为readonly ["a"]。而Array.prototype.includes的参数类型默认限制为数组元素的子类型（此处即"a"），但传入的letter是LETTER_TYPE类型，也就是"a" | "b" | "c"，这个类型范围比数组元素类型宽，TypeScript判定参数类型不兼容，因此抛出类型错误。

解决方案 #

方案一：类型断言 #

在调用includes时，将letter断言为数组元素的类型，直接绕过类型检查：

const isInternal = (letter: LETTER_TYPE) => internalLetters.includes(letter as typeof internalLetters[number]);

方案二：拓宽数组类型 #

修改internalLetters的类型声明，将其拓宽为readonly LETTER_TYPE[]，让includes的参数兼容LETTER_TYPE：

// 使用satisfies确保数组元素都是LETTER_TYPE的同时，拓宽类型
export const internalLetters = [
    LETTERS.a,
] as const satisfies readonly LETTER_TYPE[];

// 或者直接显式声明类型
// export const internalLetters: readonly LETTER_TYPE[] = [LETTERS.a] as const;

方案三：自定义类型守卫 #

如果需要让函数具备类型缩小的能力，可以编写类型守卫函数，这样在判断后TypeScript会自动识别变量的具体类型：

const isInternal = (letter: LETTER_TYPE): letter is typeof internalLetters[number] => {
    return internalLetters.includes(letter as typeof internalLetters[number]);
};

// 使用示例：
const testLetter: LETTER_TYPE = "a";
if (isInternal(testLetter)) {
    // 此处testLetter的类型会被缩小为"a"
    console.log(testLetter);
}

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