typescript - 枚举值数组 : check for Enum keys with Array. 包括？

Question

我有以下 TypeScript 枚举:

export enum Brennstoff {
    OEL = "Öl",
    GAS = "Gas",
    SOLAR = "Solar",
}

我有一个 Brennstoff 的多选输入，它返回一个键数组:

const selected = ["GAS", "SOLAR"]

如何检查数组是否包含条目？以下不起作用

selected.includes(Brennstoff.GAS)

Playground link

因为 Brennstoff.GAS 返回 Gas，所以它寻找值，但是我需要寻找键。

我如何在 TypeScript 中执行此操作？

Answer 1

简介 & TL;DR

为您提供两种解决方案，这两种解决方案都依赖于我们将在下面进行的少量设置:

1. 对 selected 使用更严格的类型，因此它只能包含有效的 Brennstoff 键，它看起来像:

   console.log(selected.some(key => Brennstoff[key] === Brennstoff.GAS)); // true
   console.log(selected.some(key => Brennstoff[key] === Brennstoff.OEL)); // false
   

2. 将选中作为string[]，它看起来像:

   console.log(selected.some(key => isBrennstoffKey(key) && Brennstoff[key] === Brennstoff.GAS)); // true
   console.log(selected.some(key => isBrennstoffKey(key) && Brennstoff[key] === Brennstoff.OEL)); // false
   

验证 key

这两种解决方案都涉及验证字符串是否是有效的 Brennstoff 键，所以让我们先看一下:

您可以使用类型断言函数来验证键。 Brennstoff 键的类型是 keyof typeof Brennstoff，但您可能会发现为其设置别名很有用:

type BrennstoffKey = keyof typeof Brennstoff;

然后断言函数看起来像这样:

const BrennstoffKeys = new Set(Object.keys(Brennstoff));
function assertBrennstoffKey(key: string): asserts key is BrennstoffKey {
    if (!BrennstoffKeys.has(key)) {
        throw new Error(`Invalid Brennstoff key "${key}"`);
    }
}

(您不必使用Set，您可以在每次要进行验证时调用Object.keys。)

我冒昧地假设每个值只有一个键。

我发现我经常需要类型保护版本和断言版本；该组合将类似于:

const BrennstoffKeys = new Set(Object.keys(Brennstoff));
function isBrennstoffKey(key: string): key is BrennstoffKey {
    return BrennstoffKeys.has(key);
}
function assertBrennstoffKey(key: string): asserts key is BrennstoffKey {
    if (!isBrennstoffKey(key)) {
        throw new Error(`Invalid Brennstoff key "${key}"`);
    }
}

有了这些，让我们看看两种方法......

对selected使用更严格的类型

如果 selected 将包含来自 Brennstoff 的键名，那么我建议以这种方式声明它 — BrennstoffKey[] :

const selected: BrennstoffKey[] = [];

然后在添加之前验证字符串:

let key: string = /*...*/;
assertBrennstoffKey(key);
selected.push(key);

要检查它是否有键，因为 selected 的类型足够严格，我们可以使用 some 来查看它是否有特定值的键其中:

console.log(selected.some(key => Brennstoff[key] === Brennstoff.GAS)); // true
console.log(selected.some(key => Brennstoff[key] === Brennstoff.OEL)); // false

Playground link

selected 为 string[]

如果您希望将 selected 保留为 string[]，那么我们会在进行检查时应用验证:

如果您乐于做一些前期准备(也许只是在定义 Brennstoff 之后)，这非常简单:

console.log(selected.some(key => isBrennstoffKey(key) && Brennstoff[key] === Brennstoff.GAS)); // true
console.log(selected.some(key => isBrennstoffKey(key) && Brennstoff[key] === Brennstoff.OEL)); // false

Playground link