Using TypeScript with ASP.NET MVC 5 instead of JavaScript

In this post, we will be using TypeScript with ASP.NET MVC 5 instead of JavaScript. TypeScript can be used with any existing or new MVC 5 web application.

TypeScript is one of most fastest growing open source initiative, it’s getting adopted on large scale now. I won’t be dealing with ABCs of it, read through Why TypeScript? and Introducing TypeScript to know more

Article title states that instead of JavaScript, well not 100% as TypeScript (TS) is a superset of JavaScript (JS) and everything transpile down to JS. Using TS increases the static typing nature, catches errors or warning while writing, use hints of OOP concepts by using classes, interface etc.

Let’s now use TypeScript with ASP.NET MVC 5, create or use any existing MVC 5 application in either Visual Studio 2015 or 2017 IDE.

Install TypeScript from the download link, it installs all tooling power in VS IDE

tsconfig.json – TypeScript Configuration

Whenever we use TypeScript with ASP.NET MVC 5 (with any application – Angular, Ionic, NodeJS, ASP.NET Core), we must create tsconfig.json file. This file tells the TS compiler what to do with TypeScript code like transpile (compiled), output files in a directory, include comments or not.

A bunch of configuration entries for TypeScript exists with on its documentation site.

Create a folder tsScripts in MVC5 project, this folder acts as the root directory for TS project. Well, this is recommended step for keeping things simple. Then right click on folder name (tsScripts), add New file, select TypeScript Configuration file.

This will create a very basic TS configuration, copy the below configuration entries to get started with writing TypeScript with ASP.NET MVC 5

Breaking down the tsconfig.json

  • outDir – TS compiler outputs the transpile TS to JS in folder appScriptsJS
  • target – modules in form of es5 standard
  • sourceMap – these file help debug TS code in a browser. Used while development stage

First TypeScript file — app.ts

Any TypeScript file is marked with the extension of *.TS; Let’s create TS file app.ts in the tsScripts folder. We are creating it in TS project root folder. Copy the below code

Breaking down the app.ts

  • function Welcome returns string. Anything special in this? Yes, look person object is decorated with type string. This is the first hint of static typing of TypeScript
  • function ClickMeButton is a typical example of adding HTML string to DOM. Lookout user is string type now, which is passed to the Welcome method.

Try to change from string to number, it will show red underline saying you cannot assign a number to a string.

Use TypeScript with ASP.NET MVC 5

Once you build the application, the appScripts folder gets created (it is Output Directory for TS project). Folder name and location can be according to your needs.

Now that it’s JS file, we can include that in our HTML (cshtml) files, open _Layout.cshtml, place the SCRIPT tag inclusion for the app.js generated file or you can create BUNDLE for this to refer them.

BundleConfig.cs would contain the bundle configuration, refer source code on LearnTS repo on my GitHub. Create a new ASP.NET MVC 5 view for further exploration.

Snapshot of the TS and JS files from project structure. The TS files are compiled to JS files on the build of the solution.

TypeScript with ASP.NET MVC 5

TypeScript TO JavaScript

Calling TypeScript method from HTML

Virtually now we will be calling a JS method of ClickMeButton() written in TypeScript using the below code in new cshtml file.

On clicking of Show Message button, the divMsg gets written with the message. Run the application, go to Learn TypeScript page from menu. Clicking the button will display as shown below

TypeScript with ASP.NET MVC 5

TypeScript code in action

Debugging TypeScript code

When the application running, press F12 to view developer console window, move to sources tab, you would see the tsScripts folder containing the app.ts file, open it and place debugger on function, then click the button on UI to see debugger point being hit.

TypeScript with ASP.NET MVC 5

Debugging TypeScript Code in ASP.NET MVC 5

Summary

This is a basic setup of using TypeScript in ASP.NET MVC 5. It showcased using static typing, debugging and also highlighted that TypeScript is nothing but JavaScript.

 

You may also like...

1 Response

  1. August 9, 2017

    […] on August 8, 2017 submitted by /u/mithunvp [link] [comments] Leave a […]

Leave a Reply