Typed Components

Web Components generated with Stencil come with type declaration files automatically generated by the Stencil 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 Stencil 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 Stencil 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.

• ion-button => HTMLIonButtonElement
• ion-menu-controller => HTMLIonMenuControllerElement

const button: HTMLIonButtonElement = document.queryElement('ion-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