如何将TypeScript编写的Stimulus组件转换为Rails可用的JavaScript代码

在线TS转JS工具 #

目前有成熟的在线TS转JS工具，你可以直接搜索TypeScript官方在线编辑器，粘贴TS代码即可直接得到编译后的标准JS代码，无需本地配置任何环境。

本次代码转换步骤 #

你提到的带冒号的代码行都是TypeScript专属的类型标注，仅用于开发阶段的类型检查，运行时完全不需要，按以下规则删除即可：

• 删除所有类属性后的类型标注：menuTarget: HTMLElement、toggleTransition: (event?: Event) => void、leave: (event?: Event) => void这三行都是纯类型声明，直接全部删除即可。menuTarget是Stimulus的Target会自动注入，toggleTransition和leave是useTransition插件运行时自动挂载的方法，不需要提前声明。
• transitioned: false是类型注解，直接删除即可，如果你后续需要用到这个状态的初始值，可以改成transitioned = false。
• 函数参数、返回值后的类型标注全部删除，你已经把hide函数的参数event: Event改成了event，connect、toggle的返回值标注: void也已经删除，这部分修改是正确的。
• 删除TS专属的注释// @ts-ignore，JS运行时没有类型检查，不需要这个注释。

转换后的完整可用代码 #

import { Controller } from "@hotwired/stimulus"
import { useTransition } from 'stimulus-use/dist/use-transition'

export default class extends Controller {
  static targets = ['menu']

  connect() {
    useTransition(this, {
      element: this.menuTarget
    })
  }

  toggle() {
    this.toggleTransition()
  }

  hide(event) {
    if (!this.element.contains(event.target) && !this.menuTarget.classList.contains('hidden')) {
      this.leave()
    }
  }
}

转换后的代码可以直接放到你的Rails应用的Stimulus控制器目录下使用，和普通JS写的Stimulus控制器完全兼容。

内容的提问来源于stack exchange，提问作者Daniel