Usare TypeScript con Wompo

Tipizza props, componenti e riferimenti per migliorare l'esperienza di sviluppo.

Props tipizzate

Wompo e' scritto in TypeScript, quindi puoi tipizzare le props come faresti con una normale funzione.

import { defineWompo, html, type WompoProps } from 'wompo';

interface UserCardProps extends WompoProps {
  name: string;
  role?: string;
}

function UserCard({ name, role = 'Member', styles: s }: UserCardProps) {
  return html`
    <article class=${s.card}>
      <strong>${name}</strong>
      <span>${role}</span>
    </article>
  `;
}

defineWompo<UserCardProps>(UserCard);

Quando renderizzi UserCard da un altro template Wompo, TypeScript puo' aiutarti a trovare props mancanti o non valide.

Tipi utili

  • WompoProps: props base disponibili su ogni componente.
  • RenderHtml: valore prodotto dal template tag html.
  • WompoComponent: tipo di una funzione componente Wompo.
  • WompoElement: tipo dell'istanza DOM di un componente registrato.

Ref tipizzate

useRef e' generico. Passa il tipo dell'elemento DOM quando vuoi autocompletamento sui nodi nativi.

import { html, useRef } from 'wompo';

function SearchBox() {
  const inputRef = useRef<HTMLInputElement>();

  const focus = () => inputRef.current?.focus();

  return html`
    <input ref=${inputRef} />
    <button @click=${focus}>Focus</button>
  `;
}

Metodi esposti

Quando un componente espone metodi con useExposed, descrivi quei metodi con WompoElement.

import {
  defineWompo,
  html,
  useExposed,
  useState,
  type WompoProps,
  type WompoElement,
} from 'wompo';

interface ModalApi {
  open: () => void;
  close: () => void;
}

export type ModalElement = WompoElement<WompoProps, ModalApi>;

function Modal() {
  const [open, setOpen] = useState(false);

  useExposed<ModalApi>({
    open: () => setOpen(true),
    close: () => setOpen(false),
  });

  return html`
    <dialog open=${open}>
      <button @click=${() => setOpen(false)}>Chiudi</button>
    </dialog>
  `;
}

defineWompo(Modal, {
  name: 'app-modal',
});

Poi tipizza la ref nel componente parent.

import { defineWompo, html, useRef } from 'wompo';
import Modal, { type ModalElement } from './Modal.js';

function App() {
  const modalRef = useRef<ModalElement>();

  return html`
    <button @click=${() => modalRef.current?.open()}>
      Apri modal
    </button>
    <${Modal} ref=${modalRef} />
  `;
}

defineWompo(App);