Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why would I use TypeScript and Babel together? [closed]

We have in-house written build automation running on NPM and NodeJS. I'm fully comfortable with automating some transform steps to get TypeScript and Babel working together. I just wonder what the benefit will be. Can anyone tell me? It would appear that since TS has added support for ES6 that you don't really need Babel. The one thing that seems probable is Babel supporting new features sooner, but TS doesn't seem to be too far behind at the moment.

Am I missing something?

like image 430
Kraken Avatar asked May 17 '17 09:05

Kraken


People also ask

Should I use Babel alongside TypeScript?

If you need custom transformations, you'll need to use Babel. The good news is that most TypeScript tools allow you to both use TypeScript and then run the code through Babel afterwards, to get the best of both worlds. But this obviously comes with additional complexity in your build-chain.

Does Babel loader work with TypeScript?

As a work-around, we can use babel-loader to compile TypeScript.

Does Babel compile TypeScript?

You can use Babel as a TypeScript compiler ( tsc ). This means much faster compilations, and you can use Babel plugins in TypeScript just as you would with JavaScript.

Why you should not use TypeScript?

One thing that many beginners do not understand about TypeScript is that it does not guarantee type-correctness at runtime. Your TypeScript code might be fully typed and the compiler ensures you that everything must be correct… but at runtime you still get errors because your variables might be of the wrong types!


1 Answers

In my opinion you transpile TypeScript code to ES6 by using typescript and then re-transpile it to es5/es3 using babel to use in most javascript run times. Now because typescript compiler gives you es6 javascript you can do tree-shaking which is only supported for es6 module. And after tree-shaking your es6 javascript you can now compile it down to es5 to be able to used by most of the javascript run times out there.

Basically

  1. Compile ts to js-es6

tsconfig

{
  "compilerOptions": {
    "target": "es6"
  }
}
  1. tree shake or dead code elimination in es6 javascript

Tree Shaking Using rollup etc

  1. Transpile to es5 javascript to be able to run in most of the javascript runtimes

.babelrc

{
  "presets": [
    "es-2015",
    "stage-2"
  ]
}
like image 96
Lekhnath Avatar answered Sep 28 '22 19:09

Lekhnath