React 项目根目录中的 tsconfig.json 文件说明

在 React 项目中引入 TSLint 做代码规范 这篇文章中，介绍了如何在 Create React App 项目中引入 TSLint ，但在 Create React App 项目根目录中还存在一个与 tslint.json 文件很相似的 tsconfig.json 的配置文件，那么本篇文章主要介绍这个 tsconfig.json 的配置文件是 如何产生、有什么作用 以及 如何配置 各个配置项的问题。

tsconfig.json 的配置文件是如何产生的：

在 React 项目中引入 TSLint 做代码规范 这篇文章中的 步骤2 中执行 npm install tslint typescript  --save-dev 命令后安装了 typescript 后自动创建 tsconfig.json 配置文件，即 tsconfig.json 文件是使用 typescript 的一个必须文件，在自动创建 tsconfig.json 文件后，该文件中已有默认配置。

tsconfig.json 的配置文件有什么作用

tsconfig.json 文件中指定了用来编译这个项目的根文件和编译选项。 一个项目可以通过以下方式之一来编译：

a、创建一个 greeter.ts 文件，并写入以下代码（如果想拷贝以下代码请在 Typescript 中拷贝）：

b、打开命令行工具运行 tsc greeter.ts 输出结果为一个 greeter.js 文件，它包含了和输入文件中相同的JavsScript代码（greeter.ts 又叫输入文件， greeter.js 又叫输出文件）。

编译方式1：不带任何输入文件的情况下调用 tsc，编译器会从当前目录开始去查找 tsconfig.json 文件，逐级向上搜索父目录。

编译方式2：不带任何输入文件的情况下调用 tsc，且使用命令行参数 --project（或-p）指定一个包含 tsconfig.json 文件的目录。

注意： 当命令行上指定了输入文件时，tsconfig.json文件会被忽略。

tsconfig.json 如何配置各个配置项

tsconfig.json 文件的各个配置项，以及各个配置项的作用请参考 tsconfig.json，我的项目中 tsconfig.json 文件中的配置项如下（没有使用截图，方便拷贝）：

{

  "compileOnSave": false,

  "compilerOptions": {

    "noImplicitReturns": true,

    "sourceMap": true,

    "declaration": false,

    "target": "es5",

    "typeRoots": [

      "types",

      "node_modules/@types"

    ],

    "lib": [

      "dom",

      "dom.iterable",

      "esnext"

    ],

    "skipLibCheck": true,

    "esModuleInterop": true,

    "allowSyntheticDefaultImports": true,

    "strict": true,

    "forceConsistentCasingInFileNames": true,

    "module": "esnext",

    "moduleResolution": "node",

    "resolveJsonModule": true,

    "isolatedModules": true,

    "noEmit": true,

    "jsx": "preserve",

    "allowJs": true

  },

  "include": [

    "src"

  ]

}

参考网址：

https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

https://www.tslang.cn/docs/handbook/tsconfig-json.html

https://www.tslang.cn/docs/handbook/compiler-options.html

https://www.jianshu.com/p/f7f96bd723fd