如何在.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) TypeScript
TypeScript安裝途徑有兩個:
● 安裝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 入門教學 (簡體中文)

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *