已經(jīng)有很多社區(qū)的文章在介紹 Typescript 這個新的語言,，這是理所當然的 - 因為它解決了很多JavaScript的問題，盡管處于起步階段,，卻已經(jīng)顯示了巨大的潛力,。

Typescript 要求你必須預編譯來生成 JavaScript 代碼，現(xiàn)在也可以直接在瀏覽器上動態(tài)編譯,，但你必須引用 Typescript.js 這個 JS 編譯器,，這個編譯器有 250Kb 大小，這可能是一顆很難咽下的藥丸,。

好在,，通過 ASP.NET 的瑞士軍刀 —— Web API ，我們可以實現(xiàn)對 Typescript 動態(tài)編譯為 Javascript,。

思路

為了不用再每次修改 Typescript 后都要手工編譯,，我們將透過 Web API 來為我們完成這項工作，使用的是定制的 MediaTypeFormatter.

你所需要做的就是通過一個特定的預先配置好的 Web API 路由/控制器來引用這個 JS 編譯器腳本(Typescript.js),，然后讓 Web API 管道通過 MediaTypeFormatter 來完成這項重任務,。

路由和控制器

我們在 HTML 中引用編譯后的 js 文件如下：

<script type="text/javascript" src="/dynamic/scripts/demo.js"></script> 

為了實現(xiàn)這個目的，新建一個典型的 MVC4,， Web API 項目。

需要一個定制的路由和一個簡單的控制器：

config.Routes.MapHttpRoute(  
    name: "DynamicScripts",  
    routeTemplate: "dynamic/{controller}/{name}.{ext}",  
    defaults: new { name = RouteParameter.Optional, ext = RouteParameter.Optional },  
    constraints: new { controller = "Scripts" }  
); 

public class ScriptsController : ApiController  
{  
    public string Get(string name)  
    {  
        return name;  
    }  
} 

這個路由可以讓我們傳遞一個 name 參數(shù)和一個擴展(用于匹配所需的 filename.js),，然后控制器簡單的將文件對應的請求重定向到 formatter 中,。

插件

為了讓上述思路可行，我們需要命令行的 Typescript 編譯器,，可從 官方網(wǎng)站 上獲取,，選擇中間那個 (Plugins)，推薦 Visual Studio 2012,，但 2010 也沒關系,，我們只關心命令行工具而已。

一旦安裝成功，你會找到一個名為 TCS.exe 的可執(zhí)行文件,，默認位于 C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0\. 將所有編譯器文件拷貝到解決方案目錄下的 TS 文件夾,。

格式化器/編譯器

注意下面的代碼應根據(jù)你特定的需求進行調(diào)整（包括持久化機制、錯誤處理等等）：

public class TypeScriptMediaTypeFormatter : MediaTypeFormatter  
{  
        private static readonly ObjectCache Cache = MemoryCache.Default;  
 
        public TypeScriptMediaTypeFormatter()  
        {  
            this.AddUriPathExtensionMapping("js", "text/html");  
        }  
 
        public override void SetDefaultContentHeaders(Type type, System.Net.Http.Headers.HttpContentHeaders headers, System.Net.Http.Headers.MediaTypeHeaderValue mediaType)  
        {  
            headers.ContentType = new MediaTypeHeaderValue("application/javascript");  
        }  
 
        public override bool CanReadType(Type type)  
        {  
            return false;  
        }  
 
        public override bool CanWriteType(Type type)  
        {  
            return type == typeof(string);  
        }  
 
        public override Task WriteToStreamAsync(Type type, object value, Stream writeStream, HttpContent content, TransportContext transportContext) {  
    //TODO  
    }  
} 

在我們開始寫數(shù)據(jù)到流前,，所有代碼的執(zhí)行都是很耗資源的,，注意我們設置了一些默認值，我們添加了 UriPathExtensionMapping 這樣格式化器就可以處理所有 .js 請求,。所有的輸出的內(nèi)容 content-type 將是 application/javascript ,，告訴瀏覽器這些都是 js 文件。也支持請求 text/html, 某些瀏覽器可能會這樣,。

我們只支持序列化（單向的格式化,，非反序列化），而且只接受字符串,。

WriteToStreamAsync

MediaTypeFormatter 方法根據(jù)如下流程將數(shù)據(jù)寫到流中：

1.文件名(Typescript 文件)

2.檢查 TS 文件是否存在

3.檢查緩存,，如果相應的文件已存在則使用MD5 checksum 來確保文件沒有改動

4.如果沒改動則直接從緩存中返回內(nèi)容

5.如果改動了，或者緩存文件不存在則使用 tcs.exe 編譯并返回 JS

6.將第5步生成的 JS 和 MD5 checksum 內(nèi)容保存到緩存中以便繼續(xù)使用

public override Task WriteToStreamAsync(Type type, object value, Stream writeStream, HttpContent content, TransportContext transportContext)  
{  
   var serverPath = HttpContext.Current.Server.MapPath("~/tsc");  
   var filepath = Path.Combine(serverPath, value.ToString() + ".ts");  
   var jsfilepath = Path.Combine(serverPath, value.ToString() + ".js");  
 
   var tcs = new TaskCompletionSource<object>();  
 
   if (File.Exists(filepath))  
   {  
      string cachedItem = CheckCache(filepath, value as string);  
 
      if (cachedItem != null)  
      {  
         using (var writer = new StreamWriter(writeStream))  
         {  
            writer.Write(cachedItem);  
         }  
      }  
      else 
      {  
         var typescriptCompiler = new ProcessStartInfo  
         {  
            UseShellExecute = false,  
            RedirectStandardError = true,  
            FileName = Path.Combine(serverPath, "tsc.exe"),  
            Arguments = string.Format("\"{0}\"", filepath)  
         };  
 
         var process = Process.Start(typescriptCompiler);  
         var result = process.StandardError.ReadToEnd();  
         process.WaitForExit();  
 
         if (string.IsNullOrEmpty(result))  
         {  
            using (var filestream = new FileStream(jsfilepath, FileMode.Open, FileAccess.Read))  
            {  
               filestream.CopyTo(writeStream);  
               var fileinfo = new Dictionary<string, string>();  
               fileinfo.Add("md5", ComputeMD5(filepath));  
 
               using (var reader = new StreamReader(filestream))  
               {  
                  filestream.Position = 0;  
                  var filecontent = reader.ReadToEnd();  
                  fileinfo.Add("content", filecontent);  
               }  
 
               Cache.Set(value as string, fileinfo, DateTime.Now.AddDays(30));  
            }  
         }  
         else 
         {  
            throw new InvalidOperationException("Compiler error: " + result);  
         }  
      }  
   }  
              
   tcs.SetResult(null);  
   return tcs.Task;  
}  
 
private string CheckCache(string filepath, string filename)  
{  
   var md5 = ComputeMD5(filepath);  
   var itemFromCache = Cache.Get(filename) as Dictionary<string, string>;  
 
   if (itemFromCache != null)  
   {  
      if (itemFromCache["md5"] == md5)  
      {  
         return itemFromCache["content"];  
      }  
   }  
   return null;  
}  
 
private string ComputeMD5(string filename)  
{  
   var sb = new StringBuilder();  
   using (var file = new FileStream(filename, FileMode.Open, FileAccess.Read))  
   {  
      var md5 = new MD5CryptoServiceProvider();  
      var bytes = md5.ComputeHash(file);  
 
      for (int i = 0; i < bytes.Length; i++)  
      {  
         sb.Append(bytes[i].ToString("x2"));  
      }  
   }  
   return sb.ToString();  
} 

這樣做的好處是文件修改時我們只需要編譯一次就可以重復使用,，這里選用的是直接在內(nèi)存中緩存,，你也可以使用其他方式，例如返回磁盤中的 js 文件之類的,。原則上,，我們是通過 MD5 checksum 來確定文件是否修改。

注意這里使用了 TCS 進程的 StandardError 屬性來判斷編譯器運行成功運行,，如果編譯過程中發(fā)生任何錯誤,，該屬性將會包含詳細的錯誤信息，否則就是空的,。

測試

假設有如下的 TS 文件,，名為 demo.ts:

class Person {  
   constructor(public name) { }  
   sing(text) {  
       return this.name + " sings " + text;  
   }  
} 

我在 HTML 頁面中引用如下，使用相同的名稱,，只是將 ts 擴展名改為 js,，這樣該請求就會觸發(fā)控制器調(diào)用編譯方法：

<script type="text/javascript" src="/dynamic/scripts/demo.js"></script> 

現(xiàn)在 Web API 將即時編譯 demo.ts 并生成所需的 js 輸出到瀏覽器，而我們并沒有手工去編譯它：

而且 JS 內(nèi)容是緩存的,，以后再次刷新頁面無需重新編譯 ts 文件,。

我的調(diào)用結果：

如果修改了 Typescript 代碼：If I change the Typescript code to something else – i.e. let’s modify the sing method:

class Person {  
constructor ( public name ) { }  
sing ( text ) {  
return this . name + " sings " + text + " and it's embarassing." ;  
}  
} 

我不需要重新編譯，只需要刷新頁面,，因為 MD5 checksum 不匹配,，因此 TS 會自動重新編譯并生成新的 JS ：

總結

我們前面提到的，Typescript 可使用純 JavaScript 來編譯生成 JavaScript,，但因為 JS 編譯器本身有 250Kb 大小,，因此采用了這種方法來避免編譯器的加載變得讓人無法接受,。

當然，如果你使用的是其他的 Web 開發(fā)技術,，也可以參考這個思路來實現(xiàn),。