Skip to main content
Version: v4.17

Typed Components

Web Components generated with Rindo come with type declaration files automatically generated by the Rindo compiler.

In general, TypeScript declarations provide strong guarantees when consuming components:

  • Ensuring that proper values are passed down as properties
  • Code autocompletion in modern IDEs such as VSCode
  • Events' details
  • Signature of components' methods

These public types are automatically generated by Rindo in src/component.d.ts. This file allows for strong typing in JSX (just like React) and HTMLElement interfaces for each component.

tip

It is recommended that this file be checked in with the rest of your code in source control.

Because Web Components generated by Rindo are just vanilla Web Components, they extend the HTMLElement interface. For each component a type named HTML{CamelCaseTag}Element is registered at the global scope. This means developers DO NOT have to import them explicitly, just like HTMLElement or HTMLScriptElement are not imported.

  • fml-button => HTMLFmlButtonElement
  • fml-menu-controller => HTMLFmlMenuControllerElement
const button: HTMLFmlButtonElement = document.queryElement('fml-button');
button.fill = 'outline';

IMPORTANT: always use the HTML{}Element interfaces in order to hold references to components.

Properties​

This section has moved to Property Types

Required Properties​

This section has moved to Required Properties