将打字稿转换为javascript

Question

目前网上有没有可以将ts转js的转换器？ 我想使用这里的组件，但它们都是用 ts 编写的，我的 rails 应用程序不支持它。

例如这个文件

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

export default class extends Controller {
  menuTarget: HTMLElement
  toggleTransition: (event?: Event) => void
  leave: (event?: Event) => void
  transitioned: false

  static targets = ['menu']

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

  toggle (): void {
    this.toggleTransition()
  }

  hide (event: Event): void {
    // @ts-ignore
    if (!this.element.contains(event.target) && !this.menuTarget.classList.contains('hidden')) {
      this.leave()
    }
  }
}

我应该采取什么样的步骤才能将其转换为 js？ 请记住，我对打字稿一无所知，所以我在这里有点困惑。

我目前所做的是以下

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

export default class extends Controller {
  menuTarget: HTMLElement
  toggleTransition: (event?: Event) => void
  leave: (event?: Event) => void
  transitioned: false

  static targets = ['menu']

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

  toggle() {
    this.toggleTransition()
  }

  hide(event) {
    // @ts-ignore
    if (!this.element.contains(event.target) && !this.menuTarget.classList.contains('hidden')) {
      this.leave()
    }
  }
}

但我不太清楚如何处理隐藏功能，因为它取决于线条

menuTarget: HTMLElement
toggleTransition: (event?: Event) => void
leave: (event?: Event) => void
transitioned: false

Answer 1

选项 1：使用 Typescript 编译器 ( tsc )

如果您只需要这样做一次并且您不会很快更新此代码，那么一种简单的方法是直接使用 typescript 编译器。

（我假设你的机器上安装了 Node 和npm ）：

1. 首先将您的文件从该存储库下载到一个目录。
2. 然后，在该目录中，运行npm i -D typescript
3. 通过 npx npx tsc --init生成一个基本的tsconfig.json
4. 然后调用 typescript 编译器： npx tsc --outDir ./build

现在，您在build目录中拥有了这些文件的所有 javascript ES5 版本。

解释最后一个命令的作用：

• npx是一种调用已安装的 npm 二进制文件的方法。 它实际上是一个包运行器。
• tsc是作为二进制文件的打字稿编译器
• --outDir是指示文件输出位置的命令行标志。

因此，如果您的文件如下所示：

foo.ts
bar.ts

在该命令之后，它将是：

build/
  foo.js
  bar.js
foo.ts
bar.ts

如果您想修改输出选项，我建议您在此处阅读 tsconfig 上的文档

选项 2：使用像 Rollup 这样的打包工具

如果您只想为您完成此操作并使用标准包管理，我建议您考虑集成 Rollup 或 Webpack。

由于您使用的是 Rails，我建议您研究类似Webpacker 的东西，它允许您在 Rails 应用程序中使用 Typescript

如果您计划随时更新此代码，这是一个更好的选择。

Answer 2

你用的是什么IDE？ RubyMine、Visual Studio 等确实支持将 TypeScript 自动转译为 Javascript。 因此，您可以使用 TypeScript 并在后台自动更新 Javascript 文件。