如何在.Net專案中開始使用TypeScript

在介紹如何在.Net專案中開始使用TypeScript之前先來講講，在使用JavaScript時曾經碰過的幾個問題：

1. JavaScript沒有OO若要讓JavaScript有OO的特性就必須透過Protype來達成，但問題是需要多輸入一些程式碼，寫法如下圖所示：


2.誤用ES6或是ES7的語法在開發JavaScript有時不會特別留意是使用哪一個版本新增的語法，如果不小心用到比較新的語法時，會讓舊版本的瀏覽器 (如：IE) 無法運行。

<下圖> Foo2 為ES6新增的寫法，程式碼雖然精簡，但是在IE上是無法運行，因為IE不支援ES6以上的語法。


3.只有在偵錯時才知道有沒有語法錯誤是用JavaScript開發時，往往都要在瀏覽器執行時才會知道這段JS有沒有語法錯誤。
在用TypeScript開發時，在編譯的階段就可以知道語法有沒有錯誤，可以大幅減少除錯的時間。

<下圖>   IDE在編譯之前就已經抓到錯誤的語法：

---

接下來介紹要如何在.Net專案設定TypeScript

Step 1.開發環境

(1) TypeScriptTypeScript安裝途徑有兩個：
● 安裝Visual Studio時順便安裝。
● Visual Studio擴充功能 → 搜尋TypeScript → 下載並安裝。

(2) Visual Studio版本：Visual Studio 2017、Visual Studio 2015、Visual Studio 2013 (不確定是否可以)

Step 2.新增tsconfig.json (TypeScript設定檔)

專案根目錄 → 新增新項目 → TypeScript設定檔

Step 3.編輯tsconfig.json

如果要將所有的TS檔編譯成1個JS檔，可以將下圖"outDir"換成"outFile"，後面的目錄加上JS的檔名。
tsconfig的屬性有很多就不全部介紹了，有興趣的話可以到官網看看

Step 4.加入TS檔，並開始開發

TS檔編輯完後存檔後會在專案目錄下可以看到JS檔和Map檔，這樣就大功告成了。
注意：當TS檔有錯誤時，不會編譯JS檔和Map檔

---

在開發Typescript時難免會引用外部的JavaScript套件，但是在外部的JavaScript套件會遇到一個問題，那就是在使用外部JS的物件時，會出現錯誤訊息，如下圖所示：

這個問題的解法上在TS加入紅色圈起的程式碼後，錯誤訊息就消失了，問題也就排除了。

---

最後，提供一下TypeScript學習的資源，希望各位能夠順利開發。

● TypeScript官方文件 (英文)● HackMD - TypeScript新手入門 (正體中文)● GitBook - TypeScript 入門教學 (簡體中文)