TypeScript within .cshtml Razor Files

Question

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 file

    export class SomeClass {

    name: number;

    constructor(public tName: number) {
        this.name = tName;
    }

    public sayName() {
        alert(this.name);
    }
}

.cshtml file

var instance = new SomeClass("Timmy");
instance.sayName();

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.

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.

Answer 1

TypeScript transpiler only checks and transpiles files that only contain :

• Javascript
• Javascript with some syntaxique sugar code added by TypeScript (static typing, generic class etc...)

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

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 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 .

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

Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation (source Wikipedia)

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

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>

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

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

Hope it helps.