TypeScript inside .cshtml Razor Files

Question

I am starting a new project using the ASP.NET-MVC framework. I would like to use TypeScript in this project instead of JavaScript. TypeScript is easily supported by Visual Studio, but does not seem to be fully compatible with the .cshtml firewall files. I can create my classes in the .ts file and call these classes in my .cshtml file, the problem is that when I pass parameters to the object in the .cshtml file, TypeSafety is ignored and the function runs as if the 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(); 

As you can see, I pass the string to the constructor, although I clearly defined the parameter to accept only numbers, but TypeSafely is ignored, and TypeScript / JavaScript is executed as if there was no problem.

Both file types were invented by Microsoft, so I'm a little surprised that they are not more friendly to each other. This is not the end of the world, at least I can still use object-oriented programming, I'm just wondering if someone else has experienced this and can give me a brief explanation.

Answer 1

TypeScript transpiler only checks and transfers files that contain only:

• Javascript
• Javascript with some syntax sugar added by TypeScript (static typing, general class, etc.)

CSHTML files are mainly designed to contain Razor / C # code and, of course, HTML / JavaScript / CSS.

Some developers are trying to add Javascript code and CSS stylesheets directly to Cshtml files, and this is not good practice.

JavaScript code, as well as CSS style, must be in your own file. Then link to the file using the script tag (Javascript) or style (CSS) in CSHTML.

Entering Javascript directly into your view (CSHTML or just HTML) is not recommended as it violates the following principle. Unobtrusive JavaScript

Separation of functionality ("behavioral level") from the structure / contents of a web page ( Wikipedia source)

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

These kinds of things that violate the principles of unobtrusive JavaScript can be avoided. All data that must be read by JavaScript code must be stored using the data attribute in your HTML elements, for example.

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

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

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

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

Hope this helps.