How do I make sure that my Lit element component props are properly typed in Typescript

Question

I have a library where I want to create a button for all the different frameworks out there. All of those components props should have a single source of truth from a Typescript interface:

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

How can I make sure that my Lit element properties are properly typed according to that interface?

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

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

`implements`? I'm not sure what you're asking about. Is it the decorators? I don't think you can make those depend on the type in the interface. — kelsny, Mar 25 '22 at 14:17
So, as in React you do something like: `export const MyButton: FC = ({ tiny, color, }) => { ... }` and the build would fail if you were to add a different prop, how do I achieve the same here? — pegido, Mar 25 '22 at 14:22

score 0 · Answer 1 · answered Aug 08 '22 at 17:08

Just implement the interface.

General example:

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;
}

Your code:

export class MyButton extends LitElement implements BaseButton {...

How do I make sure that my Lit element component props are properly typed in Typescript

1 Answers1