lit-element - lit/lit-element 中的枚举属性

Question

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

Answer 1

I asked this question on Slack and the answers I got lean towards declaring the property as String and use hasChanged() to display a warning in the console if the property value is invalid. Standard HTML elements accept any string as attribute values and don't throw exceptions, so web components should probably behave the same way.

This all sounds reasonable to me.

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关键字可以编译成这样的东西，我会使用它而不是自己滚动。除非您需要验证、循环或转换值，否则字符串是更好的选择。