Converting typescript to javascript

Question

Is there currently any converters online that could convert ts to js? I would like to use the components from here, but they're all written in ts and my rails app doesn't support it.

for example this file

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()
    }
  }
}

what kind of steps should I do in order to convert this to js? Bear in mind that I know nothing about typescript so I'm getting little confused here.

What I've currently done is the following

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()
    }
  }
}

but I don't quite know what to do with the hide function since it depends on the lines

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

Answer 1

Option 1: Use the Typescript Compiler (tsc)

If you only need to do this once and you're not going to update this code anytime soon, then one easy way is to use the typescript compiler directly.

(I am assuming you have Node and npm installed on your machine):

1. First download your files from that repo to a directory.
2. Then, inside that directory, go and run npm i -D typescript
3. Generate a basic tsconfig.json via: npx tsc --init
4. Then call the typescript compiler: npx tsc --outDir ./build

Now you have all the javascript ES5 versions of these files in the build directory.

To explain what the last command does:

• npx is a way to invoke installed npm binaries. It's effectively a package runner.
• tsc is the typescript compiler as a binary
• --outDir is the command line flag to indicate where to output the files.

So if your files looked like this:

foo.ts
bar.ts

After that command, it will be:

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

If you want to modify the output options, I would suggest reading the docs on tsconfig here

Option 2: Use a bundler like Rollup

If you want to just have this be done for you and use standard package management, I would suggest looking into integrating Rollup or Webpack.

Since you're using Rails, I would suggest looking into something like Webpacker which will allow you to use Typescript in your Rails app

This is a much better option if you plan on keeping this code updated with wherever you're getting it.

Answer 2

What IDE are you using? RubyMine, Visual Studio, etc. do support automatic TypeScript to Javascript transpiling. So you can work in TypeScript and in the background the Javascript files are automatically updated.