快速將C#類型轉成TypeScript介面定義
使用 TypeScript 處理 AJAX 請求時,常需要在前端定義與 C# 物件屬性一致的 TypeScript 類型,以便將后端傳來的 JSON 資料還原成強類型物件。針對較正式的資料模型,我會用 CodeGen 方式同步 C# 與 TypeScript 端的類型定義(順便處理多語系問題)。但蠻多時候處理對象只是零散的小類型,不必殺雞用牛刀,針對這類需求,推薦一個好用工具-TypeLITE。
在 NuGet 查關鍵字"typelite",很快就可找到 TypeLite 套件。
安裝后,項目會加入 TypeLite.dll、TypeLIte.Net4.dll,并在 Scripts 目錄下新増 TypeLite.Net4.tt。接著就可以修改 TypeLite.Net4.tt 內容,決定為哪些類型產生 TypeScript 定義。
TypeLITE 預設做法是執行 .ForLoadedAssemblies ()自動尋找組件標注[TsClass] Attribute 的類型,但實務上用 .For<類型名稱>()列舉要轉換的類型(如紅框所示)比較方便;若類型來自網站項目以外的組件,記得要加上<#@ assembly #>宣告(如黃框所示)。
修改 TypeLite.Net4.tt 并存檔,T4 工具將自動產生或更新 TypeLite.Net4.d.ts,在其中可看到我們用 .For<類型名稱>()所列舉類型的 TypeScript 介面定義,若類型有參照到其他類型,TypeLITE 會自動包含進來,非常方便。(在范例中用到 Reflection 的 MethodInfo,相關介面就像提棕子一般整串被拉進來。)
TypeScript 定義檔僅在開發編譯階段提供強類型約束及提示,不會產生任何 JavaScript,不用擔心 TypeLite.Net4.d.ts 的內容太復雜。就這樣,輕輕松松幾個步驟,就把 C# 端的類型定義搬到 TypeScript 端~
又到了呼口號時間:TypeLITE,好用!好用!好用!