Sorry if this is a n00b question, but I'm building an Angular app and my current tsconfig.json file has 'es6' as the 'target' in 'compilerOptions':

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "types" : []
  },
  "exclude": [
    "node_modules"
  ]
}

Is it possible to have multiple target? For example, could I add in es5? I ask simply because I'm going through tutorials that are written for es5, but due to the current state of my project I need to use es6 - i.e., I cannot downgrade. All of my code has to conform to es6 - if both were included I would imagine that my code could conform to both es5 and es6.

Sorry if this is a n00b question, but I'm building an Angular app and my current tsconfig.json file has 'es6' as the 'target' in 'compilerOptions':

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "types" : []
  },
  "exclude": [
    "node_modules"
  ]
}

Is it possible to have multiple target? For example, could I add in es5? I ask simply because I'm going through tutorials that are written for es5, but due to the current state of my project I need to use es6 - i.e., I cannot downgrade. All of my code has to conform to es6 - if both were included I would imagine that my code could conform to both es5 and es6.

• javascript
• angular
• typescript

2 Answers 2

Bear in mind that you could also create multiple tsconfig files and use the extends feature to create a base tsconfig that covers most of the elements, and then two target tsconfigs that cover the targets.

Base tsconfig:

{
    "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "types" : []
   },
   "exclude": [
     "node_modules"
   ]
}

ES5 tsconfig:

{
    "extends": "./base.json"
    "compilerOptions": {
        "target": "es5"
    }
}

ES6 tsconfig:

{
    "extends": "./base.json"
    "compilerOptions": {
        "target": "es6"
    }
}

Then you would just have to run whichever target you need: tsc -p ./es6.json

This does not mean that your code will conform to both at the same time; however, you could optionally add an outDir property to each tsconfig that extends the base, and compiles the output into separate directories.

You can only specify one target for the configuration. The target property of compilerOptions accepts a single string value.

Specifying ES5 as the target would not restrict you from writing your source in ES6 or higher, it simply ensures that the compiled code is compatible with clients that only understand ES5 or lower. Features such as lambda expressions will be compiled to function expressions.

An expression such as const foo = (bar) => bar.replace('\t', ''); would be compiled to var foo = function (bar) { return bar.replace('\t', ''); }; with target set to ES5.

Where you need the target to be compiled to ES5 or ES6 would really depend on what devices/browsers will be using your application, ES5 would definitely at this time be a more "safe" choice in terms of compatibility. Here is a nice resource for determining ES6 browser comparability.

Hopefully that helps clarify things!