Does Typescript transpilation handle transpiling ES6 to ES5?

Question

I am writing an app using Angular 2 and TypeScript. I want to use a js method (particularly 'filter' for arrays) which is supported by IE 11+, Chrome 45+, etc. Will my code be able to run on older browsers? As Typescript transpiles to vanilla js, I am not sure what it does with ES6 features.

Answer 1

TypeScript allows you to use new language features from ES6 and it will transpile those language features to ES5; however, it does not add polyfills for built in functions that exist in ES6, but don't exist in ES5.

If you are using built in functions that only exist in ES6 and are targeting ES5, then you will need to include the necessary polyfills in order for the code to work in ES5 environments.

Example

For example, fill is a new function found on Array's prototype in ES6.

const result = ["first", "second"].fill("all");

When you target ES6 everything is fine. The compiler will include lib.es6.d.ts with the definition for fill and not complain because it assumes you will be running the code in ES6 environments where the fill function exists.

When you target ES5, however, it won't include lib.es6.d.ts and will tell you that function doesn't exist in ES5 environments:

error TS2399: Property 'fill' does not exist on type 'string[]'.

To fix that, you'll need to add fill to the Array<T> interface in a definition file in your project:

interface Array<T> {
    fill(value: T, start?: number, end?: number): this;
}

And include a polyfill. Or use something that does it automatically for you.