.cshtml剃刀文件中的TypeScript [英] TypeScript within .cshtml Razor Files

问题描述

我正在使用ASP.NET-MVC框架开始一个新项目.我想在此项目中使用TypeScript代替JavaScript. Visual Studio可以轻松支持TypeScript，但似乎(.)与.cshtml剃刀文件不完全兼容.我可以在.ts文件中创建我的类，然后在.cshtml文件中调用这些类，问题是当我将参数传递给.cshtml文件中的对象时，TypeSafety被忽略，并且该函数像类型从未定义.

I am starting a new project using ASP.NET-MVC framework. I'd like to use TypeScript in this project in place of JavaScript. TypeScript is easily supported by Visual Studio but doesn't seem to be (fully) compatible with the .cshtml razor files. I'm able to create my classes within the .ts file and call those classes within my .cshtml file, the issue is when I pass in parameters to the object in the .cshtml file TypeSafety is ignored and the function is run as if a type were never defined.

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

As you can see, I am passing a string to the constructor even though I clearly defined the parameter to only accept numbers, but the TypeSafely is ignored and the TypeScript/JavaScript executes as if there is no issue.

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

Both file types were invented by Microsoft so I'm slightly surprised they aren't a little more friendly with each other. This isn't the end of the world, at least I am still able to use Object Oriented Programming, I'm just curious if anyone else has experienced this and can maybe give me a brief explanation.

推荐答案

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

TypeScript transpiler only checks and transpiles files that only contain :

• JavaScript
• TypeScript添加了一些语法糖代码的Javascript(静态键入，泛型类等)

CSHTML文件基本上是创建为包含Razor/C#代码以及HTML/JavaScript/CSS的.

CSHTML files are basically created to contain Razor/C# code and of course HTML/JavaScript/CSS.

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

Some developers are attempted to add a Javascript code and CSS stylesheet directly to the Cshtml files and by this is not a good practice.

JavaScript代码以及CSS样式应位于其自己的文件中.然后使用CSHTML中的script(Javascript)或style(CSS)标记来引用文件.

JavaScript code and also CSS style should be in its own file. Then reference the file by using script (Javascript) or style (CSS) tag in your CSHTML .

不建议将Javascript代码直接放入视图(CSHTML或HTML)中，因为它破坏了以下 不引人注目的JavaScript :

Putting Javascript code directly into your view (CSHTML or just HTML) are not recommended because it break the following principe of Unobtrusive JavaScript:

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

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

Some ASP.Net MVC developers still continue to put their Javascript code directly into their Razor views because they need to pass some data that are from the view model directly to the JavaScript code. When the Javascript code is already in the view, it is easy to pass the data without any complications. But I already said this is not good ;-).

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

This kind of things that breaks the Unobntrusive JavaScript principes can be avoid. All data that need to be read by JavaScript code should be stored by using data attribute in your HTML elements e.g.

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

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

Then in your TypeScript code just use jQuery (or vanilla javascript) to get the data you set in your CSHTML view like this:

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

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

After that, reference the generated js file from TypeScript into your CSHTML.

希望有帮助.

这篇关于.cshtml剃刀文件中的TypeScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！