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
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):
npm i -D typescripttsconfig.json via: npx tsc --initnpx tsc --outDir ./buildNow 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
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.
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.