Why is ES7/array polyfill needed despite the tsconfig target is set to ES5

by

TypeScript does not auto-polyfill code (see microsoft/TypeScript#3101). The “official” reason from the relevant GitHub issue seems to be, as @RyanCavanaugh said:

Having the compiler try to figure out which [ES20XX] methods you need, and where to emit them, and when, with controls for people who don’t want the polyfills emitted, and ways to change where those polyfills come from, etc, is a big mess that isn’t justified by the potential gains over simply including a normal [ES20XX] polyfill library in your script context.

And, as it’s mentioned in that issue, emitting runtime code is a non-goal of TypeScript:

[Non-Goal #]6. Provide additional runtime functionality or libraries. Instead, use TypeScript to describe existing libraries.

I’m guessing that some of the confusion comes from the fact that TypeScript does downlevel some language features when targeting earlier EcmaScript versions. The main criterion used when determining if a feature will be emitted as downleveled code or whether it needs a polyfill is syntax:

If the new language feature is syntactically invalid in the targeted version, then it will either be downleveled or you will get a compile time warning. You can’t polyfill invalid syntax. For example, class Foo {} is not and cannot be valid ES5 code… so it will be converted into a constructor function instead when targeting ES5.

If, on the other hand, the language feature is syntactically valid in the targeted version, it will be emitted as-is with no warning. So [1,2,3].includes(0) is perfectly valid ES5 code in terms of syntax. Assuming that someone adds an Array.prototype.includes method to an ES5 engine, it will even work at runtime. So it is emitted as-is. Note that when you include es2017 in your lib compiler options, you’re telling TypeScript that the runtime will support ES2017 typings, and so there is no compile-time warning. Adding typing libraries does not do anything to the runtime itself… so you’re responsible for polyfilling/shimming anything you need. From the compiler’s perspective it can’t deal with the situation where you lied to it about what methods exist at runtime. Obviously that’s not much consolation for someone frustrated by a runtime error, though.

Oh well, it is what it is, I guess.

Hope that helps. Good luck!

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  3. Ionic 2 Form goes up when keyboard shows
  4. When to use square brackets [ ] in directives @Inputs and when not?
  5. Angular2 – Interaction between components using a service
  6. Reactive forms – disabled attribute
  7. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  8. No provider for AngularFireDatabase, AngularFireAuth
  9. How to implement sleep function in TypeScript?
  10. Testing error case with observables in services
  11. Build Angular2 HTML and TypeScript to a single file
  12. TS2531: Object is possibly ‘null’
  13. Custom ExceptionHandler change detection lag
  14. angular keyvalue pipe sort properties / iterate in order
  15. Angular subscribe elegant
  16. How to allow access outside localhost
  17. Trigger update of component view from service – No Provider for ChangeDetectorRef
  18. Angular – Make multiple HTTP calls sequentially
  19. @types/googlemaps/index.d.ts’ is not a module
  20. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  21. How to force tsc to ignore node_modules folder?
  22. Angular 4+ using Google Analytics
  23. What is the meaning of question mark in expressions in Angular 2?
  24. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  25. How to declare a pipe globally to use in different modules?
  26. How to return value inside subscribe Angular 4
  27. Call a function every 10 seconds Angular2
  28. Angular 2 / 4 / 5 – Ahead-of-time compilation how to
  29. How to implement behavior subject using service in Angular 8
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment