动态声明 TypeScript 中的 Stimulus 目标类型

在 TypeScript 中动态声明 Stimulus 目标类型，可以使用 declare 关键字来声明类型。下面是一个示例：

// stimulus.d.ts

// 声明 Stimulus 目标类型
declare interface StimulusTargetAttributes {
  [targetName: string]: HTMLElement | null;
}

declare global {
  interface Window {
    StimulusTarget: StimulusTargetAttributes;
  }
}

在上面的示例中，我们使用 declare 关键字声明了一个名为 StimulusTargetAttributes 的接口，它包含了一个索引签名，其中键是目标名称（字符串），值是一个可选的 HTMLElement 或 null。

然后，我们在全局的 Window 接口中添加了一个名为 StimulusTarget 的属性，它的类型是刚刚声明的 StimulusTargetAttributes 接口。

在使用 Stimulus 目标时，可以通过使用 StimulusTarget 类型来声明目标属性。例如：

import { Controller } from "stimulus";

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

  // 声明目标属性
  readonly myElementTarget!: HTMLElement | null;

  connect() {
    // 使用目标属性
    this.myElementTarget?.addEventListener("click", this.handleClick);
  }

  handleClick(event: Event) {
    // 处理点击事件
  }
}

在上面的示例中，我们声明了一个名为 myElementTarget 的目标属性，并将其类型设置为 HTMLElement | null。然后在 connect 方法中，我们使用这个目标属性来添加点击事件监听器。

请注意，我们使用了非空断言操作符 ! 来告诉 TypeScript 这个属性一定会被初始化，并且不会是 undefined 或 null。这是因为 Stimulus 在连接控制器时会自动初始化目标属性。

最后，记得在 TypeScript 项目中引入这个声明文件，以便 TypeScript 可以识别和使用这些声明类型。