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

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

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原则:

从网页的结构/内容和表示中分离功能("行为层")(源维基百科)

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

之后,将生成的js文件从TypeScript引用到CSHTML中.

希望能帮助到你.