如何检查超集字符串是否存在于TypeScript联合类型数组中

嘿，这问题我熟！你遇到的是TypeScript类型收窄导致的典型报错——因为你的validOptions数组被严格限定为("foo" | "bar")[]，它的indexOf方法只接受"foo"或"bar"类型的参数，但key是IArrType | "alien"，包含了超出数组元素类型的取值，TypeScript出于类型安全就拦下来了。

下面给你几个实用的修复方案，按需选择：

方案1：类型断言（快速绕过检查） #

如果你只是单纯想做存在性判断，确定运行时即使key是"alien"也不会有问题，可以用类型断言告诉TypeScript“我知道我在做什么”：

// 推荐用`as`语法，避免和JSX的尖括号语法冲突
const isKeyValidCast = validOptions.indexOf(key as IArrType) > -1;

⚠️ 注意：这个方案只是绕过了类型检查，并没有改变运行时逻辑——如果key是"alien"，判断结果依然是false，但如果你后续基于这个断言做其他操作（比如把key当作IArrType去调用方法），可能会有风险，所以只适合单纯判断存在性的场景。

方案2：类型守卫+includes（兼顾类型安全与运行时检查） #

这是更推荐的方案，既能做运行时检查，又能让TypeScript自动收窄类型：

// 定义一个类型谓词函数，同时做运行时检查和类型声明
function isValidKey(key: unknown): key is IArrType {
  // 这里的断言是因为includes默认只接受IArrType类型，所以先转一下
  return validOptions.includes(key as IArrType);
}

// 使用时
const isKeyValid = isValidKey(key);
// 当isKeyValid为true时，TypeScript会自动把key的类型收窄为IArrType
if (isKeyValid) {
  console.log(`Valid key: ${key}`); // 这里key的类型是"foo" | "bar"，完全安全
}

这种方式的好处是，后续代码里只要通过了这个守卫，就能安全地使用key，不会有类型报错，同时运行时也确实做了检查。

方案3：放宽数组类型（适合灵活场景） #

如果你的业务场景不需要严格限制validOptions的元素类型，只是想检查字符串是否在数组里，可以把数组类型放宽为string[]：

const validOptions: string[] = ["foo", "bar"];
type IArrType = typeof validOptions[number]; // 依然是"foo" | "bar"，不受影响
const key: IArrType | "alien" = "alien";
const isKeyInArr = validOptions.indexOf(key) > -1; // 现在不会报错了

但要注意，这样validOptions后续可以被添加任意字符串（比如validOptions.push("baz")），如果需要严格限制数组只能包含"foo"和"bar"，这个方案就不适用。

内容的提问来源于stack exchange，提问作者Jørgen Tvedt