前言：
昨天我們學習了 TS 的資料型別，不知道大家回去以后練習沒練習，如果你練習了一定會發現一個問題，我們的 TS 好像和 JS 不太一樣
JS 寫完之后直接就可以放到頁面上，就可以用了，而我們的 TS 需要用 tsc 編譯一下，編譯為 JS 才能在頁面中使用
這時就會有同學說了，誒呀，六扇老師，這也太麻煩了吧！
別急，好好閱讀今天的文章，關于 TS 的編譯選項
編譯選項：
自動編譯檔案：
編譯檔案時，使用 -w 指令后， TS 編譯器會自動監視檔案的變換，如果 TS 檔案變化會自動重新進行編譯
tsc xxx.ts -w
圖片示例：
自動編譯成功了，問題也就來了，我們發現這樣雖然是不用手動編譯了，但我有兩個 TS 檔案呢，我需要打開兩個視窗，輸入兩遍 tsc xxx.ts -w 那我要是有十個呢，百個呢？
自動編譯整個專案：
我們在實際開發，寫專案的時候，都看過組態檔吧，我們的 TS 也有，叫 tsconfig.json
tsconfig.json 是一個 JSON 檔案，添加完組態檔之后，只需要在命令列中輸入 tsc -w 即可完成對整個專案的自動編譯
那怎么創建 tsconfig.json 檔案呢，有的編輯器會自帶，右鍵就可以創建了
如果不自帶，自己新建檔案創建就行了，創建完的 tsconfig.json 檔案放那就行，打開命令列直接輸入 tsc -w
這時我們專案下的所有 TS 檔案都會被自動編譯
tsconfig.json的配置選項：
雖然整個專案都被編譯了，但我們正常開發的時候肯定是用不到整個專案編譯的，都是指定某個檔案下，或幾個檔案，這時就需要配置選項了
include：
是我們最常用的配置選項，指定被編譯檔案的目錄
默認值： [ " **/* " ]
** 表示 任意目錄 * 表示 任意檔案 " src/**/* " 就表示 src 下的任意目錄任意檔案
exclude:
上邊說了， include 表示包含指定的意思，而我們的 exclude 正好相反，表示不包含
不希望被編譯
什么意思呢，比如說我們在 src 里面又新加了一個 hello 檔案夾，里面有一個 ts 檔案，這時在執行那肯定都被編譯，但我不想讓 hello 目錄下的 ts 檔案被編譯 怎么做
如圖，只有 src 目錄下的 app.ts 被編譯了
exclude 是可選的，一般的話不需要寫，它默認值是 ["node_modules","bower_commponents","jspm_packages"]
extends：
定義被繼承的組態檔
”extends“：”./configs/base“
當前組態檔中會自動包含 config 目錄下 base.json 中的所有配置資訊
files：
指定被編譯檔案的串列，和 inclued 差不多 不過一個是檔案 一個是目錄
"files":[
"core.ts",
"sys.ts",
.....
]
compilerOptions:
conmpilerOptions 決定了編譯器如何對我們的 ts 檔案進行編譯
里面有很多的子選項
target
用來設定 ts 代碼的目標版本
可選值：
ES3,ES5,ES5/ES2015,ES7/ES2016,ES2017,ES2018,ES2019,ES2020,ESNext
語法： "compilerOptions":{ "target": "ES3", }
module
用來指定使用的模塊化規范
可選值：
none,commonjs,ES5/ES2015,ES7/ES2016,amd,system,ES2020,ESNext
語法：
"compilerOptions":{ "module": "ES2015", }lib
用來指定專案中所要用的庫
一般情況下不需要改，正常在瀏覽器當中運行的代碼 lib 是不需要設定的
語法：
"compilerOptions":{ "lib": ["es5","es6"."dom".....], }outDir
我們編譯完 ts 生成 js 檔案之后，我們的 js 檔案是和 ts 檔案在一起的，在正常開發的時候我們不希望它倆生成在同一個檔案下邊，就用到 outDir 了
語法：
"compilerOptions":{ "outDir": "./dist“, }
outFile
可以將我們的代碼合并為一個檔案
語法：
"compilerOptions":{ "outFile": "./dist/app.js“, }
allowJs chenckJs removeComments noEmit noEmitOnError
allowJs 意思是，是否對我們的 js 檔案進行編譯，默認是 false
chenckJs 意思是，是否檢查 js 代碼符合 ts 語法規范，默認是 false
removeComments 意思是，是否移除注釋 noEmit 意思是，執行編譯，但不生成編譯之后的檔案，通常用來檢查代碼規范的noEmitOnError 意思是，當有錯誤的時候不生成編譯后的檔案，避免錯誤代碼編譯
接下來的選項都是和 TS 語法檢查相關的
alwaysStrict
我們都知道在我們寫 js 代碼的時候，都會有一個嚴格模式，在前邊加上 “use strict” 就行了，那用 ts怎么加呢，設定的就是 alwaysStrict
語法：
"alwaysStrict":false （默認是 false）
noImplicitAny
前文說了，當 ts 中出現沒設定型別的變數時候，會默認為any noimolictAny為true之后則不允許該值是 any
語法：
"noImplicitAny": true （默認是 false）
noImplicitThis
不允許不明的 this，我們在寫函式的時，有時候函式的 this 不明，noImplicitThis 設定為 true 可以防止不明的 this 編譯
語法：
"noImplicitThis":true （默認是 false）strictNullChecks
嚴格的檢查空值
語法：
"strictNullChecks": true（默認是 false）strict
ts 配置中所有嚴格檢查的總開關，值為 ture 上邊的就可以都不寫了，全部為 ture，false 同理
語法：
"strict": false（默認是 false）開發建議為 true ，開啟所有的嚴格檢查，使我們的代碼更嚴謹，不想要那個檢查再單獨設定為 false
好關于配置選項我們就先講這么多，其實除此之外還有許多的配置，感興趣的大家可以去查查官方檔案，這里是六扇有伊人我們明天再見！
個人博客鏈接：http://blog.qianbaiyv.cn/get/my/blog/details/2311887075%40qq.com/150
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/536046.html
標籤：其他
上一篇：閉包