如何确保在 Typescript 中正确输入了我的 Lit 元素组件道具

Question

我有一个库，我想在其中为所有不同的框架创建一个按钮。 所有这些组件道具都应该具有来自 Typescript 接口的单一事实来源：

interface BaseButton {
    tiny: boolean;
    color: string;
}

如何确保根据该界面正确键入我的 Lit 元素属性？

@customElement("my-button")
export class MyButton extends LitElement {
    @property({ type: Boolean })
    tiny = true;

    @property({ type: String })
    color = "red";
    ....
}

Answer 1

只需实现接口。

一般示例：

interface MyInterface {
  foo: boolean;
  bar: string;
}

// Invalid
class MyClass implements MyInterface {
  // TS2416
  foo: string;
  bar: boolean;
}

// Valid
class MyClass implements MyInterface {
  foo: boolean;
  bar: string;
}

你的代码：

export class MyButton extends LitElement implements BaseButton {...