TypeScript总结:17、TypeScript 编译配置速查 TypeScript 编译配置速查本文用于快速查阅tsc命令和tsconfig.json常用配置。遇到“编译什么、输出到哪里、生成什么版本”的问题可以从这里开始排查。一、常用 tsc 命令# 编译单个文件npx tsc src/index.ts# 编译当前项目npx tsc# 监听文件并自动编译npx tsc--watch# 只做类型检查不生成文件npx tsc--noEmit# 指定配置文件npx tsc--projecttsconfig.json# 查看版本npx tsc--version# 查看最终生效的配置npx tsc--showConfig二、最小可用 tsconfig{compilerOptions:{target:ES2015,module:CommonJS,rootDir:src,outDir:dist,strict:true},include:[src/**/*.ts],exclude:[node_modules,dist]}三、文件范围配置配置项作用使用建议include指定要编译的文件项目中最常用exclude排除不需要编译的文件排除依赖、构建产物和临时目录files精确列出编译文件文件很少且需要严格控制时使用extends继承其他配置多项目或多环境共享配置示例{include:[src/**/*.ts],exclude:[node_modules,dist,src/demo]}四、compilerOptions 速查编译目标和模块配置项作用target指定生成 JavaScript 的目标版本lib指定标准库和宿主环境类型module指定模块系统示例{compilerOptions:{target:ES2015,lib:[ES2015,DOM],module:CommonJS}}输入和输出配置项作用rootDir源代码根目录outDir编译结果目录outFile合并输出为单个文件适用场景有限推荐配置{compilerOptions:{rootDir:src,outDir:dist}}输出和迁移配置项作用sourceMap生成 Source MapremoveComments删除编译结果中的注释noEmit只检查不生成 JavaScriptnoEmitOnError有错误时不输出文件allowJs允许将 JavaScript 纳入编译checkJs检查 JavaScript 文件中的类型问题五、严格检查速查推荐显式开启{compilerOptions:{strict:true}}常见严格检查项配置项检查内容noImplicitAny禁止隐式anynoImplicitThis检查类型不明确的thisstrictNullChecks严格检查null和undefinedstrictFunctionTypes严格检查函数类型strictBindCallApply检查bind、call、apply参数strictPropertyInitialization检查类属性是否初始化额外检查{compilerOptions:{noFallthroughCasesInSwitch:true,noImplicitReturns:true,noUnusedLocals:true,noUnusedParameters:true}}六、不同项目的配置建议普通 Node.js 项目{compilerOptions:{target:ES2015,module:CommonJS,rootDir:src,outDir:dist,strict:true},include:[src/**/*.ts],exclude:[node_modules,dist]}浏览器或 Webpack 项目{compilerOptions:{target:ES2015,module:ES2015,strict:true,sourceMap:true},include:[src/**/*.ts]}Webpack 负责最终打包时outDir是否使用要根据构建方案决定避免和 Webpack 输出目录冲突。七、tsc、Webpack 和 Babel 的区别工具主要职责tsc类型检查和 TypeScript 编译Webpack模块依赖分析和资源打包ts-loader在 Webpack 中处理 TypeScriptBabel根据目标环境转换 JavaScript 语法babel-loader在 Webpack 中调用 Babel简单项目可以直接使用tsc需要模块打包、开发服务器或浏览器兼容时再引入 Webpack 和 Babel。八、配置排错顺序遇到编译问题时可以按以下顺序检查当前终端目录是否是项目根目录。tsconfig.json是否位于当前项目根目录。include是否匹配到源文件。exclude是否误排除了源文件。rootDir和源文件目录是否一致。outDir是否指向正确的输出目录。target和module是否匹配运行环境。是否因为strict开启而暴露了原有类型问题。九、常见报错和处理方向现象排查方向No inputs were found检查include和当前目录输出文件和源码混在一起设置outDir根目录范围错误检查rootDir类型错误但仍然有输出设置noEmitOnError空值相关报错检查strictNullChecks隐式 any 报错为参数或变量补充类型十、npm scripts 模板{scripts:{build:tsc,watch:tsc --watch,type-check:tsc --noEmit}}使用npmrun buildnpmrunwatchnpmrun type-check十一、本章小结单文件编译使用npx tsc file.ts。项目编译使用tsconfig.json和npx tsc。include、exclude、rootDir、outDir是排错重点。target和module要和运行环境保持一致。推荐显式开启strict并使用tsc --noEmit做类型检查。

相关新闻

最新新闻

动物森友会存档编辑器 NHSE 使用指南:把 Switch 存档变成任你摆布的岛屿沙盘

动物森友会存档编辑器 NHSE 使用指南:把 Switch 存档变成任你摆布的岛屿沙盘

动物森友会存档编辑器 NHSE 使用指南:把 Switch 存档变成任你摆布的岛屿沙盘 【免费下载链接】NHSE Animal Crossing: New Horizons save editor 项目地址: https://gitcode.com/gh_mirrors/nh/NHSE 如果你玩《集合啦!动物森友会》已经有一阵子&a…

2026/8/15 10:52:39
微信网页版插件安装全指南:5分钟让浏览器直接用上微信

微信网页版插件安装全指南:5分钟让浏览器直接用上微信

微信网页版插件安装全指南:5分钟让浏览器直接用上微信 【免费下载链接】wechat-need-web 让微信网页版可用 / Allow the use of WeChat via webpage access 项目地址: https://gitcode.com/gh_mirrors/we/wechat-need-web 下午六点零七分,陈晨的电…

2026/8/15 10:52:39
微信聊天记录导出实战:我用WeChatExporter把iPhone上的对话完整搬到了电脑

微信聊天记录导出实战:我用WeChatExporter把iPhone上的对话完整搬到了电脑

微信聊天记录导出实战:我用WeChatExporter把iPhone上的对话完整搬到了电脑 【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具 项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 上个月给家里老人换手机&#xff0…

2026/8/15 10:52:39
安卓端YOLOv26无训练目标检测实战:从模型部署到特定对象识别

安卓端YOLOv26无训练目标检测实战:从模型部署到特定对象识别

在移动端实现实时目标检测一直是计算机视觉领域的挑战,尤其是将强大的YOLO系列模型部署到资源受限的安卓设备上。最近,YOLOv10和YOLOv11的讨论热度很高,但YOLOv26作为一个社区驱动的、极具探索性的项目,以其独特的“无训练识别”概…

2026/8/15 10:52:39
SMB与NFS文件共享协议详解及实践指南

SMB与NFS文件共享协议详解及实践指南

1. 文件共享协议基础概念 文件共享协议是计算机网络中实现不同设备间文件资源共享的核心技术手段。简单来说,它就像一套标准化的"语言规则",让Windows、Linux、macOS等不同操作系统的设备能够互相理解对方的文件访问请求。 在实际工作中&…

2026/8/15 10:52:39
从URL到安全分发:深入解析下载链接的设计原理与工程实践

从URL到安全分发:深入解析下载链接的设计原理与工程实践

1. 从“下载链接”说起:一个被忽视的互联网基石 今天想聊一个看似简单,但背后门道极深的话题——下载链接。你可能觉得这有什么好聊的?不就是一串网址,点一下就开始下载文件吗?确实,对于绝大多数普通用户来…

2026/8/15 10:47:39