.cshtml Razor 文件中的 TypeScript

Question

我正在使用 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 执行时就好像没有问题一样。

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

Answer 1

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

• Javascript
• 带有一些由 TypeScript 添加的语法糖代码的 JavaScript（静态类型、泛型类等）

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

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

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

不建议将 Javascript 代码直接放入您的视图（CSHTML 或只是 HTML），因为它违反了以下 Unobtrusive JavaScript 的原则：

将功能（“行为层”）与网页的结构/内容和表示分离（来源 Wikipedia）

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

这种破坏不显眼的 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 中。

希望对你有帮助。