Why do I need a polyfill with Typescript?

Question

Lets say I want to use Object.values(). In order to use this, I have to set "lib":["es2017"]. But then I have "target":"es6".

The way I read this as a new Typescript user is that I am writing with es2017 methods and it's outputting es6 code.

So my question is this, why do I need a polyfill, and how do I select a reliable one?

Possible duplicate of [How to use Object.values with typescript?](https://stackoverflow.com/questions/42966362/how-to-use-object-values-with-typescript) — Aaron Beall, Oct 03 '18 at 19:44
Also see [Need clarification of the target and lib compiler options](https://stackoverflow.com/questions/42093758/need-clarification-of-the-target-and-lib-compiler-options/42097465#42097465) — Aaron Beall, Oct 03 '18 at 19:45
Not a duplicate of `Object.values with typescript`, I'm just using it as a concrete example. Will look at the other suggestions for duplicates. Thanks! — Luke Pighetti, Oct 03 '18 at 20:31

score 11 · Answer 1 · answered Oct 03 '18 at 18:31

11

Typescript has as little runtime impact as possible. Except for a very limited number of utilitiy functions it has no other runtime behavior. This is by design.

Typescript can't know the exact environment you code will run on and what level of support it has for what feature. When specify a lib or target option you tell Typescript there will be runtime support for the required features, not Typescript problem how this happens.

answered Oct 03 '18 at 18:31

Titian Cernicova-Dragomir

230,986
31
415
357

1

I understand that. But why doesn't `lib es2017` and `target es6` allow me to write `es2017` code and have it run on an `es6` target? From what I understand, I still need a polyfill. – Luke Pighetti Oct 03 '18 at 18:37
3

@LukePighetti maybe this answer can shed more light on your question https://stackoverflow.com/questions/51043439/using-latest-javascript-features-in-typescript-such-as-es2018/51044240#51044240 – Titian Cernicova-Dragomir Oct 03 '18 at 19:55
@LukePighetti or this one https://stackoverflow.com/questions/50986494/what-does-the-typescript-lib-option-really-do/50987516#50987516 – Titian Cernicova-Dragomir Oct 03 '18 at 19:57

Benny Code · Answer 2 · 2023-01-31T14:04:33.573

TypeScript distinguishes between API calls and syntax.

The TypeScript compiler levels down the syntax (recognizable by special characters like =>, ?, `, # and keywords like class or static) but not the API. To polyfill API calls, such as Array.prototype.flat (introduced in ES2019), you would need an extra compiler like Babel.

Example

The following compiler config will convert the nullish coalescing operator (??) and the class itself but not the API call to Array.prototype.flat (although it is not present in ES5):

tsconfig.json

{
  "compilerOptions": {
    "lib": ["ES2019"],
    "target": "ES5"
  }
}

main.ts

export class MyConverter {
  static flatten(numbers?: (number | number[])[]) {
    return (numbers ?? []).flat();
  }
}

main.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MyConverter = void 0;
var MyConverter = /** @class */ (function () {
    function MyConverter() {
    }
    MyConverter.flatten = function (numbers) {
        return (numbers !== null && numbers !== void 0 ? numbers : []).flat();
    };
    return MyConverter;
}());
exports.MyConverter = MyConverter;

Why do I need a polyfill with Typescript?

2 Answers2

Example

Linked