tsc是 TypeScript 的官方編譯器它的作用就是把.ts文件編譯成標(biāo)準(zhǔn)的.js文件供瀏覽器或 Node.js 執(zhí)行。核心功能包括類(lèi)型檢查在編譯階段發(fā)現(xiàn)類(lèi)型錯(cuò)誤提升代碼安全性。語(yǔ)法轉(zhuǎn)換把 TypeScript 特性如接口、泛型、裝飾器轉(zhuǎn)換為兼容的 JavaScript配置驅(qū)動(dòng)通過(guò)tsconfig.json控制編譯行為目標(biāo)版本、模塊系統(tǒng)、嚴(yán)格模式等增量編譯支持--watch模式實(shí)時(shí)監(jiān)控文件變化并重新編譯。常用命令行開(kāi)關(guān)–pretty啟用彩色和格式化輸出讓編譯錯(cuò)誤更易讀。默認(rèn)true–declaration / -d為項(xiàng)目生成.d.ts類(lèi)型聲明文件。默認(rèn)false除非composite為 true–declarationMap為.d.ts文件生成 source map方便調(diào)試。默認(rèn)false–emitDeclarationOnly只輸出.d.ts文件不生成 JavaScript。默認(rèn)false–sourceMap為編譯后的 JavaScript 生成 source map 文件。默認(rèn)false–noEmit禁止輸出任何文件只做類(lèi)型檢查。默認(rèn)false–target / -t指定輸出的 JavaScript 版本如 ES2015、ES2020、ESNext。默認(rèn)ES2025–module / -m指定生成的模塊系統(tǒng)如 CommonJS、ESNext、Node16。默認(rèn)undefined–lib指定運(yùn)行環(huán)境的庫(kù)聲明文件如dom、es2020。默認(rèn)undefined–allowJs允許 JavaScript 文件參與編譯。默認(rèn)false–checkJs對(duì) JavaScript 文件進(jìn)行類(lèi)型檢查。默認(rèn)false–jsx指定 JSX 的編譯方式如react-jsx、preserve。默認(rèn)undefined–outFile將所有輸出打包到一個(gè) JS 文件中。–outDir指定輸出目錄。–removeComments移除輸出文件中的注釋。默認(rèn)false–strict啟用所有嚴(yán)格類(lèi)型檢查選項(xiàng)包含noImplicitAny等。默認(rèn)true–types指定需要包含的類(lèi)型包如types/node。–esModuleInterop增加額外的 JS 代碼以支持 CommonJS 默認(rèn)導(dǎo)入。默認(rèn)true上面這些編譯器開(kāi)關(guān)可以定義在tsconfig.json配置文件中。1. 編譯失敗是否依然輸出TypeScript代碼在默認(rèn)情況下TypeScript 的態(tài)度是雖然你寫(xiě)錯(cuò)了但我還是幫你編譯。即使你的.ts代碼中滿(mǎn)是紅線報(bào)錯(cuò)執(zhí)行tsc依然會(huì)強(qiáng)行生成.js文件。這會(huì)導(dǎo)致帶病上線不小心把含有潛在崩潰風(fēng)險(xiǎn)的 JS 代碼部署到了生產(chǎn)環(huán)境;調(diào)試混亂運(yùn)行時(shí)的報(bào)錯(cuò)堆棧與你以為的代碼邏輯不一致。可以設(shè)置--noEmitOnError編譯器選項(xiàng)確保在編譯失敗是不要生成.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. 降級(jí)編譯降級(jí)編譯(Downleveling)是 TypeScript 編譯器的核心功能之一。簡(jiǎn)單來(lái)說(shuō)它的作用是把你用現(xiàn)代、高級(jí)的 JavaScript 語(yǔ)法如ESNext寫(xiě)的代碼翻譯成舊版本 JavaScript如ES6也能完美運(yùn)行的等價(jià)代碼。如下所示**可選鏈操作符?.**是在 ECMAScript 2020簡(jiǎn)稱(chēng) ES2020也被稱(chēng)為 ES11 版本中正式引入并支持的。app.ts:constuser{name:張三,profile:{age:18}};constageuser.profile?.age;console.log(age);如果按照如下的方式面向es6進(jìn)行編譯會(huì)生成如下的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”類(lèi)型如果 TypeScript 無(wú)法推斷變量或參數(shù)的類(lèi)型它會(huì)自動(dòng)賦予any類(lèi)型允許任意操作但失去類(lèi)型檢查。--noImplicitAny是 TypeScript 編譯器的一個(gè)嚴(yán)格檢查開(kāi)關(guān)它會(huì)在編譯時(shí)禁止隱式 any類(lèi)型強(qiáng)制開(kāi)發(fā)者顯式聲明類(lèi)型從而提升類(lèi)型安全性和代碼可維護(hù)性。開(kāi)啟--noImplicitAny會(huì)讓編譯器會(huì)報(bào)錯(cuò)提示你必須顯式聲明類(lèi)型避免無(wú)意間使用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默認(rèn)情況下null和undefined等值可以賦值給任何其他類(lèi)型。這雖然可以簡(jiǎn)化一些代碼編寫(xiě)但忘記處理null和undefined會(huì)導(dǎo)致無(wú)數(shù) bug。--strictNullChecks開(kāi)關(guān)使null和undefined的處理更加明確也讓我們不必?fù)?dān)心是否忘記處理它們。未開(kāi)啟null和undefined可以賦值給任何類(lèi)型編譯器不會(huì)報(bào)錯(cuò)。開(kāi)啟后null和undefined只能賦值給顯式包含它們的類(lèi)型例如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