tsconfig.json 的目的是啥？

Posted 2023-03-13

【中文标题】tsconfig.json 的目的是啥？

【英文标题】：what is the purpose of tsconfig.json?tsconfig.json 的目的是什么？

【发布时间】：2016-09-21 15:57:06

【问题描述】：

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

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

【问题讨论】：

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

+1 提出一个好问题。阅读文档（尤其是 typescript 或 Angular）通常会让你比刚开始时更加困惑。有人在网站上解释它很棒。

同意@sgroves。这是一个有效的问题。

【参考方案1】：

tsconfig.json文件对应TypeScript编译器（tsc）的配置。

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

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

这里有一些提示：

目标

：用于编译输出的语言

module

：编译输出中使用的模块管理器。 system 用于 SystemJS，commonjs 用于 CommonJS。

moduleResolution

：用于解析模块声明文件（.d.ts 文件）的策略。使用node 方法，它们像模块一样从node_modules 文件夹加载(require('module-name'))

sourceMap

：生成或不生成源映射文件以在浏览器中直接调试您的应用程序 TypeScript 文件，

emitDecoratorMetadata

：为源中的装饰声明发出或不发出设计类型元数据，

experimentalDecorators

：启用或不启用对 ES7 装饰器的实验性支持，

removeComments

：是否删除 cmets

noImplicitAny

：允许或不允许使用没有类型的变量/参数（隐式）

【参考方案2】：

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

【参考方案3】：

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

编译器应按照上述配置执行：

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

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

"moduleResolution": "node" => 确定模块的解析方式

"sourceMap": true => 生成对应的‘.map’文件，以便在生产代码中使用调试。

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

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

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

【参考方案4】：

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

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

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

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

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

【参考方案5】：

上面涵盖了大部分要点。一些我想强调的错过了。

tsconfig.json 将告诉构建代码在哪里以及要定位到哪个版本。

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

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

而且我们的浏览器不理解typescript，所以请说明我们的代码转换哪种类型的js，浏览器会理解。

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

  "target": "es2015",

【参考方案6】：

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