在React中使用TypeScript：配置文件tsconfig.json的说明

项目布局

已经使用命令npx create-react-app react-ts-basic --template typescript创建了一个支持typescript的项目，名称为react-ts-basic，项目创建完成以后，文件布局为：

package.json文件的内容：

{
  "name": "react-ts-basic",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.105",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

配置文件tsconfig.json说明

项目创建成功后，自动生成的tsconfig.json文件的的内容：

tsconfig.json指定项目文件和项目编译所需的配置项。
但是，TS的配置项非常多：
https://www.typescriptlang.org/tsconfig/

下面是以CRA项目（CRA是create-react-app的简写）为例来说明。

1）tsconfig.json文件所在的目录为项目根目录，与package.json文件同级。
2）tsconfig.json文件在创建项目的时候自动生成，也可以单独使用tsc --init命令来生成。

要查看tsconfig.json某个配置项的作用，可以把鼠标放在上面，就会自动提示，点击给出的网址进去，可以更加详细地了解：

• include：指定允许TS处理的目录。
• target：指定生成代码的语言版本。
• lib：指定要包含在编译中的库，这里边包含的默认就全部已经提供了，就可以直接使用了。例如，dom已经包含进去了，因此document中的所有的就可以使用了：
  

如果将dom从lib配置中移除，在组件中使用document的时候就会提醒找不到document：

• allowJs：指定是否允许TS编译器编译js文件。

• skipLibCheck：跳过.d.ts声明文件的类型检查。

• esModuleInterop：es模块互操作，屏蔽ESModule 和 CommonJS之间的差异。

• allowSyntheticDefaultImports：允许通过 import x from ‘y’，即使模块没有显式指定default导出。

• strict：开启严格模式。严格模式又包含了很多内容：
  https://www.typescriptlang.org/tsconfig/#strict
  

• forceConsistentCasingInFileNames：对文件名强制区分大小写。

• noFallthroughCasesInSwitch：为switch语句启用错误报告。
  https://www.typescriptlang.org/tsconfig/#noFallthroughCasesInSwitch
  

• module：指定生成代码的模块化标准。除了esnext以外，还支持很多标准：
  https://www.typescriptlang.org/tsconfig/#module
  

• moduleResolution：模块解析（查找）策略。

• resolveJsonModule：是否允许导入.json文件。

• isolatedModules：是否将没有 import/export的文件视为旧的（全局而非模块化）脚本文件。

• noEmit：编译时不生成任何文件（只进行类型检查）。如果配置为false，就是不让TS生成可在js环境中运行的js文件，而是使用其它工具，例如Babel、或者swc。
  https://www.typescriptlang.org/tsconfig/#noEmit
  

• jsx：指定用JSX写的代码编译为什么样的代码形式。
  https://www.typescriptlang.org/tsconfig/#jsx