TypeScript 使用 tsconfig.json 文件作為其配置文件闪萄，當(dāng)一個(gè)目錄中存在 tsconfig.json 文件，則認(rèn)為該目錄為 TypeScript 項(xiàng)目的根目錄。
通常 tsconfig.json 文件主要包含兩部分內(nèi)容：指定待編譯文件和定義編譯選項(xiàng)酒来。
1：生成 tsconfig.json 文件
這個(gè)文件是通過tsc --init命令生成的啡浊，在桌面上新建一個(gè)文件夾TsDemo,然后打開VSCode，把文件托到編輯器中陶因，然后打開終端Terminal,輸入tsc --init骡苞。
輸入完成后，就會(huì)出現(xiàn)tsconfig.json文件楷扬，你可以打開簡單的看一下解幽，不過此時(shí)你可能看不懂。
其實(shí)它就是用來配置如何對(duì)ts文件進(jìn)行編譯的烘苹，我們都叫它 typescript 的編譯配置文件躲株。
如果此時(shí)你的tsc執(zhí)行不了，很有可能是你沒有全局安裝 TypeScript,可以全局安裝一下镣衡。
2：讓 tsconfig.json 文件生效
你現(xiàn)在可以在文件夾跟目錄建立一個(gè)demo.ts文件霜定，然后編寫一些最簡單的代碼档悠，代碼如下:
const person: string = "guanchao";
這時(shí)候我們不在使用ts-node直接執(zhí)行了，需要用tsc demo.ts進(jìn)行編譯望浩，編譯后會(huì)得到demo.js文件辖所。 生成的代碼如下:
var person = "guanchao";
這時(shí)候好像一切都是正常的，但是我要告訴你的真相是tsconfig.json這個(gè)編譯配置文件并沒有生效磨德。
此時(shí)我們打開tsconfig.json文件缘回，找到complilerOptions屬性下的removeComments:true選項(xiàng)，把注釋去掉典挑。
這個(gè)配置項(xiàng)的意思是酥宴，編譯時(shí)不顯示注釋，也就是編譯出來的js文件不顯示注釋內(nèi)容您觉。
現(xiàn)在你在文件中加入一些注釋拙寡，比如：
// I love guanchao
const person: string = "guanchao";
這時(shí)候再運(yùn)行編譯代碼tsc demo.ts，編譯后打開demo.js文件顾犹，你會(huì)發(fā)現(xiàn)注釋依然存在倒庵，說明tsconfig.json文件沒有起作用。
如果要想編譯配置文件起作用炫刷，我們可以直接運(yùn)行tsc命令擎宝，這時(shí)候tsconfig.json才起作用，可以看到生成的js文件已經(jīng)不帶注釋了浑玛。
3：include 绍申、exclude 和 files
那現(xiàn)在又出現(xiàn)問題了，如果我們的跟目錄下有多個(gè)ts文件顾彰，我們卻只想編譯其中的一個(gè)文件時(shí)极阅，如何作？
我們?cè)陧?xiàng)目根目錄涨享，新建一個(gè)文件demo2.ts文件筋搏，然后也寫一段最簡單的 ts 代碼。
const person2: string = "guanchao.site";
如果這時(shí)候我們?cè)诮K端里運(yùn)行tsc,雖然tsconfig.json生效了厕隧，但是兩個(gè)文件都被我們編譯了奔脐。這不是你想要的結(jié)果，我們可以用三種辦法解決這個(gè)問題吁讨。
第一種：使用 include 配置
include屬性是用來指定要編譯的文件的髓迎，比如現(xiàn)在我們只編譯demo.ts文件，而不編譯demo2.ts文件建丧，就可以這樣寫排龄。
寫配置文件時(shí)有個(gè)坑需要注意，就是配置文件不支持單引號(hào)翎朱，所以里邊都要使用雙引號(hào)橄维。
{
"include":["demo.ts"],
"compilerOptions": {
//any something
//........
}
}
這時(shí)候再編譯尺铣，就只編譯demo.ts文件了。
第二種：使用 exclude 配置
include是包含的意思争舞，exclude是不包含迄埃，除什么文件之外，意思是寫再這個(gè)屬性之外的而文件才進(jìn)行編譯兑障。比如你還是要編譯demo.ts文件，這時(shí)候的寫法就應(yīng)該是這樣了蕉汪。
{
"exclude":["demo2.ts"],
"compilerOptions": {
//any something
//........
}
}
這樣寫依然只有demo.ts被編譯成了js文件流译。
第三種：使用 files 配置
files的配置效果和include幾乎一樣，我是沒找出有什么不同者疤，只要配置到里邊的文件都可以編譯福澡，如果有小伙伴知道有什么不同的，歡迎在視頻下方留言驹马，然后一起學(xué)習(xí)革砸。
{
"files":["demo.ts"],
"compilerOptions": {
//any something
//........
}
}
結(jié)果是依然只有demo.ts文件被編譯。
有好的建議糯累，請(qǐng)?jiān)谙路捷斎肽愕脑u(píng)論算利。
歡迎訪問個(gè)人博客
https://guanchao.site
