![[TypeScript学习笔记-02]tsc:TypeScript编译器](http://pic.xiahunao.cn/yaotu/[TypeScript学习笔记-02]tsc:TypeScript编译器)
tsc是 TypeScript 的官方编译器它的作用就是把.ts文件编译成标准的.js文件供浏览器或 Node.js 执行。核心功能包括类型检查在编译阶段发现类型错误提升代码安全性。语法转换把 TypeScript 特性如接口、泛型、装饰器转换为兼容的 JavaScript配置驱动通过tsconfig.json控制编译行为目标版本、模块系统、严格模式等增量编译支持--watch模式实时监控文件变化并重新编译。常用命令行开关–pretty启用彩色和格式化输出让编译错误更易读。默认true–declaration / -d为项目生成.d.ts类型声明文件。默认false除非composite为 true–declarationMap为.d.ts文件生成 source map方便调试。默认false–emitDeclarationOnly只输出.d.ts文件不生成 JavaScript。默认false–sourceMap为编译后的 JavaScript 生成 source map 文件。默认false–noEmit禁止输出任何文件只做类型检查。默认false–target / -t指定输出的 JavaScript 版本如 ES2015、ES2020、ESNext。默认ES2025–module / -m指定生成的模块系统如 CommonJS、ESNext、Node16。默认undefined–lib指定运行环境的库声明文件如dom、es2020。默认undefined–allowJs允许 JavaScript 文件参与编译。默认false–checkJs对 JavaScript 文件进行类型检查。默认false–jsx指定 JSX 的编译方式如react-jsx、preserve。默认undefined–outFile将所有输出打包到一个 JS 文件中。–outDir指定输出目录。–removeComments移除输出文件中的注释。默认false–strict启用所有严格类型检查选项包含noImplicitAny等。默认true–types指定需要包含的类型包如types/node。–esModuleInterop增加额外的 JS 代码以支持 CommonJS 默认导入。默认true上面这些编译器开关可以定义在tsconfig.json配置文件中。1. 编译失败是否依然输出TypeScript代码在默认情况下TypeScript 的态度是虽然你写错了但我还是帮你编译。即使你的.ts代码中满是红线报错执行tsc依然会强行生成.js文件。这会导致带病上线不小心把含有潜在崩溃风险的 JS 代码部署到了生产环境;调试混乱运行时的报错堆栈与你以为的代码逻辑不一致。可以设置--noEmitOnError编译器选项确保在编译失败是不要生成.js代码。app.ts:functiongreet(person:string,date:Date){console.log(Hello${person}, today is${date}!);}greet(Alice);$tsc--noEmitOnErrorfalse--ignoreConfigapp.tsapp.jsexportfunctiongreet(person,date){console.log(Hello${person}, today is${date}!);}greet(Alice);//# sourceMappingURLapp.js.map2. 降级编译降级编译(Downleveling)是 TypeScript 编译器的核心功能之一。简单来说它的作用是把你用现代、高级的 JavaScript 语法如ESNext写的代码翻译成旧版本 JavaScript如ES6也能完美运行的等价代码。如下所示**可选链操作符?.**是在 ECMAScript 2020简称 ES2020也被称为 ES11 版本中正式引入并支持的。app.ts:constuser{name:张三,profile:{age:18}};constageuser.profile?.age;console.log(age);如果按照如下的方式面向es6进行编译会生成如下的JS代码。$tsc--targetes6--ignoreConfigapp.tsvar_a;constuser{name:张三,profile:{age:18}};constage(_auser.profile)null||_avoid0?void0:_a.age;console.log(age);export{};//# sourceMappingURLapp.js.map3. 禁止“隐式 any”类型如果 TypeScript 无法推断变量或参数的类型它会自动赋予any类型允许任意操作但失去类型检查。--noImplicitAny是 TypeScript 编译器的一个严格检查开关它会在编译时禁止隐式 any类型强制开发者显式声明类型从而提升类型安全性和代码可维护性。开启--noImplicitAny会让编译器会报错提示你必须显式声明类型避免无意间使用any。app.ts:functiongreet(person,date){console.log(Hello${person}, today is${date}!);}$tsc--noImplicitAny--ignoreConfigapp.ts app.ts:1:16 - error TS7006: Parameterpersonimplicitly has ananytype.1functiongreet(person,date){~~~~~~ app.ts:1:24 - error TS7006: Parameterdateimplicitly has ananytype.1functiongreet(person,date){~~~~ Found2errorsinthe same file, starting at: app.ts:14. 处理 null 和 undefined默认情况下null和undefined等值可以赋值给任何其他类型。这虽然可以简化一些代码编写但忘记处理null和undefined会导致无数 bug。--strictNullChecks开关使null和undefined的处理更加明确也让我们不必担心是否忘记处理它们。未开启null和undefined可以赋值给任何类型编译器不会报错。开启后null和undefined只能赋值给显式包含它们的类型例如string | null或number | undefined。app.ts:functiongreet(person:string,date:Date){console.log(Hello${person}, today is${date}!);}greet(null,newDate())$tsc--strictNullChecks--ignoreConfigapp.ts app.ts:5:7 - error TS2345: Argument oftypenullis not assignable to parameter oftypestring.5greet(null, new Date())~~~~ Found1errorinapp.ts:5
tsc是 TypeScript 的官方编译器它的作用就是把.ts文件编译成标准的.js文件供浏览器或 Node.js 执行。核心功能包括类型检查在编译阶段发现类型错误提升代码安全性。语法转换把 TypeScript 特性如接口、泛型、装饰器转换为兼容的 JavaScript配置驱动通过tsconfig.json控制编译行为目标版本、模块系统、严格模式等增量编译支持--watch模式实时监控文件变化并重新编译。常用命令行开关–pretty启用彩色和格式化输出让编译错误更易读。默认true–declaration / -d为项目生成.d.ts类型声明文件。默认false除非composite为 true–declarationMap为.d.ts文件生成 source map方便调试。默认false–emitDeclarationOnly只输出.d.ts文件不生成 JavaScript。默认false–sourceMap为编译后的 JavaScript 生成 source map 文件。默认false–noEmit禁止输出任何文件只做类型检查。默认false–target / -t指定输出的 JavaScript 版本如 ES2015、ES2020、ESNext。默认ES2025–module / -m指定生成的模块系统如 CommonJS、ESNext、Node16。默认undefined–lib指定运行环境的库声明文件如dom、es2020。默认undefined–allowJs允许 JavaScript 文件参与编译。默认false–checkJs对 JavaScript 文件进行类型检查。默认false–jsx指定 JSX 的编译方式如react-jsx、preserve。默认undefined–outFile将所有输出打包到一个 JS 文件中。–outDir指定输出目录。–removeComments移除输出文件中的注释。默认false–strict启用所有严格类型检查选项包含noImplicitAny等。默认true–types指定需要包含的类型包如types/node。–esModuleInterop增加额外的 JS 代码以支持 CommonJS 默认导入。默认true上面这些编译器开关可以定义在tsconfig.json配置文件中。1. 编译失败是否依然输出TypeScript代码在默认情况下TypeScript 的态度是虽然你写错了但我还是帮你编译。即使你的.ts代码中满是红线报错执行tsc依然会强行生成.js文件。这会导致带病上线不小心把含有潜在崩溃风险的 JS 代码部署到了生产环境;调试混乱运行时的报错堆栈与你以为的代码逻辑不一致。可以设置--noEmitOnError编译器选项确保在编译失败是不要生成.js代码。app.ts:functiongreet(person:string,date:Date){console.log(Hello${person}, today is${date}!);}greet(Alice);$tsc--noEmitOnErrorfalse--ignoreConfigapp.tsapp.jsexportfunctiongreet(person,date){console.log(Hello${person}, today is${date}!);}greet(Alice);//# sourceMappingURLapp.js.map2. 降级编译降级编译(Downleveling)是 TypeScript 编译器的核心功能之一。简单来说它的作用是把你用现代、高级的 JavaScript 语法如ESNext写的代码翻译成旧版本 JavaScript如ES6也能完美运行的等价代码。如下所示**可选链操作符?.**是在 ECMAScript 2020简称 ES2020也被称为 ES11 版本中正式引入并支持的。app.ts:constuser{name:张三,profile:{age:18}};constageuser.profile?.age;console.log(age);如果按照如下的方式面向es6进行编译会生成如下的JS代码。$tsc--targetes6--ignoreConfigapp.tsvar_a;constuser{name:张三,profile:{age:18}};constage(_auser.profile)null||_avoid0?void0:_a.age;console.log(age);export{};//# sourceMappingURLapp.js.map3. 禁止“隐式 any”类型如果 TypeScript 无法推断变量或参数的类型它会自动赋予any类型允许任意操作但失去类型检查。--noImplicitAny是 TypeScript 编译器的一个严格检查开关它会在编译时禁止隐式 any类型强制开发者显式声明类型从而提升类型安全性和代码可维护性。开启--noImplicitAny会让编译器会报错提示你必须显式声明类型避免无意间使用any。app.ts:functiongreet(person,date){console.log(Hello${person}, today is${date}!);}$tsc--noImplicitAny--ignoreConfigapp.ts app.ts:1:16 - error TS7006: Parameterpersonimplicitly has ananytype.1functiongreet(person,date){~~~~~~ app.ts:1:24 - error TS7006: Parameterdateimplicitly has ananytype.1functiongreet(person,date){~~~~ Found2errorsinthe same file, starting at: app.ts:14. 处理 null 和 undefined默认情况下null和undefined等值可以赋值给任何其他类型。这虽然可以简化一些代码编写但忘记处理null和undefined会导致无数 bug。--strictNullChecks开关使null和undefined的处理更加明确也让我们不必担心是否忘记处理它们。未开启null和undefined可以赋值给任何类型编译器不会报错。开启后null和undefined只能赋值给显式包含它们的类型例如string | null或number | undefined。app.ts:functiongreet(person:string,date:Date){console.log(Hello${person}, today is${date}!);}greet(null,newDate())$tsc--strictNullChecks--ignoreConfigapp.ts app.ts:5:7 - error TS2345: Argument oftypenullis not assignable to parameter oftypestring.5greet(null, new Date())~~~~ Found1errorinapp.ts:5
