Palette has first-class support for TypeScript with strong typing on all API surfaces.

Component State

To set the types for a Component's reactive state, define a type as the generic parameter for the Component class. The type can also be inferred by defining an initialState property.

type CountingButtonState = {
  count: number;
};

class CountingButton extends Component<CountingButtonState> {
  /* ... */

  initialState = { count: 1 };
}
Copy

Integration with Native APIs

To make Palette Components work like other HTML elements when programmatically creating them with something like document.createElement, define the element as an addition to the HTMLElementTagNameMap interface:

declare global {
  interface HTMLElementTagNameMap {
    "tag-name": ElementClass;
  }
}
Copy

To declare a Custom Event type by its name, you can similarly do:

declare global {
  interface GlobalEventHandlersEventMap {
    // If you extended CustomEvent
    "my-event-name": MyEvent;

    // If you are just using generic CustomEvents
    "my-other-event": CustomEvent<string>;
  }
}
Copy