TypeScript 入門應(yīng)用：類型系統(tǒng)和配置文件
安裝及使用
npm install typescript -g 進(jìn)行全局安裝，也可以使用 npm install typescript -D 作為項(xiàng)目的開發(fā)依賴項(xiàng)。
TypeScript 代碼默認(rèn)以 .ts 后綴結(jié)尾，我們創(chuàng)建一個 index.ts 文件，寫入以下代碼：
代碼中，我們使用了 ES6 中的箭頭函數(shù)及模板字符等新的語法特性，然后，在命令行中執(zhí)行 tsc index.ts 進(jìn)行編譯后，我們能夠得到一個同名的 index.js 文件，內(nèi)容如下：
此時我們會發(fā)現(xiàn)，編譯過后的文件，已經(jīng)被轉(zhuǎn)譯為了標(biāo)準(zhǔn)的 ES3 規(guī)范的代碼。這就是我們說的 TS 編譯轉(zhuǎn)換新特性的能力。
類型系統(tǒng)的使用的也非常簡單，在需要標(biāo)準(zhǔn)的地方，使用類型名稱即可，一旦為某個變量標(biāo)注了類型之后，如果沒有給與對應(yīng)類型的數(shù)據(jù)，在編譯時就會報錯，比如，這樣的代碼：
報錯：
同時，在 VS Code 編輯器中，還會有紅色的波浪線，鼠標(biāo)懸浮后，會出現(xiàn)如下提示信息：
使用命令 tsc --locale zh-CN 可以打印出中文形式的提示信息，方便英文不好的同志們。
配置文件
tsc 命令不僅可以編譯指定的某個 ts 文件，還可以編譯整個項(xiàng)目或整個工程。在使用之前，我們需要一個配置文件來對設(shè)置不同的編譯選項(xiàng)，使用 tsc --init 生成一個名為 tsconfig.json 的 ts 配置文件，compilerOptions 就是 ts 編譯器所對應(yīng)的一些選項(xiàng)，其中大部分都已經(jīng)被注釋掉了，且每個選項(xiàng)后面都有對應(yīng)的選項(xiàng)說明。
這里對于一些常用的選項(xiàng)從上往下的順序做一個簡單解釋：
修改好各項(xiàng)配置之后，我們就可以使用 tsc index.ts 命令進(jìn)行編譯了，但是在配置文件中的選型好像并沒有起作用，這是因?yàn)?/span>配置文件是對整個項(xiàng)目工程起作用的，并不對編譯一個具體指定的 ts 文件有效。因此，我們在命令行中可以直接使用 tsc 命令而不需要指定具體的那個文件。
原始類型
"strict": false, 配置項(xiàng)是對所有類型開啟或關(guān)閉嚴(yán)格模式，如果想具體控制，可以在配置文件中具體修改。
聯(lián)合類型
接著我們使用來看 Symbol 類型：
錯誤提示如下圖：
這是什么原因呢？
標(biāo)準(zhǔn)庫聲明
Symbol 是 ES2015 標(biāo)準(zhǔn)中定義的成員，使用它的前提是必須確保有對應(yīng)的 ES2015 標(biāo)準(zhǔn)庫引用，我們可以修改 tsconfig.json 中 target 或者讓 lib 選項(xiàng)包含 ES2015 就可以了。但是，這到底是為什么呢？
其實(shí) Symbol 和其他的 String 或者 Number 一樣，只不過 Symbol 是 ES2015 中新的數(shù)據(jù)類型，當(dāng)我們在配置文件中定義好 target 選項(xiàng)后，會自動使用指定規(guī)范的標(biāo)準(zhǔn)庫引用，比如我們寫一個 Array ,鼠標(biāo)右擊，選擇 '轉(zhuǎn)到定義‘，就能夠看到具體的引用文件了。
其實(shí)通過引用文件的文件名 lib.es5.d.ts 我們就能看到，當(dāng)前引入的是 es5 的標(biāo)準(zhǔn)庫，而 Symbol 是 es2015 中的新特性，如果直接修改 target 顯然不夠靈活，其實(shí)像 promise 也會出現(xiàn)類似的情況。最好的辦法還是使用 lib 選項(xiàng)，來引入對應(yīng)的標(biāo)準(zhǔn)庫："lib": ["es2015"], 但是這樣就會覆蓋默認(rèn)引入的標(biāo)準(zhǔn)庫 DOM ，所以我們就需要再添加對 DOM 的引入"lib":["es2015","DOM"],
其實(shí)標(biāo)準(zhǔn)庫就是內(nèi)置對象所對應(yīng)的聲明，我們在代碼中使用內(nèi)置對象，就必須要引入對應(yīng)的標(biāo)準(zhǔn)庫，否則找不到對應(yīng)的類型就會報錯了。
未完待續(xù)...
推薦閱讀：
前端工程化中的重要環(huán)節(jié)——自動化構(gòu)建
效率提升利器：你還害怕自動化部署嗎
更新不易，點(diǎn)個“在看”和“贊”吧(●'?'●)！