Typescriptを使う
Stimulus自体はTypeScriptで記述されており、そのパッケージ上で直接型を提供します。 このドキュメントでは、Stimulusプロパティの型を定義する方法を示します。
原文
Stimulus itself is written in [TypeScript](https://www.typescriptlang.org/) and provides types directly over its package. The following documentation shows how to define types for Stimulus properties.# コントローラ要素の型を定義する
デフォルトでは、コントローラー要素はElement型
です。 コントローラ要素の型をオーバーライドするには、Generic Typeを指定します。 たとえば、要素の型をHTMLFormElement
とすることを想定している場合は次のようにします。
import { Controller } from "@hotwired/stimulus"
export default class MyController extends Controller<HTMLFormElement> {
submit() {
new FormData(this.element)
}
}
原文
By default, the `element` of the controller is of type `Element`. You can override the type of the controller element by specifiying it as a [Generic Type](https://www.typescriptlang.org/docs/handbook/2/generics.html). For example, if the element type is expected to be a `HTMLFormElement`:import { Controller } from "@hotwired/stimulus"
export default class MyController extends Controller<HTMLFormElement> {
submit() {
new FormData(this.element)
}
}
# Valueプロパティの型定義
valuesの各プロパティは、Stimulusによって自動生成されるのでそれを上書きしないよう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の型を定義します。
原文
You can define the properties of configured values using the TypeScript `declare` keyword. You just need to define the properties if you are making use of them within the controller.import { Controller } from "@hotwired/stimulus"
export default class MyController extends Controller {
static values = {
code: String
}
declare codeValue: string
declare readonly hasCodeValue: boolean
}
The
declare
keyword avoids overriding the existing Stimulus property, and just defines the type for TypeScript.
# Targetプロパティの型定義
ターゲットの各プロパティは、Stimulusによって自動生成されるのでそれを上書きしないよう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の型を定義します。
原文
You can define the properties of configured targets using the TypeScript `declare` keyword. You just need to define the properties if you are making use of them within the controller.The return types of the [name]Target
and [name]Targets
properties can be any inheriting from the Element
type. Choose the best type which fits your needs. Pick either Element
or HTMLElement
if you want to define it as a generic HTML element.
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[]
}
The
declare
keyword avoids overriding the existing Stimulus property, and just defines the type for TypeScript.
# カスタムプロパティやメソッドの型定義
その他のカスタムなプロパティは、コントローラクラスにTypeScriptのやり方で直接定義することができます:
import { Controller } from "@hotwired/stimulus"
export default class MyController extends Controller {
container: HTMLElement
}
詳細については、TypeScriptドキュメントを参照してください。
原文
Other custom properties can be defined the TypeScript way on the controller class:import { Controller } from "@hotwired/stimulus"
export default class MyController extends Controller {
container: HTMLElement
}
Read more in the TypeScript Documentation.