Stimulus リファレンス: TypeScriptを使う

この記事はGoogle翻訳の結果を編集したものです。

Stimulus自体はTypeScriptで記述されており、そのパッケージ上で型を直接提供します。以下のドキュメントはStimulusプロパティの型を定義する方法を示しています。

コントローラー要素型の定義

デフォルトではコントローラの要素はElement型です。コントローラー要素の型をジェネリック型として指定することでオーバーライドできます。たとえば、要素の型がHTMLFormElementであると予想される場合:

import { Controller } from "@hotwired/stimulus"

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

値のプロパティを定義する

TypeScriptのdeclareキーワードを使用して構成された値のプロパティを定義できます。コントローラー内で使用する場合はプロパティを定義するだけです。

import { Controller } from "@hotwired/stimulus"

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

  declare codeValue: string
  declare readonly hasCodeValue: boolean
}

declareキーワードは既存のStimulusプロパティのオーバーライドを回避し、TypeScriptの型を定義するだけです。

ターゲットプロパティの定義

TypeScriptのdeclareキーワードを使用して構成されたターゲットのプロパティを定義できます。コントローラー内で使用する場合はプロパティを定義するだけです。

[name]Targetおよび[name]Targetsプロパティの戻り値の型はElement型から継承した任意の型にすることができます。ニーズに合わせて最適なタイプをお選びください。汎用HTML要素として定義する場合は、ElementまたはHTMLElementのいずれかを選択します。

import { Controller } from "@hotwired/stimulus"

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

  declare readonly hasInputTarget: boolean
  declare readonly inputTarget: HTMLInputElement
  declare readonly inputTargets: HTMLInputElement[]
}

declareキーワードは既存のStimulusプロパティのオーバーライドを回避し、TypeScriptの型を定義するだけです。

カスタムプロパティとメソッド

他のカスタムプロパティはコントローラークラスでTypeScriptの方法で定義できます。

import { Controller } from "@hotwired/stimulus"

export default class MyController extends Controller {
  container: HTMLElement}

詳細についてはTypeScript ドキュメントを参照してください。