【TS】快速上手(四)配置選項 - 編譯選項compilerOptions
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中包含多個子選項,用來完成對編譯的配置
對於這些選項有哪些可選值,我們可以隨便寫一個值,編輯器會提示我們有哪些可選值
① 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菌做好朋友
- 【TS】快速上手(四)配置選項 - 編譯選項compilerOptions
- 【LeetCode】圖解反轉連結串列 - 迭代 - 遞迴
- 【LeetCode】最大子序和從O(N^3)到O(N) - 暴力初探 - 分而治之 - 線上處理
- 【JS】JavaScript基礎知識自我檢查大過關(第三關)函式定義與呼叫
- 【Vue】高階系列(六)Vue-cli配置代理 -demo3-GitHub使用者查詢-axios
- 【Vue】高階系列(五)元件間通訊
- 【Vue】高階系列(四)Vue模組化實戰-demo2-任務清單todoList
- 【TS】快速上手(二)型別宣告
- 【Vue】高階系列(三)Vue模組化實戰-demo1-動態評價頁面
- 【Vue】高階系列(二)Vue相關小知識
- 【Vue】高階系列(一)Vue元件定義與使用 - 非單檔案元件 - 單檔案元件 - VueComponent
- 【Vue】基礎系列(十一)Vue指令-常用內建指令-自定義指令-全域性指令-區域性指令
- 【Vue】基礎系列(九)動畫與過渡-trasition-enter-leave
- 【Vue】基礎系列(八)生命週期 - 初始化顯示 - 更新狀態 - 死亡狀態 - 父子元件
- 【Vue】基礎系列(七)v-model - 自動收集資料 - 表單資料自動更新
- 【Vue】基礎系列(六)事件處理 - 繫結監聽 - 事件修飾符 - 按鍵修飾符
- 【Vue】基礎系列(四)樣式繫結 - class - style
- 【Vue】基礎系列(二)模板語法 - 插值語法 - 指令語法 - | v-bind | v-model | v-on | v-if | v- show
- 【Vue】實戰專案:電商後臺管理系統(九)專案優化 上線
- 【Vue】實戰專案:電商後臺管理系統(八)資料統計模組