lit/lit-element中的枚举属性

Question

我们正在尝试构建一个具有属性variant的组件，该属性仅应设置为"primary"或"secondary" (枚举)。目前，我们只是将属性声明为字符串，但我们想知道是否有更好的方法来处理枚举？例如，我们是否应该以某种方式验证当前值是枚举的一部分？如果不是，我们应该抛出一个错误吗？

Answer 1

我在Slack上问了这个问题，得到的答案倾向于将属性声明为字符串，并使用hasChanged()在属性值无效时在控制台中显示警告。标准的HTML元素接受任何字符串作为属性值，并且不会抛出异常，因此web组件可能也应该以同样的方式工作。

对我来说，这一切听起来都是合理的。

Answer 2

如果你使用的是TypeScript，我建议你只使用字符串。您可以使用export type MyEnum = 'primary' | 'secondary'来声明它，然后使用@property() fooBar: MyEnum来获得构建时检查。您也可以使用@ts-check在纯JS中使用@type MyEnum来完成此操作。

如果枚举用于组件选项或映射到将再次验证的服务器端枚举，则此方法效果很好。

但是，如果您想要验证用户输入到枚举中或多次遍历它们，这就不太好了。当JS运行时，它没有该类型的可见性。您需要一个对象字典，类似于：

const MyEnum = Object.freeze({
    primary: 'primary',
    secondary: 'secondary'
});

// Enforce type in TS
const value: keyof MyEnum;

// Validate
const validated = MyEnum[input.toLower()];

// Loop
for(const enumVal of Object.keys(MyEnum)) ...

// Or Convert to a different value type
const MyEnum = Object.freeze({
    primary: 1,
    secondary: 2
});

这些都有些特殊。同样，如果你使用的是TypeScript，它有一个enum关键字，它编译成类似这样的东西，我会使用它，而不是使用你自己的。字符串是更好的选择，除非您需要验证、循环或转换值。