将打字稿转换为 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. 生成基本tsconfig.jsonvia：npx tsc --init
4. 然后调用 typescript 编译器：npx tsc --outDir ./build

现在目录中已包含这些文件的所有 javascript ES5 版本build。

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

• 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

如果您打算随时更新此代码，那么这是一个更好的选择。