What will Typescript transpile when targeting ES5 / ES3?

JoshMB picture JoshMB · Mar 2, 2017 · Viewed 8k times · Source

I'm trying to understand when the Typescript compiler will transpile code to make it compatible with my specified target ECMAScript version (ES5 or ES3).

For example, TSC will transpile for(var int of intArray) fine, but it doesn't transpile Number.isInteger() (which is an ES6 feature, according to w3schools).

Number.isInteger() isn't supported in IE < 11.0, so this is a problem. Visual Studio (and VS Code) don't provide warnings of incompatibility, and it doesn't get transpiled.

What can I expect to get transpiled, and what won't? I initially expected that everything would be transpiled, so that I wouldn't have to keep track of things like this, but that doesn't seem to be the case.

Answer

Nitzan Tomer picture Nitzan Tomer · Mar 2, 2017

The compiler supports features based on the lib that you tell it to use.
There are two ways to control which lib the compiler will use, by using the target and lib compiler options.

As it's written in the above link:

If --lib is not specified a default library is injected. The default library injected is:
► For --target ES5: DOM,ES5,ScriptHost
► For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost

All of the different libs are part of the project.

If you are targeting es3 or es5 then you can't use Number.isInteger() as it's (as you stated) a es6 feature.
If you have a polyfil for that then you can still target es5 with the es6 lib:

--target es5 --lib DOM,ES6,ScriptHost

Or you can just copy the definition for the lib.es6.d.ts:

interface NumberConstructor {
    isInteger(number: number): boolean;
}

The reason that you can use things like let, const, for/of regardless of the target is that the compiler knows how to produce equivalent code even when the feature isn't supported for the chosen target.

For example:

const arr = [1, 2, 3];
for (let num of arr) {}

Is compiled to:

var arr = [1, 2, 3];
for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
    var num = arr_1[_i];
}

If no target is specified.
As you can see, the const and let are turned into vars, and the for/in is turned into a regular for.

Number.isInteger() is something different, it's a functionality that doesn't exist in certain targets, like Promise and 'Symbol`.
The compiler won't add the polyfill, it's up to you to add it and then tell the compiler that it's there.