一個簡單的 ASP.NET MVC 例子示範如何在 Knockout JS 的配合下，使用 TypeScript 。前言實戰

 是一種由開發的和的程式設計語言。它是的一個超集，而且本質上向這個語言添加了可選的靜态類型和基于類的。，的首席架構師，已工作于TypeScript的開發。TypeScript擴充了 JavaScript

的句法，是以任何現有的JavaScript程式可以不加改變的在TypeScript下工作。TypeScript是為大型應用之開發而設計，而編譯時它産生

JavaScript 以確定相容性。TypeScript 支援為已存在的

JavaScript 庫添加類型資訊的頭檔案，擴充了它對于流行的庫如 ，，和 D3.js 的好處。

TypeScript 的官方位址：

這裡僅僅是循環生成了 10 條 TaskDetails 記錄，并把它作為 Model 傳遞給 View。

首先，我們看到 JSON 序列化了 Controller 傳過來的 Model，然後用了一個 HTML Hidden

來儲存。然後用 Knockout JS 的文法（請注意

<tbody> 中的 data-bind）來呈現資料，那麼  Knockout JS

的資料源從哪裡來呢？我們接着往下看。我們看到底部引用了一個 typescript-list.js ，進去瞧瞧。PS：typescript-list.js

這個 JS 檔案并不是什麼第三方 Javascript 庫，完全可以把它改成 aaa.js 。另外那 2 個 JS 檔案（knockout-2.3.0.js 和

moment.min.js）就是第三方庫了。

找到 typescript-list.js 檔案

根據 TypeScript 的背景，我猜測這個 js 檔案是編譯後動态生成的，語言就是 TypeScript。果然，在目錄 /Scripts 下，我找到了

typescript-list.ts。 擴充名是 ts，也就是去 TypeScript 的 2 個單詞的首字母。我還注意到還有一個

typescript-list.js.map 檔案，我猜應該也是由 TypeScript

動态生成的，下面我們進入 typescript-list.ts 瞧瞧。

typescript-list.js.map 内容如下：

看完，我們繼續探索。

找到 typescript-list.ts 檔案。

請注意這 2 行代碼：

這個可能是由 TypeScript 官方提供的元件。

可參看網址：

代碼下載下傳：

謝謝浏覽！