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 项目,包括前端和后端应用。

相关推荐
麦麦大数据34 分钟前
M004_基于Langchain+RAG的银行智能客服系统设计与开发
typescript·langchain·flask·vue3·faiss·rag
菜鸟小芯44 分钟前
【GLM-5 陪练式前端新手入门】第五篇:响应式适配 —— 让个人主页 “见机行事”
前端·人工智能
无名之逆2 小时前
你可能不需要WebSocket-服务器发送事件的简单力量
java·开发语言·前端·后端·计算机·rust·编程
加农炮手Jinx2 小时前
Flutter for OpenHarmony:web_socket_channel 全平台 WebSocket 通信标准库,从原理到鸿蒙实战(3000字深度解析)
android·前端·网络·websocket·flutter·华为·harmonyos
王码码20352 小时前
Flutter for OpenHarmony:web_socket 纯 Dart 标准 WebSocket 客户端(跨平台兼容性之王) 深度解析与鸿蒙
android·前端·websocket·网络协议·flutter·华为·harmonyos
柳杉2 小时前
使用AI从零打造炫酷的智慧城市大屏(开源):React + Recharts 实战分享
前端·javascript·数据可视化
Highcharts.js2 小时前
玩转Highcharts气泡图|从散点图到气泡图:增加一个维度,数据可视化瞬间立体起来
javascript·信息可视化·散点图·highcharts·图表开发·气泡图·图表创建
A_B_C_Q3 小时前
StringBuilder 与 StringBuffer的区别
java·前端
颜酱3 小时前
差分数组:高效处理数组区间批量更新的核心技巧
javascript·后端·算法
洋洋技术笔记3 小时前
vue3+vite+elementplus简单介绍
前端