TypeScript的編譯選項(xiàng)

自動(dòng)編譯文件

編譯文件時(shí)，使用 -w 指令后，TS編譯器會(huì)自動(dòng)監(jiān)視文件的變化，并在文件發(fā)生變化時(shí)對文件進(jìn)行重新編譯。

示例：

tsc xxx.ts -w

自動(dòng)編譯整個(gè)項(xiàng)目

如果直接使用tsc指令，則可以自動(dòng)將當(dāng)前項(xiàng)目下的所有ts文件編譯為js文件。

但是能直接使用tsc命令的前提時(shí)，要先在項(xiàng)目根目錄下創(chuàng)建一個(gè)ts的配置文件 tsconfig.json

tsconfig.json是一個(gè)JSON文件，添加配置文件后，只需只需 tsc 命令即可完成對整個(gè)項(xiàng)目的編譯

配置選項(xiàng)：

==include（使用頻率高）==

• 定義希望被編譯文件所在的目錄

• 默認(rèn)值：["/**/*"]

  示例：

//路徑：
//   **表示任意目錄
//    *表示任意文件
"include":[
      "src/**/*", "tests/**/*"
  ]

上述示例中，所有src目錄下任意目錄的任意文件和tests目錄下的文件都會(huì)被編譯

==exclude（使用頻率高）==

• 定義需要排除在外的目錄

• 默認(rèn)值：["node_modules", "bower_components", "jspm_packages"]

  示例：

//"exclude" 不需要被編譯的文件目錄
"exclude": ["./src/hello/**/*"]

上述示例中，**src下hello目錄下的文件都不會(huì)被編譯**

extends

• 定義被繼承的配置文件

  示例：

"extends": "./configs/base"

**上述示例中，當(dāng)前配置文件中會(huì)自動(dòng)包含config目錄下base.json中的所有配置信息**

files（一般用在小項(xiàng)目中，只有幾個(gè)文件的情形下）

• 指定被編譯文件的列表，只有需要編譯的文件少時(shí)才會(huì)用到

  示例：

"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]

• 列表中的文件都會(huì)被TS編譯器所編譯

==compilerOptions（非常重要）== 看一遍了解即可，需要時(shí)參照文檔使用

• 編譯選項(xiàng)是配置文件中非常重要也比較復(fù)雜的配置選項(xiàng)，==決定了編譯器如何對文件進(jìn)行編譯==
• 在compilerOptions中包含多個(gè)子選項(xiàng)，用來完成對編譯的配置

項(xiàng)目選項(xiàng)：（target、lib、module、outDir、outFile、rootDir、allowJs、allowJs等等）

• target

  • 設(shè)置ts代碼編譯的目標(biāo)版本

  • 可選值：

    • ES3（默認(rèn)）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

      示例：

    "compilerOptions": {
        "target": "ES6"  //用來指定ts被編譯的ES版本
    }
    

  • 如上設(shè)置，我們所編寫的ts代碼將會(huì)被編譯為ES6版本的js代碼

• lib

  • 指定代碼運(yùn)行時(shí)所包含的庫（宿主環(huán)境）

  • 可選值：

    • ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ......

  • 示例：

    "compilerOptions": {
        "target": "ES6",      //用來指定ts被編譯的ES版本
        "lib": ["ES6", "DOM"],  //用來指定項(xiàng)目中要使用的庫 一般不改
        "outDir": "dist",      //用來指定編譯后文件所在的目錄
        "outFile": "dist/aa.js"   //將代碼合并為一個(gè)文件
    }
    

• module

  • 設(shè)置編譯后代碼使用的模塊化系統(tǒng)

  • 可選值：

    • CommonJS、UMD、AMD、System、ES2020、ESNext、None

  • 示例：

    "compilerOptions": {
        "module": "CommonJS"  //指定要使用的模塊化的規(guī)范
    }
    

• outDir

  • 編譯后文件的所在目錄

  • 默認(rèn)情況下，編譯后的js文件會(huì)和ts文件位于相同的目錄，設(shè)置outDir后可以改變編譯后文件的位置

  • 示例：

    "compilerOptions": {
        "outDir": "dist"   //用來指定編譯后文件所在的目錄
    }
    

    設(shè)置后編譯后的js文件將會(huì)生成到dist目錄

• outFile

  • 將所有的文件編譯為一個(gè)js文件

  • 默認(rèn)會(huì)將所有的編寫在全局作用域中的代碼合并為一個(gè)js文件，如果module制定了None、System或AMD則會(huì)將模塊一起合并到文件之中

  • 示例：

    "compilerOptions": {
        "outFile": "dist/app.js"   //將代碼合并為一個(gè)文件
    }
    

• rootDir

  • 指定代碼的根目錄，默認(rèn)情況下編譯后文件的目錄結(jié)構(gòu)會(huì)以最長的公共目錄為根目錄，通過rootDir可以手動(dòng)指定根目錄

  • 示例：

    "compilerOptions": {
        "rootDir": "./src"  //指定代碼的根目錄
    }
    

• allowJs

  • 是否對js文件編譯

• allowJs

  • 是否對js文件進(jìn)行檢查

  • 示例：

    "compilerOptions": {
        "allowJs": true,  //是否對js文件進(jìn)行編譯，默認(rèn)是false
        "checkJs": true   //是否檢查js代碼是否符合語法規(guī)范  默認(rèn)是false
    }
    

• removeComments

  • 是否刪除注釋
  • 默認(rèn)值：false

• noEmit 類似有noEmitOnError（當(dāng)有錯(cuò)誤時(shí)，不生產(chǎn)編譯后的文件 默認(rèn)值false）

  • 不生成編譯后文件
  • 默認(rèn)值：false

• sourceMap

  • 是否生成sourceMap
  • 默認(rèn)值：false

• 嚴(yán)格檢查

  • "strict":true //嚴(yán)格檢查的總開關(guān)
    • 啟用所有的嚴(yán)格檢查，默認(rèn)值為true，設(shè)置后相當(dāng)于開啟了所有的嚴(yán)格檢查
  • "alwaysStrict":true, //用來設(shè)置編譯后的文件是否使用嚴(yán)格模式，默認(rèn)false
    • 總是以嚴(yán)格模式對代碼進(jìn)行編譯
  • noImplicitAny 不允許隱式的any類型
    • 禁止隱式的any類型
  • noImplicitThis
    • 不允許不明確類型的this
  • strictBindCallApply
    • 嚴(yán)格檢查bind、call和apply的參數(shù)列表
  • strictFunctionTypes
    • 嚴(yán)格檢查函數(shù)的類型
  • strictNullChecks
    • 嚴(yán)格的空值檢查
  • strictPropertyInitialization
    • 嚴(yán)格檢查屬性是否初始化

• 額外檢查

  • noFallthroughCasesInSwitch
    • 檢查switch語句包含正確的break
  • noImplicitReturns
    • 檢查函數(shù)沒有隱式的返回值
  • noUnusedLocals
    • 檢查未使用的局部變量
  • noUnusedParameters
    • 檢查未使用的參數(shù)

• 高級(jí)

  • allowUnreachableCode
    • 檢查不可達(dá)代碼
    • 可選值：
      • true，忽略不可達(dá)代碼
      • false，不可達(dá)代碼將引起錯(cuò)誤
  • noEmitOnError
    • 有錯(cuò)誤的情況下不進(jìn)行編譯
    • 默認(rèn)值：false

聲明：本文內(nèi)容引自bilibili “尚硅谷TypeScript教程”
個(gè)人學(xué)習(xí)歸納總結(jié) ，歡迎暢談。