Search code examples
javascripttypescriptcompatibilitytscecmascript-3

TSC: what does --target ES3 compatibility flag do?

I installed typescript npm package:

npm install typescript

and ran

node_modules\.bin\tsc doodle.ts -t ES3

Where doodle.ts has:

var test = document.querySelector('.test');

It echoed back the same in output doodle.js.

How to configure it so in the output, I get:

var test = document.getElementsByClassName('.test')[0];

Shouldn't -t ES3 flag take care of such compatibility aspects?

Solution

  • Flags like -es5, es3, etc do indeed take care of supporting transpiling of advanced TS/ES6 features into their equivalent (when possible) in previous versions of JavaScript (for example, with for..off).

    However, document.querySelector is not part of the ECMAScript standard. It's part of the DOM API, and ignored by TypeScript. The transpiler is not trying to provide browser compatibility, but rather, language compatibility. You might find shims that say they're for specific ECMAScript versions that roll API shims into it, but that's a misunderstanding as they're not exactly the same thing.

    With TypeScript, you still need to use shims for missing DOM features that are browser-specific.