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做类型检查。