what is the purpose of tsconfig.json?

Question

I was reading angular2 referrences 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"
    ]
}

Solution 1

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

These links could give you details about these attributes:

• http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
• http://json.schemastore.org/tsconfig
• https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#tsconfig

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)

Solution 2

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.

Solution 3

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

Solution 4

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

View more solutions

Comments

[Alex]

typescriptlang.org/docs/handbook/tsconfig-json.html

[user428517]

+1 for a good question. Reading docs (especially for typescript or Angular) often makes you more confused than when you started. Having someone explain it on a site this is great.

[frosty]

Agreed @sgroves. This is a valid question.