tsconfig.json 的目的是什么？

Question

我在阅读 angular2 参考资料时发现了这个 tsconfig.json。我想知道下面的参数是什么意思？

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

Answer 1

tsconfig.json文件对应TypeScript编译器(tsc)的配置

这些链接可以为您提供有关这些属性的详细信息：

这里有一些提示：

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

Answer 2

tsconfig 文件表示该项目为 typescript 项目，它包含有关如何编译 typescript 文件的选项。有关详细信息，请查看网站 https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Answer 3

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

编译器应按照提到的配置执行：

"target": "es5" => 将 es6 编译为 es5 以便它与浏览器兼容。

"module": "system" => 指定模块代码生成 (commonjs', 'amd', 'system', 'umd', 'es6' 等)

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

"sourceMap": true => 生成相应的'.map'文件，以便在生产代码中进行调试。

"removeComments": false => 删除所有评论，除了 copy-right header 以 /*!

开头的评论

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

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

Answer 4

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

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.

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

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

Answer 5

上面涵盖了大部分要点。有些被遗漏了，我想强调一下。

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

例如，当它投入生产时，它将参考 tsconfig.json 中的以下键并选择构建。

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

而且我们的浏览器不理解打字稿，所以请说明将我们的代码转换为哪种类型的 js，以便浏览器理解。

换句话说，我们用 typescript 编写代码，但将该代码带到 es5，我们使用以下字段执行此操作。

  "target": "es2015",

Answer 6

如您所知，浏览器只能接受 javascript 个文件，但是当您使用 angular 时，您不会使用 javascript。相反，您使用打字稿文件 .. 所以现在我们需要一种方法将这些打字稿文件更改为 js 文件。它由 tsconfig.json 文件完成，该文件指定了我们需要执行此更改的配置选项。比如编译选项和根文件.

tsconfig.json 的目的是什么？

what is the purpose of tsconfig.json?

json

typescript

angular

tsconfig