What is the purpose of tsconfig.json?

Question

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"
    ]
}

Procedure

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

+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. – Treadle

Agreed @sgroves. This is a valid question. – Pretend

Answer 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)

Spannew

Answer 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.

Ssw

Answer 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

Danaus

Answer 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

Vaal

Answer 5

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",

Lobeline

Answer 6

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 .

Biggin