【TS】快速上手（四）配置選項 - 編譯選項compilerOptions

語言: CN / TW / HK
時間 2021-11-29 19:15:06

theme: fancy highlight: a11y-dark

嗨！~ 大家好，我是YK菌 🐷 ，一個微系前端 ✨，愛思考，愛總結，愛記錄，愛分享 🏹，歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012，微信公眾號：ykyk2012]

「這是我參與11月更文挑戰的第29天，活動詳情檢視：2021最後一次更文挑戰」

今天我們主要來學習TS的編譯選項

編譯TS

自動編譯檔案

編譯檔案時，使用 -w 指令後，TS編譯器會自動監視檔案的變化，並在檔案發生變化時對檔案進行重新編譯。

powershell tsc xxx.ts -w

一個檔案一個檔案的編譯太麻煩了，我們可以對整個專案進行編譯

自動編譯整個專案

首先在專案根目錄下建立一個ts的配置檔案 tsconfig.json，然後就可以使用tsc指令，編譯專案下的所有ts檔案為js檔案，當然也可以開啟監視模式tsc -w監視所有的檔案

下面我們在介紹tsconfig.json檔案中的一些配置選項

配置選項

總覽

js { "compilerOptions": { "target": "es5", // 指定 ECMAScript 目標版本: 'ES5' "module": "commonjs", // 指定使用模組: 'commonjs', 'amd', 'system', 'umd' or 'es2015' "moduleResolution": "node", // 選擇模組解析策略 "experimentalDecorators": true, // 啟用實驗性的ES裝飾器 "allowSyntheticDefaultImports": true, // 允許從沒有設定預設匯出的模組中預設匯入。 "sourceMap": true, // 把 ts 檔案編譯成 js 檔案的時候，同時生成對應的 map 檔案 "strict": true, // 啟用所有嚴格型別檢查選項 "noImplicitAny": true, // 在表示式和宣告上有隱含的 any型別時報錯 "alwaysStrict": true, // 以嚴格模式檢查模組，並在每個檔案里加入 'use strict' "declaration": true, // 生成相應的.d.ts檔案 "removeComments": true, // 刪除編譯後的所有的註釋 "noImplicitReturns": true, // 不是函式的所有返回路徑都有返回值時報錯 "importHelpers": true, // 從 tslib 匯入輔助工具函式 "lib": ["es6", "dom"], // 指定要包含在編譯中的庫檔案 "typeRoots": ["node_modules/@types"], "outDir": "./dist", "rootDir": "./src" }, "include": [ "./src/**/*.ts" ], "exclude": [ "node_modules", "dist", "**/*.test.ts", ] }

① include

重要

  • 是一個數組，用來指定需要編譯的ts檔案，其中 *表示任意檔案 **表示任意目錄

  • 預設值：["**/*"]

json "include":["src/**/*", "test/**/*"] // 所有src目錄和test目錄下的檔案都會被編譯

② exclude

  • 定義不需要被編譯的檔案目錄

  • 預設值：["node_modules", "bower_components", "jspm_packages"]

json "exclude": ["./src/hello/**/*"] // src下hello目錄下的檔案都不會被編譯

③ extends

  • 定義被繼承的配置檔案

json "extends": "./configs/base" // 當前配置檔案中會自動包含config目錄下base.json中的所有配置資訊

④ files

  • 指定被編譯檔案的列表，只有需要編譯的檔案少時才會用到

json "files": [ "core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilities.ts", "binder.ts", "checker.ts", "tsc.ts" ] - 列表中的檔案都會被TS編譯器所編譯

⑤ compilerOptions

重要 編譯選項，在compilerOptions中包含多個子選項，用來完成對編譯的配置

對於這些選項有哪些可選值，我們可以隨便寫一個值，編輯器會提示我們有哪些可選值

image.png

① target

  • 設定ts程式碼編譯的目標版本

  • 可選值： "ES3"（預設）, "ES5", "ES6", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020", "ES2021", "ESNext".

json "compilerOptions": { "target": "ES6" } - 如上設定，我們所編寫的ts程式碼將會被編譯為ES6版本的js程式碼

② lib

  • 指定程式碼執行時所包含的庫（宿主環境）

  • 可選值："ES5", "ES6", "ES2015", "ES2015.Collection", "ES2015.Iterable", "ES2015.Promise", "DOM", "DOM.Iterable", "ScriptHost", "WebWorker", "WebWorker.ImportScripts"......

json "compilerOptions": { "lib": ["ES6", "DOM"] }

一般來說，如果是執行在瀏覽器環境下的，就不需要自己單獨設定這個

③ module

  • 設定編譯後代碼使用的模組化系統

  • 可選值："CommonJS", "AMD", "System", "UMD", "ES6", "ES2015", "ES2020", "ESNext", "None", "es2022", "node12", "nodenext"

json "compilerOptions": { "module": "CommonJS" }

④ outDir

  • 編譯後文件的所在目錄

  • 預設情況下，編譯後的js檔案會和ts檔案位於相同的目錄，設定outDir後可以改變編譯後文件的位置

json "compilerOptions": { "outDir": "./dist" } - 設定後編譯後的js檔案將會生成到dist目錄。可以將原始碼與編譯後的程式碼分開存放

⑤ outFile

  • 將所有的檔案編譯為一個js檔案

  • 預設會將所有的編寫在全域性作用域中的程式碼合併為一個js檔案，如果 module 制定了 None、System 或 AMD 則會將模組一起合併到檔案之中

json "compilerOptions": { "outFile": "./dist/app.js" }

這種合併，我們應該交給打包工具去做，我們後面會說

⑥ rootDir

  • 指定程式碼的根目錄，預設情況下編譯後文件的目錄結構會以最長的公共目錄為根目錄，通過rootDir可以手動指定根目錄

json "compilerOptions": { "rootDir": "./src" }

⑦ 其他配置

| 標題 | 功能 | | --- | --- | | allowJs | 是否對js檔案編譯，預設值：false | | checkJs | 是否對js檔案進行語法檢查，預設值：false | | removeComments | 是否刪除註釋，預設值：false | | noEmit | 不生成編譯後的檔案，預設值：false | | noEmitOnError | 當有錯誤的時候不生成編譯後的檔案，預設值：false | | sourceMap | 是否生成sourceMap，預設值：false |

⑧ 嚴格檢查

| 標題 | 功能 | | --- | --- | | strict | 啟用所有的嚴格檢查，設定後相當於開啟了所有的嚴格檢查，預設值：false | | alwaysStrict | 總是以嚴格模式對程式碼進行編譯，預設值：false | | noImplicitAny | 禁止隱式的any型別，預設值：false | | noImplicitThis | 禁止型別不明確的this，預設值：false | | strictBindCallApply | 嚴格檢查bind、call和apply的引數列表，預設值：false | | strictFunctionTypes | 嚴格檢查函式的型別，預設值：false | | strictNullChecks | 嚴格的空值檢查，預設值：false | | strictPropertyInitialization | 嚴格檢查屬性是否初始化，預設值：false |

⑨ 額外檢查

| 標題 | 功能 | | --- | --- | | noFallthroughCasesInSwitch | 檢查switch語句包含正確的break | | noImplicitReturns | 檢查函式沒有隱式的返回值 | | noUnusedLocals | 檢查未使用的區域性變數 | | noUnusedParameters | 檢查未使用的引數 | | allowUnreachableCode | 檢查不可達程式碼；true：忽略不可達程式碼，false：不可達程式碼將引起錯誤 | | noEmitOnError | 有錯誤的情況下不進行編譯，預設值：false |

最後，歡迎關注我的專欄，和YK菌做好朋友

「其他文章」
「」
「」