TypeScript - using Polyfill

In this article, we would like to show how to attach Polyfill in TypeScript.

Simple steps:

1. install ts-polyfill package using:

npm install ts-polyfill

2. inside tsconfig.json you can attach required libraries.

Avaialble libraries:

• DOM
• DOM.Iterable
• ES2015
• ES2016.Array.Include
• ES2017.Object
• ES2017.String
• ES2018.AsyncIterable
• ES2018.Promise
• ES2019.Array
• ES2019.Object
• ES2019.String
• ES2019.Symbol
• ES2020.Promise
• ES2020.String
• ES2020.Symbol.WellKnown

Example tsconfig.json file:

{
  "compilerOptions": {
    "target": "ES2015",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ES2015",
      "ES2016.Array.Include",
      "ES2017.Object",
      "ES2017.String",
      "ES2018.AsyncIterable",
      "ES2018.Promise",
      "ES2019.Array",
      "ES2019.Object",
      "ES2019.String",
      "ES2019.Symbol",
      "ES2020.Promise",
      "ES2020.String",
      "ES2020.Symbol.WellKnown"
    ]
  }
}

3. import libraries in index.ts file:

import 'ts-polyfill/lib/es2016-array-include';
import 'ts-polyfill/lib/es2017-object';
import 'ts-polyfill/lib/es2017-string';
import 'ts-polyfill/lib/es2018-async-iterable';   // supports: for await...of
import 'ts-polyfill/lib/es2018-promise';
import 'ts-polyfill/lib/es2019-array';
import 'ts-polyfill/lib/es2019-object';
import 'ts-polyfill/lib/es2019-string';
import 'ts-polyfill/lib/es2019-symbol';
import 'ts-polyfill/lib/es2020-promise';
import 'ts-polyfill/lib/es2020-string';
import 'ts-polyfill/lib/es2020-symbol-wellknown';
 
import 'ts-polyfill/lib/es2020-global-this';      // globalThis (it is not configurable in tsconfig.json libs property)

Note: you can import all Polyfill libraries by using: import 'ts-polyfill';

References

1. TS-Polyfill - NPM Homepage
2. TS-Polyfill - GitHub