javascript - 将 typescript 转换为javascript

Question

目前网上有没有可以把ts转js的转换器？我想使用 here 中的组件, 但它们都是用 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，我应该执行哪些步骤？请记住，我对 typescript 一无所知，所以我在这里有点困惑。

我目前所做的是以下

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.json:npx tsc --init
4. 然后调用 typescript 编译器:npx tsc --outDir ./build

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

解释最后一条命令的作用:

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

所以如果你的文件看起来像这样:

foo.ts
bar.ts

在该命令之后，它将是:

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

如果你想修改输出选项，我建议reading the docs on tsconfig here

选项 2:使用像 Rollup 这样的打包器

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

由于您使用的是 Rails，我建议您查看类似 Webpacker which will allow you to use Typescript in your Rails app 的内容

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