ES6 as the typescript target compiler option for angularjs or angular2

Question

The compiler option for my angularjs application is as below. Should I use any other package to transpile es6 to es5 again if I change the target to es6?

    {
      "compilerOptions": {
        "target": "es5", // Change this to es6
        "module": "commonjs",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "./wwwroot/app/"
      },
      "exclude": [
        "node_modules",
        "wwwroot"
      ]
    }

Answer 1

Which target you pick is dependent on which browsers you support. Looking at the The ES6 Compatibility Table, we can make general guidelines about what to target. As long as the platform support is greater than or equal to TypeScript support, then we can estimate what we want to target:

target: ES3 - If you want to support:

• IE8

target: ES5 - If you want to support:

• IE11
• (iOS) Safari 9
• Opera Mini
• Android Browser
• Potentially Firefox ESR or Edge 14. They implement some/most of ES6, but there may be a few features missing. Check if you need said features or can polyfill/shim them.

target: ES6 (ES2015) - If you use these features and you want to support:

• exponentiation (**) operator: Safari 10.0/iOS 10.2
• nested rest destructuring: Safari 10.0/iOS 10.2

target: ES7 (ES2016) - If you use these features and you want to support:

• async functions: Safari 10.0/iOS 10.2
• Object.getOwnPropertyDescriptors: Safari 10.0/iOS 10.2 (but there is a shim for that)
• String padStart/padEnd: Samsung 6 (also shimmed)
• Trailing commas in function syntax: Samsung 6
• __define/lookupGetter/Setter__: Edge 17, Chrome 61, Samsung 7 (they only support a subset)

target: ES2017 - If you use these features and you want to support:

• Promise.prototype.finally: Edge 17, Safari 11.0/iOS 11.0, Samsung 7 (shim)
• object rest/spread properties: Edge 18, Safari 11.0/iOS 11.0, Samsung 7
• Asynchronous Iterators: Edge 18 or Safari 11.1/iOS 11.3

target ES2018 - If you use these features and you want to support:

• Basically anything ES2019+: Edge 18, Samsung 8, Safari 12.0/iOS 11.3
• Object.fromEntries: Chrome 72, iOS 12.0, Samsung 10, Opera Mobile 51
• Array.prototype[@@unscopables].flat/flatMap: Firefox 66, Chrome 72, Safari 12.1/iOS 12.2, Samsung 10, Opera Mobile 51
• Symbol.prototype.description: Samsung 9
• JSON.stringify UTF surrogate pairs: iOS 12.0, Samsung 10

target ES2019 - If you use these features and you want to support:

• Basically anything ES2020+: Samsung 10, Safari 12.1/iOS 12.2, Opera Mobile 51
• String.prototype.matchAll: Firefox 66, Chrome 72
• Promise.allSettled: Firefox 71, Chrome 76
• optional chaining operator (?.): Firefox 74, Chrome 80, Safari 13/iOS 13, Opera Mobile 55
• nullish coalescing operator (??): Firefox 72, Chrome 80, Safari 13/iOS 13, Opera Mobile 55

target ES2020 - Which leaves us with the browsers than handle everything as of this post:

• Firefox 74+
• Chrome 80+ (include it's Edgium 80+ and Operium 67+ rebrands)
• Safari 13.1

Hopefully this will give you an idea of what to target, but testing is essential to guarantee you support the platforms you want. There might be smaller features not in the compatibility table or something I missed, so be sure to test.

Answer 2

Targeting ES5 is currently a baseline requirement

*According to The ES6 Compatibility Table:

• class isn't supported in

  • Chrome (latest)
  • Android (latest)

Note: This is just for the latest. Many of the ES6 features that would provide a measurable benefit have only been implemented in the latest browser versions. Ie backward-compatibility is virtually nonexistent.

There are likely other use cases that would be better described using ES6 that aren't fully supported by browser.

In short, you should target ES5 for the foreseeable future until browsers have a chance to catch up.