編譯單個(gè)文件：終端?tsc 文件名

自動(dòng)編譯單個(gè)文件：終端 tsc 文件名 -w

編譯整個(gè)項(xiàng)目：tsc 前提是得有ts的配置文件tsconfig.json

自動(dòng)編譯整個(gè)項(xiàng)目：tsc --w?

tsconfig.json默認(rèn)文件內(nèi)容：

tsconfig.json是ts編譯器的配置文件，ts編譯器可以根據(jù)它的信息對(duì)代碼進(jìn)行編譯。

注：路徑??**表示所有目錄 *表示所有文件

• "includes":[ ] //"includes"用來指定哪些ts文件需要被編譯。

"includes":[ "./src/**/*"?]

• "excludes":[ ] //不需要被編譯的文件目錄，可選項(xiàng)，可有可無。

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

"excludes":[ "./src/hello/**/*"?]

• "extends":[ ] //配置文件特別復(fù)雜時(shí)，引入繼承其他的json配置文件。

"extends":["./config/base.json"]

• "files":[ ]??//單個(gè)引入需要編譯的文件，通常用在文件很少的情況。

"files":[ "core.ts","sys.ts","types.ts" ]

• "compilerOptions":{ } // 編譯器的選項(xiàng)

compilerOptions子選項(xiàng)：

1. "target":" "? ?//用來指定ts被編譯為ES的版本

?"compilerOptions":{ "target":"ES3"?} // ES3(默認(rèn))、ES5、ES6/ES2015、ES2017、ES2018、ES2019、ES2020、ESNext

2. "module":" " //指定要使用的模塊化的規(guī)范

?"compilerOptions":{ "module":'es2015'?} //CommonJS、ES6、UMD、AMD、System、ES2015、ES2020、ESNext、None?

3. "lib":[ ]? //用來指定項(xiàng)目中需要使用的庫(kù)，一般情況下不對(duì)lib進(jìn)行修改。

?"compilerOptions":{ "lib":["dom","es6"]?}

4. "outDir':" "? //用來指定編譯后文件所在的位置。

?"compilerOptions":{ "outDir":"./dist"?}

5. "outFile':" " //用來將js代碼合并為一個(gè)文件

設(shè)置outFile以后，所有全局作用域中ts編譯出來的js代碼會(huì)合并到一個(gè)js中，一般會(huì)導(dǎo)致不靈活

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

7. "allowJs":false //是否對(duì)js文件進(jìn)行編譯，默認(rèn)為false

8. "checkJs":fasle //是否檢查js代碼符合語(yǔ)法規(guī)范，默認(rèn)為false

9. "removeComments":false //是否移除注釋，默認(rèn)為false

10. "noEmit":false //false:生成編譯后的文件，true:不生成編譯后的文件，默認(rèn)為false

11. "noEmitOnError":false //true:當(dāng)有錯(cuò)誤的時(shí)候不生成編譯后的文件，默認(rèn)為false

12. "alwayScript":false //用來設(shè)置編譯以后的js文件是否使用嚴(yán)格模式，默認(rèn)為false

13. "noImplicitAny":false //是否允許出現(xiàn)隱式的any類型，默認(rèn)為false

14.?"noImplThis":false //是否允許不明確類型的this，默認(rèn)為false

15. "strictNullChecks":false //是否嚴(yán)格的檢查空值，默認(rèn)為false

16. "strict":false //所有嚴(yán)格檢查的總開關(guān)，默認(rèn)為false

總結(jié)

自動(dòng)編譯文件

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

tsc xxx.ts -w?

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

1. 如果直接使用tsc指令有序列表，則可以自動(dòng)當(dāng)前項(xiàng)目下的所有ts文件編譯為js文件。
2. 但是能直接使用tsc命令的前提是，要先在項(xiàng)目根目錄下創(chuàng)建一個(gè)ts的配置文件tsconfig.json。
3. tsconfig.json是一個(gè)JSON文件，添加配置文件后，只需tsc命令即可完成對(duì)整個(gè)項(xiàng)目的編譯。
4. 配置選項(xiàng)

• include?

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

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

示例：

"includes":["src/**/*","tests/**/*"]?

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

• excludes

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

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

示例 ：

"exclude":["./src/hello/**/*"]

示例中，src下hello目錄下的全部文件都不會(huì)被編譯。

• extends

定義被繼承的配置文件

示例

"extends":["./config/base"]

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

• files

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

示例：

"files":[ "core.ts","sys.ts","types.ts" ]

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

• compilerOptions

編譯選項(xiàng)是配置文件中非常重要也比較復(fù)雜的配置選項(xiàng)。

在compilerOptions中包含多個(gè)子選項(xiàng)，用來完成對(duì)編譯的配置

常用項(xiàng)目選項(xiàng)：

1. target?

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

可選值： ES3(默認(rèn))、ES5、ES6/ES2015、ES2017、ES2018、ES2019、ES2020、ESNext

示例：

"compilerOptions":{ "target" : "ES6" }

編寫的代碼將會(huì)被編譯成ES6版本的js代碼。

2. lib

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

可選值：ES3(默認(rèn))、ES5、ES6/ES2015、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost......

示例：

"compilerOptions":{ "target" : "ES6"，"lib":["ES6"，"DOM"]，"outDir":"dist"，"outFIle":"dist/aa.js"?}

3. module

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

可選值：CommonJS、UMD、AMD、System、ES2020、ESNext、None

示例：

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

4. outDir

編譯后的文件所在的目錄。

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

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