Using Typescript

Stimulus itself is written TypeScript and provides types directly over its package. The following documentation should make it clear how to define types for stimulus properties.

﹟ Define Controller Element Type

By default, the element of the controller is from type Element.
If the element expected type is as example HTMLFormElement it can be defined this way:

import { Controller } from '@hotwired/stimulus';

export default class MyController extends Controller<HTMLFormElement> {
    submit() {
        new FormData(this.element)
    }
}

﹟ Define Controller Value Type

To define the type of configured values is possible over the declare feature of TypeScript:

import { Controller } from '@hotwired/stimulus';

export default class MyController extends Controller {
    static values = {
        code: String,
    };

    declare readonly codeValue: string;
}

The declare avoids override of the exist stimulus property and just define the type for TypeScript.

﹟ Define Controller Target Type

To define the type of configured targets is possible over the declare feature of TypeScript:

import { Controller } from '@hotwired/stimulus';

export default class MyController extends Controller {
    static targets = [
        'input'
    ];

    declare readonly inputTarget: HTMLInputElement;
}

The declare avoids override of the exist stimulus property and just define the type for TypeScript.

﹟ Custom properties amd methods

Other custom properties is possible to define the TypeScript way on the controller class:

import { Controller } from '@hotwired/stimulus';

export default class MyController extends Controller {
    container: HTMLElement;
}

Read more about it in the TypeScript Documentation.

Next: Values