CODEWITHSUNDEEP
javascripttypescriptecmascript-6
cluster1
cluster1

Reputation: 5664

Are ES6 features compiled to ES5 when used within TypeScript?

When I use ES6 features like for example template string, arrow functions, destructuring within a TypeScript file. Afterward I compile the file to normal JavaScript ...

Are the ES6 syntax compiled too by the TypeScript compiler? Or do I have to use an additional compiler (Babel)?

Upvotes: 3

Views: 2613

Answers (2)

Paleo
Paleo

Reputation: 23682

Are the ES6 syntax compiled too by the TypeScript compiler? Or do I have to use an additional compiler (Babel)?

I disagree with the Fylax's answer. The TypeScript compiler doesn't require an additional tool for converting the ES6 syntax to ES 3 or 5.

The TypeScript compiler tranpiles the new syntax (let, for … of, arrow functions, rest parameters, etc.) to ES 3 or 5. But it doesn't provide any polyfill by itself. In order to use a recent API (like Promise) on a old VM ES 3 or 5, you have to:

  1. Load a polyfill (like es6-promise) that makes the API available;
  2. Say the compiler to use the standard typings for this API.

It is a robust design option. With typeScript, you have to choose carefully the polyfills you need, and to test them on the different browsers you target.

By default, when the target is ES 3 or ES 5, the compiler doesn't use the definitions for the recent ECMAScript API. See the documentation:

Note: If --lib is not specified a default library is injected. The default library injected is:

► For --target ES5: dom,es5,scripthost

If a polyfill makes an API available, then we can configure the compiler to use it. Here is an example of configuration file tsconfig.json for using promises on ES5 VM:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es5", "es2015.promise"]
  }
}

However, Babel can convert a few more features to ES 5 than TypeScript does. See the compatibility table from Kangax.

Upvotes: 8

Fylax
Fylax

Reputation: 1128

You need additional compilers that downport your code from ES6 to ES5.

TypeScript is pretty smart and will do most of the work for you (i.e. translate let to var or arrow functions to standard functions with right scope and bindings).

EDIT: as @Paleo pointed out, on 99% you don't need any external compiler as you can provide to TypeScript an extra library (polyfill) which makes everything work fine.

You will need an extra compiler on very rare cases when you are not covered neither by transpiler nor by polyfill's.

Upvotes: 2

Related Questions