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执行就像没有问题一样。

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

Answer 1

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

Javascript
带有一些由TypeScript添加的syntaxique糖代码的Javascript（静态类型，泛型类等...）

基本上创建CSHTML文件以包含Razor / C＃代码，当然还包含HTML / JavaScript / CSS。

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

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

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

从网页的结构/内容和演示中分离功能（＆＃34;行为层＆＃34;）（来源维基百科）

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

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

<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();

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

希望它有所帮助。

.cshtml Razor文件中的TypeScript

1 个答案: