tsconfig配置文件讲解

最新推荐文章于 2025-06-26 15:24:03 发布

原创最新推荐文章于 2025-06-26 15:24:03 发布 · 5.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#tsconfig

前端专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了在基于TypeScript的React项目中，tsconfig.json文件的作用和各项配置选项。包括`noImplicitAny`、`target`、`jsx`等关键配置，它们分别用于控制类型检查、指定编译后的JavaScript版本以及处理React JSX语法。此外，还包括了`module`、`moduleResolution`等与模块系统和模块解析相关的设置。

搭建基于ts的react项目后，可以看到项目目录下有个tsconfig.json文件

打开这个tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false, //不需要显示的声明变量的类型any
    "target": "es5", //编译后的目标javascript版本， ES5, ES6/ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ESNext
    "lib": [
      "dom", // document.getElementById('root')
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true, //允许混合编译Javascript文件
    "skipLibCheck": true,
    "esModuleInterop": true, //允许我们使用commonjs的方式import默认文件， import React from 'react'
    // "esModuleInterop": false,  import * as React from 'react'
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext", //配置的是我们代码的模块系统， Node.js的CommonJS、ES6标准的esnext、requireJs的AMD
    "moduleResolution": "node", //决定了我们编译器的工作方式，"node" and "classic", 但classic在2019年已经废弃，现在只剩node可以选择了
    "resolveJsonModule": true,
    "isolatedModules": true, //编译器会将每个文件作为单独的模块来使用
    "noEmit": true, //表示当发生错误的时候，编译器不会生成JavaScript代码
    "jsx": "react-jsx" //允许编译器支持编译react代码
  },
  "include": [
    "src"
  ]
}