typescript tsconfig.json 的目的是什么？

what is the purpose of tsconfig.json?

提问by Bhushan Gadekar

I was reading angular2 referrences and found this tsconfig.json. I would like to know what the following parameters mean?

我正在阅读 angular2 参考资料并找到了这个tsconfig.json。我想知道以下参数是什么意思？

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

采纳答案by Thierry Templier

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

该tsconfig.json文件对应于 TypeScript 编译器 (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

• 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. systemis for SystemJS, commonjsfor CommonJS.
• moduleResolution: the strategy used to resolve module declaration files (.d.tsfiles). With the nodeapproach, they are loaded from the node_modulesfolder 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)

• target: 用于编译输出的语言
• module: 编译输出中使用的模块管理器。system用于 SystemJS，commonjs用于 CommonJS。
• moduleResolution：用于解析模块声明文件（.d.ts文件）的策略。通过这种node方法，它们node_modules像模块一样从文件夹中加载( require('module-name'))
• sourceMap：生成或不生成源映射文件以在浏览器中直接调试您的应用程序 TypeScript 文件，
• emitDecoratorMetadata：为源中的装饰声明发出或不发出设计类型元数据，
• experimentalDecorators：启用或不ES7装饰实验支持，
• removeComments: 是否删除评论
• noImplicitAny：允许或不允许使用没有类型的变量/参数（隐式）

回答by Soumya

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

tsconfig.json表示保存它的目录是 TypeScript 项目的根目录。该tsconfig.json文件指定了编译项目所需的根文件和编译器选项。

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.

"target": "es5"=> 将 es6 编译为 es5，使其与浏览器兼容。

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

"module": "system"=> 指定模块代码生成（commonjs', 'amd', 'system', 'umd', 'es6' etc）

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

"moduleResolution": "node"=> 确定如何解析模块

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

"sourceMap": true=> 生成相应的“.map”文件，以便在生产代码中用于调试。

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

"removeComments": false=> 删除除以 /*! 开头的版权标题注释之外的所有注释。

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

"noImplicitAny": false=> 使用隐含的“any”类型引发表达式和声明错误。

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.

如果指定了“排除”属性，则编译器将包含包含目录和子目录中的所有 TypeScript（*.ts 或 *.tsx）文件，但排除的文件或文件夹除外。

回答by Hameed Syed

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

已经有很多答案了，但我想再补充一点，说明为什么需要 tsconfig。根据角度文档

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.

TypeScript 是 Angular 应用程序开发的主要语言。它是 JavaScript 的超集，在设计时支持类型安全和工具。

浏览器不能直接执行 TypeScript。必须使用 tsc 编译器将打字稿“转换”为 JavaScript，这需要一些配置。

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

通常，您将一个名为 tsconfig.json 的 TypeScript 配置文件添加到您的项目中，以指导编译器生成 JavaScript 文件。

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

有关更多信息https://angular.io/guide/typescript-configuration

回答by AishApp

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

tsconfig 文件将项目指示为打字稿项目，它包括有关如何编译打字稿文件的选项。有关详细信息，请查看站点https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

回答by Viyaan Jhiingade

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.

tsconfig.json 将告诉构建代码在哪里以及目标版本。

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

例如，当它进入生产环境时，它将引用 tsconfig.json 中的以下键并选择构建。

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

而且我们的浏览器不理解打字稿，因此请提及哪种类型的 js 来转换我们的代码将被浏览器理解。

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

换句话说，我们在打字稿中编写我们的代码，但将该代码带到 es5，我们使用下面的字段来做到这一点。

  "target": "es2015",