生成tsconfig.json

這個(gè)文件是通過tsc --init命令生成的，在桌面上新建一個(gè)文件夾TsDemo,然后打開VSCode，把文件托到編輯器中，然后打開終端Terminal,輸入tsc --init。

輸入完成后，就會(huì)出現(xiàn)tsconfig.json文件，你可以打開簡(jiǎn)單的看一下，不過此時(shí)你可能看不懂。

其實(shí)它就是用來配置如何對(duì)ts文件進(jìn)行編譯的，我們都叫它 typescript 的編譯配置文件。

如果此時(shí)你的tsc執(zhí)行不了，很有可能是你沒有全局安裝 TypeScript,可以全局安裝一下。

讓tsconfig.json 文件生效

你現(xiàn)在可以在文件夾跟目錄建立一個(gè)demo.ts文件，然后編寫一些最簡(jiǎn)單的代碼，代碼如下:

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文件，然后也寫一段最簡(jiǎn)單的 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è)簡(jiǎn)單的配置項(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;
  }

你可以簡(jiǎn)單的理解為，設(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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論