將打字稿轉換為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 文件。