What is target in tsconfig.json for?

Question

What does target in tsconfig.json signify?

{
  "compilerOptions": 
  {
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "classic",
    "lib": [ "es2015", "dom",  "es2017" ]
  }
}

Kao

Answer 1

I am quite new to Typescript. What does Target in tsconfig.json signify?

target signifies which target of JavaScript should be emitted from the given TypeScript. Examples:

target:es5

()=>null will become function(){return null} as ES5 doesn't have arrow functions.

target:es6

()=>null will become ()=>null as ES6 has arrow functions.

More

I also made a quick video on the subject 🌹.

Bikol

do i still need babel if i target es5 also my typescript code contains async and await, will that compile if i give target as es5? – Kao

Don't need babel for that 🌹 – Bikol

I was using es5 but it interprets destructuring [...arr].map as arr.slice().map, which breaks for array-like object that don't have slice. When I target es6, it starts working in my browser, but will it work for everyone? – Ginnifer

@Ginnifer No, it will not. For example, it will not work in Internet Explorer 11, since that doesn't support es6 and doesn't have the .map function. Even if you target es5, it STILL will not work in Internet Explorer, because it's not the transpiler's job to add polyfills. You'd still need to add a polyfill if you wanted to support non-es6 browsers. – Hawkinson

@Hawkinson so IE11 does not even support all of ES5? – Ginnifer

@Ginnifer Well, what I'm saying is that Typescript transpilation doesn't polyfill missing methods for you, it only takes care of the syntax. This thread explains it fairly well: github.com/frankwallis/plugin-typescript/issues/166 – Hawkinson

If you're building a library for other web apps to use then their bundler should polyfill these. – Infrangible

Answer 2

Target changes the JavaScript version you are compiling to.

The options are available at https://www.typescriptlang.org/docs/handbook/compiler-options.html

In the spirit of trying to better understand how the target flag changes my code I compiled some test code to each of the different versions to have a better understanding of the differences.

https://github.com/aizatto/typescript-playground/tree/master/dist/test-async-main

I'm also keeping notes of what I should be targeting depending on what environment I am looking at

https://www.aizatto.com/notes/typescript

Albertinaalbertine

Answer 3

If your target is es2017 , that's the latest version with new library references to shared memory and string. Changing your target means changing the libraries with which your code compiles. If you want to keep the target a low version while supporting libraries referenced by higher versions, you may add the required library to the "lib" in tsconfig.json.

To know more about the libraries referenced in different versions, see this answer.

Outsoar