Transpilation process in angular 2

问题:

As I am new to angular 2 and studying .

I referred the angular 2 tutorials using the link https://www.tutorialspoint.com/typescript/typescript_environment_setup.htm

Here i got to know that the typescript is being compiled down to javascript.

And while coding angular 2 apps i found that in tsconfig.json file as shown below:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Here "target": "es5" specification tells that the typescript is transpiled to es5 standard i.e ECMAScript2009 and "lib": ["es2017", "dom" ] specification tells that it uses es2017 libraries.

can anybody please clarify the transpilation concept of angular 2 ?

can we change the "target": "es5" to es6 i.e ECMAScript2015 ?

And what actually "lib": ["es2017", "dom" ] specifies ?

回答1:

can anybody please clarify the transpilation concept of angular 2 ?

Transpiling code is a similar concept to the compilation process, with one big difference.

• Compiling: code from a high level language is get converted to machine level language.

• Transpiling: code from a high level language gets converted to another high level language.

So in Angualr Transpile means that what you have written in Typscript get converted to another high level language, which is Javascript. This is becase all modern browsers can only understand Javascript.

can we change the "target": "es5" to es6 i.e ECMAScript2015 ?

And what actually "lib": ["es2017", "dom" ] specifies ?

For this, you can read https://angular.io/guide/typescript-configuration, and yes, you can change es5 to es6

Just to update: ES5 is the current stable version, so if you set target ES5 than the compiler will generate javascript files according to ES5 version. If you change it to ES6 than it will generate javascript file according to Es6 standards; however, ES6 is not fully supported by all browser.

To be able to use classes from the ES standard libraries in your TS sources, you should use lib option and specify all standard ES6 libraries interfaces used in your sources. For example, to use Reflect object or Array.from from ES6 and DOM configure the following:

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

Read more here : https://blog.angularindepth.com/configuring-typescript-compiler-a84ed8f87e3