.cshtml Razor 文件中的 TypeScript

我正在使用 ASP.NET-MVC 框架開始一個新項目。我想在這個項目中使用 TypeScript 來代替 JavaScript。Visual Studio 很容易支持 TypeScript，但似乎與 .cshtml 剃須刀文件不（完全）兼容。我能夠在 .ts 文件中創建我的類並在我的 .cshtml 文件中呼叫這些類，問題是當我將參數傳遞給 .cshtml 文件中的對象時，TypeSafety 被忽略並且函式像執行一樣執行從未定義類型。

.ts 文件

   export class SomeClass {

   name: number;

   constructor(public tName: number) {
       this.name = tName;
   }

   public sayName() {
       alert(this.name);
   }
}

.cshtml 文件

var instance = new SomeClass("Timmy");
instance.sayName();

如您所見，即使我明確將參數定義為僅接受數字，我仍將字元串傳遞給建構子，但 TypeSafely 被忽略並且 TypeScript/JavaScript 執行時好像沒有問題一樣。

這兩種文件類型都是微軟發明的，所以我有點驚訝它們彼此之間並沒有更友好。這不是世界末日，至少我仍然能夠使用物件導向程式，我只是好奇是否有其他人經歷過這種情況並且可以給我一個簡短的解釋。

TypeScript 轉譯器僅檢查和轉譯僅包含以下內容的文件：

• Javascript
• 帶有 TypeScript 添加的一些語法糖程式碼的 Javascript（靜態類型、泛型類等）

CSHTML 文件基本上被創建為包含 Razor/C# 程式碼，當然還有 HTML/JavaScript/CSS。

一些開發人員試圖將 Javascript 程式碼和 CSS 樣式表直接添加到 Cshtml 文件中，這不是一個好的做法。

JavaScript 程式碼和 CSS 樣式應該在它自己的文件中。然後在您的 CSHTML 中使用script(Javascript) 或(CSS) 標記來引用該文件。style

不建議將 Javascript 程式碼直接放入您的視圖（CSHTML 或只是 HTML），因為它違反了**Unobtrusive JavaScript**的以下原則：

將功能（“行為層”）與網頁的結構/內容和表示分離（來源Wikipedia）

一些 ASP.Net MVC 開發人員仍然繼續將他們的 Javascript 程式碼直接放入他們的 Razor 視圖中，因為他們需要將一些來自視圖模型的數據直接傳遞給 JavaScript 程式碼。當 Javascript 程式碼已經在視圖中時，很容易傳遞數據而沒有任何復雜性。但我已經說過這​​不好;-)。

可以避免這種違反 Unobntrusive JavaScript 原則的事情。所有需要被 JavaScript 程式碼讀取的數據都應該通過在你的 HTML 元素中使用 data 屬性來儲存，例如

<span id="mySpan" data-t-name="123456">Hello World</span>

然後在您的 TypeScript 程式碼中，只需使用 jQuery（或 vanilla javascript）來獲取您在 CSHTML 視圖中設置的數據，如下所示：

let tName: number = int.Parse($("#mySpan").data("t-name"));
var instance = new SomeClass(tName);
instance.sayName();

之後，將 TypeScript 生成的 js 文件引用到您的 CSHTML 中。

希望能幫助到你。

引用自：https://stackoverflow.com/questions/40429693