133

What does target in tsconfig.json signify?

{
  "compilerOptions": 
  {
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "classic",
    "lib": [ "es2015", "dom",  "es2017" ]
  }
}
YLJ
  • 2,940
  • 2
  • 18
  • 29
Ankit Raonka
  • 6,429
  • 10
  • 35
  • 54

3 Answers3

162

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 .

basarat
  • 261,912
  • 58
  • 460
  • 511
  • 8
    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? – Ankit Raonka Feb 24 '17 at 05:10
  • 6
    Don't need babel for that – basarat Feb 24 '17 at 21:53
  • 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? – Qwerty Apr 19 '18 at 09:30
  • 4
    @Qwerty 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. – pabrams Aug 29 '18 at 18:30
  • @pabrams so IE11 does not even support all of ES5? – Qwerty Aug 30 '18 at 07:58
  • 2
    @Qwerty 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: https://github.com/frankwallis/plugin-typescript/issues/166 – pabrams Aug 30 '18 at 17:13
  • If you're building a library for other web apps to use then their bundler should polyfill these. – Sunny Patel Nov 17 '22 at 18:22
14

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

aizatto
  • 411
  • 5
  • 5
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.

Ashique Razak
  • 487
  • 3
  • 8