使用 Typescript

Stimulus 本身是用 TypeScript 编写的，并直接在其软件包上提供类型。以下文档展示了如何为 Stimulus 属性定义类型。

﹟ 定义控制器元素类型

默认情况下，控制器的 element 为 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 文档 中阅读更多内容。