TypeScript配置文件tsconfig.json詳解
生成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,可以全局安裝一下。
讓tsconfig.json 文件生效
你現(xiàn)在可以在文件夾跟目錄建立一個(gè)demo.ts文件,然后編寫一些最簡單的代碼,代碼如下:
const person:string = 'Riven';
這時(shí)候我們不在使用ts-node直接執(zhí)行了,需要用tsc demo.ts進(jìn)行編譯,編譯后會(huì)得到demo.js文件。
生成的代碼如下:
var person = 'Riven';
這時(shí)候好像一切都是正常的,但是我要告訴你的真相是tsconfig.json這個(gè)編譯配置文件并沒有生效。
此時(shí)我們打開tsconfig.json文件,找到complilerOptions屬性下的removeComments:true選項(xiàng),把注釋去掉。
這個(gè)配置項(xiàng)的意思是,編譯時(shí)不顯示注釋,也就是編譯出來的js文件不顯示注釋內(nèi)容。
現(xiàn)在你在文件中加入一些注釋,比如:
// I love Riven const person:string = 'Riven';
這時(shí)候再運(yùn)行編譯代碼tsc demo.ts,編譯后打開demo.js文件,你會(huì)發(fā)現(xiàn)注釋依然存在,說明tsconfig.json文件沒有起作用。
如果要想編譯配置文件起作用,我們可以直接運(yùn)行tsc命令,這時(shí)候tsconfig.json才起作用,可以看到生成的js文件已經(jīng)不帶注釋了。
include,exclude,和files
那現(xiàn)在又出現(xiàn)問題了,如果我們的跟目錄下有多個(gè)ts文件,我們卻只想編譯其中的一個(gè)文件時(shí),如何作?
我們?cè)陧?xiàng)目根目錄,新建一個(gè)文件demo2.ts文件,然后也寫一段最簡單的 ts 代碼。
const person2:string = '翠花';
如果這時(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幾乎一樣,我是沒找出有什么不同,只要配置到里邊的文件都可以編譯。
{ "files":["demo.ts"], "compilerOptions": { //any something //........ } }
結(jié)果是依然只有demo.ts文件被編譯。
下來我們學(xué)習(xí)下compilerOptions配置項(xiàng),它是告訴TypeScript具體如何編譯成js文件的,里邊的配置項(xiàng)非常多,這節(jié)我們先來講幾個(gè)簡單的配置項(xiàng),目的是讓你熟悉compilerOptions的使用方法。
removeComments 屬性
removeComments是complerOptions里的一個(gè)子屬性,它的用處是告訴TypeScript對(duì)編譯出來的js文件是否顯示注釋(注解)。比如我們現(xiàn)在把removeComments的值設(shè)置為true,就是在js中不顯示注釋。這個(gè)上面我們有用過!
strict 屬性
strict屬性如果設(shè)置為true,就代表我們的編譯和書寫規(guī)范,要按照TypeScript最嚴(yán)格的規(guī)范來寫,如果我們把這個(gè)設(shè)置為false或者注釋掉,意思是我們可以對(duì)設(shè)置一些不嚴(yán)格的寫法。
noImplicitAny屬性
noImplicitAny屬性的作用是,允許你的注解類型 any 不用特意表明,只聽概念很難理解。如果你只看官方 API,你可能要迷糊一陣啥叫允許你的注解類型any不用特意表明,這就是每個(gè)漢字我都認(rèn)識(shí),連在一期就不知道啥意思的最好詮釋。
為了更好的說明,我們舉個(gè)例子,在demo.ts里,刪除剛才的代碼,然后寫一個(gè)方法,方法的參數(shù)我們?cè)O(shè)置成任意類型(any)。
function riven(name) { return name; }
這時(shí)候我們的TypeScript是進(jìn)行報(bào)錯(cuò)的,我們用tsc編譯也是報(bào)錯(cuò)的。這就是因?yàn)槲覀冮_啟了strict:true,我們先注釋掉,然后把noImplicitAny的值設(shè)置為false,就不再報(bào)錯(cuò)了。
如果設(shè)置為noImplicitAny:true,意思就是值就算是 any(任意值),你也要進(jìn)行類型注釋。
function riven(name:any) { return name; }
你可以簡單的理解為,設(shè)置為 true,就是必須明確置頂 any 類型的值。
strictNullChecks屬性
我們先把strictNullChecks設(shè)置為false,它的意思就是,不強(qiáng)制檢查 NULL 類型。
我們舉個(gè)例子,讓你能一下子就明白,還是刪除demo.ts里的代碼,然后編寫代碼.
const riven: string = null;
代碼寫完后,你會(huì)發(fā)現(xiàn)這段代碼是不報(bào)錯(cuò)的,如果是以前,一定是報(bào)錯(cuò)的,這就是我們配置了“不強(qiáng)制檢驗(yàn) null 類型”。
如果你設(shè)成strictNullChecks:true,這時(shí)候就報(bào)錯(cuò)了。
ts-node遵循tsconfig.js
有的小伙伴問我了,tsc fileName 是沒辦法遵循tsconfig.js文件的,那ts-node是否遵循?
這里直接告訴你答案,ts-node是遵循的,感興趣的可以自行試一下。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
typescript封裝消息提示框插件ew-message使用實(shí)戰(zhàn)
這篇文章主要為大家介紹了typescript封裝消息提示框插件ew-message使用實(shí)戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11詳解Typescript?嚴(yán)格模式有多嚴(yán)格
這篇文章主要為大家介紹了Typescript?嚴(yán)格模式有多嚴(yán)格實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01聯(lián)合類型Union?Types與交叉類型Intersection?Types區(qū)別解析
這篇文章主要為大家介紹了聯(lián)合類型Union?Types與交叉類型Intersection?Types區(qū)別詳解2023-06-06TypeScript類型實(shí)現(xiàn)加減乘除詳解
這篇文章主要為大家介紹了TypeScript類型實(shí)現(xiàn)加減乘除示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04TypeScript數(shù)組實(shí)現(xiàn)棧與對(duì)象實(shí)現(xiàn)棧的區(qū)別詳解
這篇文章主要為大家介紹了TypeScript數(shù)組實(shí)現(xiàn)棧與對(duì)象實(shí)現(xiàn)棧的區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09數(shù)據(jù)結(jié)構(gòu)TypeScript之鏈表實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之鏈表實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01