tsconfig.json 常用属性配置和注释

下面是一个详细的 tsconfig.json 文件示例,其中包含了许多常用的配置选项。这个配置适用于一个使用 TypeScript 进行前端和后端开发的通用项目。

json 复制代码
{
  "compilerOptions": {
    "target": "es6",                          // 指定 ECMAScript 目标版本,这里是 ES6
    "module": "commonjs",                     // 指定生成代码的模块系统,这里是 CommonJS,适用于 Node.js
    "lib": ["dom", "es6", "dom.iterable", "scripthost"], // 编译过程中包含的库文件
    "outDir": "./dist",                       // 编译后文件输出的目录
    "rootDir": "./src",                       // 指定输入文件的根目录,用于控制输出目录结构
    "removeComments": true,                   // 删除编译后代码中的注释
    "preserveConstEnums": true,               // 保留 const enum 声明
    "sourceMap": true,                        // 生成相应的 `.map` 文件,便于调试
    "noImplicitAny": true,                    // 在表达式和声明上有隐含的 'any' 类型时报错
    "strict": true,                           // 启用所有严格类型检查选项
    "noUnusedLocals": true,                   // 报告编译后代码中未使用的局部变量错误
    "noUnusedParameters": true,               // 报告函数中未使用的参数错误
    "noImplicitReturns": true,                // 在函数中每个分支都有返回值时报错
    "noFallthroughCasesInSwitch": true,       // 防止 switch 语句贯穿
    "esModuleInterop": true,                  // 允许导入非 ES 模块(即那些没有默认导出的模块)
    "allowSyntheticDefaultImports": true,     // 允许从没有默认导出的模块默认导入
    "moduleResolution": "node",               // 模块解析策略,Node 风格,用于解析 import 语句
    "allowJs": true,                          // 允许编译器编译 JavaScript 文件
    "checkJs": false,                         // 检查并报告 JavaScript 文件中的错误(在 allowJs 启用时使用)
    "jsx": "react",                           // 支持在 TypeScript 文件中使用 JSX,这里是针对 React 框架
    "experimentalDecorators": true,           // 启用对 ES7 装饰器的支持
    "emitDecoratorMetadata": true,            // 为装饰器提供元数据支持,这在使用 Angular 等框架时可能需要
    "skipLibCheck": true,                     // 跳过库文件的类型检查,以加快编译速度
    "forceConsistentCasingInFileNames": true  // 强制文件名大小写一致性
  },
  "include": [
    "src/**/*"                                // 指定包含的源文件目录及其所有子目录
  ],
  "exclude": [
    "node_modules",                           // 排除不需要编译的目录
    "**/*.spec.ts"                            // 排除测试文件
  ],
  "typeAcquisition": {                        // 自动获取 @types 类型声明文件
    "enable": true
  }
}

解释说明

  • 编译器选项 (compilerOptions): 这部分配置了 TypeScript 编译器如何编译代码。包括指定 ECMAScript 版本,输出目录,严格模式,模块解析方式等。
  • 包含和排除文件 (includeexclude) : 这些设置定义了 TypeScript 编译器应该处理哪些文件,哪些文件应该被忽略。通常,include 用于指定源代码文件夹,而 `exclude

用于排除不需要编译的文件,如node_modules`。

  • JSX 支持 (jsx): 对于使用 React 或其他采用 JSX 语法的库的项目,需要配置此项。
  • 装饰器支持 (experimentalDecoratorsemitDecoratorMetadata): 这些选项通常在使用 Angular 或其他依赖装饰器的 TypeScript 项目中启用。

这份 tsconfig.json 配置覆盖了许多常用的 TypeScript 配置需求,适用于多种类型的 TypeScript 项目,包括前端和后端应用。

相关推荐
竹林81810 分钟前
用 wagmi v2 + viem 监听链上事件,我踩了三天坑终于搞懂了实时日志与历史补全
javascript
Momo__13 分钟前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
只一17 分钟前
😭从回调地狱到 async/await:一文打通 Ajax 与 JS 异步编程
javascript
程序员小富20 分钟前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
小小小小宇20 分钟前
程序员如何给 LLM 装工具以及看懂推理过程
前端
写代码的皮筏艇20 分钟前
React中的forwardRef
前端·react.js·面试
Flynt23 分钟前
装上TypeScript 7.0 RC之后,最让我意外不是10倍提速
typescript·visual studio code
疯狂SQL26 分钟前
手写高性能在线 JSON 工具|Web Worker 工程化打包 + 语法自动修复 + 多语言代码生成实战
typescript·json·next.js·web worker·前端性能优化·esbuild·源码实战
槑有老呆29 分钟前
花三个月工资请了个 AI 程序员,结果它连青岛啤酒股价都查不了
前端
风骏时光牛马31 分钟前
Verilog开发常见问题汇总解析
前端