Code Bank

前天看到 vs2013 update 2 release，其中一項重要的更新，就是正式支援 TypeScript 專案，它訴求以純物件導向的方式開發JavaScript，這對我個人而言，是莫大的吸引力，馬上下載、安裝、coding，過程還蠻順利的，未來準備好好K它一下。

 

安裝

TypeScript 安裝有兩種方式:

1. 安裝 vs2013 update 2 : 安裝後就可以建立 TypeScript 專案，安裝檔約3.5GB，還蠻大的。
2. 在 Node.js 環境內下載 TypeScript compiler: 如果只是想了解 TypeScript，不想太費事，可採用此一方式。 只要在安裝 Node.js 後，在 DOS mode下輸入下行即可。

          npm install -g typescript

 

測試

以下我使用第一種安裝有方式，建立第一個測試專案，步驟如下:

1. 啟動 vs2013，新增專案，選擇 TypeScript 。
   
   
2. 依照微軟的慣例，vs 會自動產生sample code，所以不用寫半行程式，就先按【F5】執行，結果如下，是一個顯示現在時間的網頁，時間會跳動。
   
   
3. 回頭研究一下專案結構，如下圖，與標準的Html專案沒有太大差異，唯一差別就是多了一個檔 – app.ts，ts 就是 TypeScript 的縮寫，打開看看，關鍵就在這裡，它是一個標準的類別，含建構式(Constructor)，另加兩個方法(Method) – start/stop，之後程式在視窗載入事件(window.onload)內，依據上述類別建立一新object，並執行start() method。
   
   
    
4. 再打開index.html，看到第8行如下，注意它不是 app.ts，而是 app.js，可是專案內並無 app.js 這個檔，在方案總管(Solution Explorer)進一步按 ，就可以看到 app.js 檔了，原來它是在建置專案時，vs 編譯 app.ts 後產生的，因為瀏覽器解析 html 檔時，是不會認識 .ts 檔的。

        

              

延伸

如果微軟要我們擁抱 TypeScript，而放棄成千上萬的 JavaScript library，那就是一個很愚蠢的策略，因此，TypeScript 提出一個引入外部 JavaScript library 的方法，類似C的 .h 檔，步驟如下:

1. 下載 TypeScript type definitions，並解開 zip 檔。
2. 假設我們要在 .ts 檔使用 jQuery，就從解開的目錄下找 jQuery 子目錄內的 jquery.d.ts，將它複製到專案內。
3. 先在 .html 檔內引入 jQuery，如下:
   <script src="http://code.jquery.com/jquery-1.8.0.js"></script>
4. 之後在 .ts 檔內參考 jquery.d.ts，即可使用jQuery函數($)
   /// <reference path="jquery.d.ts" />
   …
   $("#status")[0].innerHTML = message;

附上測試的範例， Happy coding !!