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.
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 var
s, 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.