CODEWITHSUNDEEP
jsontypescriptangulartsconfig
Bhushan Gadekar
Bhushan Gadekar

Reputation: 13805

What is the purpose of tsconfig.json?

I was reading Angular2 references and found this: tsconfig.json. I would like to know what the following parameters mean?

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

Upvotes: 58

Views: 56328

Answers (6)

mohamed mamdouh
mohamed mamdouh

Reputation: 31

As you know browsers can accept only javascript files, But when you use angular you don't use javascript. Instead you use typescript files .. so now we need a method to change those typescript files to js files. It's done by tsconfig.json file that specifies the configuration options that we need to do this change . Such as compiler options and the root files .

Upvotes: 0

VIJ
VIJ

Reputation: 1636

Most of points are covered above. some are missed which i like to highlight.

tsconfig.json will tell where is build code and which version to target.

For instance, when it goes to production it will refer the below key in tsconfig.json and pick the build.

"outDir": "./dist/out-tsc", --> where to locate the build file.

And our browser do not understand typescript so mention which type of js to convert our code which will be understood by browser.

In other words, we write our code in typescript but bring that code to es5, We do that using the below field. 

  "target": "es2015",

Upvotes: 0

Hameed Syed
Hameed Syed

Reputation: 4265

Already there are lot of answers, but I would like to add one more point as why tsconfig required. As per angular docs

TypeScript is a primary language for Angular application development. It is a superset of JavaScript with design-time support for type safety and tooling.

Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the tsc compiler, which requires some configuration.

Typically, you add a TypeScript configuration file called tsconfig.json to your project to guide the compiler as it generates JavaScript files.

For more information https://angular.io/guide/typescript-configuration

Upvotes: 8

Soumya
Soumya

Reputation: 233

tsconfig.json signifies the directory in which it is kept is the root of TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

The compiler is expected to execute as per the configurations mentioned:

"target": "es5" => will compile the es6 to es5 so that it is compatible browsers.

"module": "system" => specifies the module code generations (commonjs', 'amd', 'system', 'umd', 'es6' etc)

"moduleResolution": "node" => Determine how modules get resolved

"sourceMap": true => Generates corresponding ‘.map’ file so that it can be used in the production code for debugging.

"removeComments": false => Remove all comments except copy-right header comments beginning with /*!

"noImplicitAny": false => Raise error on expressions and declarations with an implied ‘any’ type.

If the "exclude" property is specified, the compiler includes all TypeScript (*.ts or *.tsx) files in the containing directory and subdirectories except for those files or folders that are excluded.

Upvotes: 13

Thierry Templier
Thierry Templier

Reputation: 202176

The tsconfig.json file corresponds to the configuration of the TypeScript compiler (tsc).

These links could give you details about these attributes:

Here are some hints:

  • target: the language used for the compiled output
  • module: the module manager used in the compiled output. system is for SystemJS, commonjs for CommonJS.
  • moduleResolution: the strategy used to resolve module declaration files (.d.ts files). With the node approach, they are loaded from the node_modules folder like a module (require('module-name'))
  • sourceMap: generate or not source map files to debug directly your application TypeScript files in the browser,
  • emitDecoratorMetadata: emit or not design-type metadata for decorated declarations in source,
  • experimentalDecorators: enables or not experimental support for ES7 decorators,
  • removeComments: remove comments or not
  • noImplicitAny: allow or not the use of variables / parameters without types (implicit)

Upvotes: 57

AishApp
AishApp

Reputation: 4162

tsconfig file indicates the project as typescript project and it includes options on how the typescript files to be compiled. For details check the site https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Upvotes: 1

Related Questions