.net - .cshtml Razor 文件中的 TypeScript

Question

我正在使用 ASP.NET-MVC 框架开始一个新项目。我想在这个项目中使用 TypeScript 代替 JavaScript。 Visual Studio 很容易支持 TypeScript，但似乎与 .cshtml razor 文件不(完全)兼容。我能够在 .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 执行时就好像没有问题一样。

这两种文件类型都是由 Microsoft 发明的，所以我有点惊讶它们彼此之间并没有更友好。这不是世界末日，至少我仍然可以使用面向对象编程，我只是想知道是否有其他人经历过这种情况并且可以给我一个简短的解释。

Answer 1

TypeScript 转译器仅检查和转译仅包含以下内容的文件:

• Javascript
• Javascript，带有一些由 TypeScript 添加的语法糖代码(静态类型、泛型类等...)

CSHTML 文件基本上是为包含 Razor/C# 代码而创建的，当然还有 HTML/JavaScript/CSS。

一些开发人员试图将 Javascript 代码和 CSS 样式表直接添加到 Cshtml 文件中，这不是一个好的做法。

JavaScript 代码和 CSS 样式应该在其自己的文件中。然后在您的 CSHTML 中使用 script (Javascript) 或 style (CSS) 标记来引用该文件。

不推荐将 Javascript 代码直接放入您的 View (CSHTML 或只是 HTML)，因为它违反了 Unobtrusive JavaScript 的以下原则:

Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation (source Wikipedia)

一些 ASP.Net MVC 开发人员仍然继续将他们的 Javascript 代码直接放入他们的 Razor View 中，因为他们需要将一些来自 View 模型的数据直接传递给 JavaScript 代码。当 Javascript 代码已经在 View 中时，可以很容易地传递数据而不会出现任何复杂情况。但我已经说过这不好 ;-)。

这种破坏 Unobntrusive JavaScript 原则的事情是可以避免的。所有需要由 JavaScript 代码读取的数据都应该使用 HTML 元素中的数据属性来存储，例如

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

然后在您的 TypeScript 代码中使用 jQuery(或 vanilla javascript)来获取您在 CSHTML View 中设置的数据，如下所示:

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

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

希望对您有所帮助。