What does the "target" property in tsconfig.json actually represent?

Question

I have been developing an Angular app using Typescript, and I have come to realise I need to pay more attention to the tsconfig in regards to compilation (transpilation).

Currently in the source code I am using some es6 features (such as Array.prototype.find) and the TSLint-er is picking up these as errors.

I'm trying to reconfigure my tsconfig so that it allows me to use es6 features but transpile to es5. In doing this, I'm failing to understand what the "target" property actually is. What does the "target" property mean?

Does "target" represent what the desired, transpiled output will be? Or does it declare what the Typescript syntax should conform to in order to be transpiled?

Answer 1

TypeScript is a superset of ES6, so you’re essentially writing TS code using ES6 version of JavaScript. However, when compiled, the resulting JS code can be in ES5 or earlier. You need to define which version of JS the compiler should transpile into. This can be set using target option:

{
  "compilerOptions": {
    "target": "es6"
  }
}

You can read more about configuration here.

However, it also is used for validation indirectly. This parameter defines which libraries are used during compilation. If you specify target:es5, it uses ES5 library which doesn't contain Array.prototype.find. You can manually set the library you want to be used:

{
  "compilerOptions": {
    "lib": ["es6", "dom"],
  }
}

In this case you will not have an error even if you specify es5 as a target.