Microsoft TypeScript – A Perfect Adoption for ASP.NET

TypeScript is an open source JavaScript library developed by Microsoft. Just imagine how useful it will be for JavaScript developers to have compile time errors and be able to write strongly typed JavaScript code similar to a server side code like C#. This is what Microsoft TypeScript is all about.
The good news is that it is friendlier with the Visual Studio 2012 IDE and therefore making it easy for Asp.Net developers to use it.

For adding TypeScript to Visual Studio 2012 IDE you need to download the plug-in from here and install it.

TypeScript Types

As the name suggests the script will be strongly typed and in this section let’s focus on that. Ideal JavaScript will do only an inference of the type during runtime as the var type will accept anything during the design time. Following is a sample code where an addition of number and string goes through (value will be 10typescript).

var a = 10;
var b = "javascript";
 
var sum = a + b;
console.log(sum);

In TypeScript the following code will thrown design time error as the variables are strongly typed. This will prevent developers from delivering any bad or faulty code.

var a1: number = 10;
var b1: string = "typescript";
var sum1: number = a1 + b1;

Here are some important types and features that are exposed by TypeScript.

Following is a sample TypeScript code using some key features.

module VehicleModule {
    export interface ICarController {
        Color: string;
        GetTotalMilesDriven(): number;
        ParkTheCar(garageNumber: string): string;
    }
 
    export class CarController implements ICarController {
        Color = "Blue";
        constructor(carColor: string) {
            this.Color = carColor;
        }
 
        GetTotalMilesDriven = () =>
        {
            return 1000;
       };
 
        ParkTheCar = (garageNumber) => {
            return "Car parked in garage " + garageNumber;
        };
    }
}
 
var car = new VehicleModule.CarController("Red");
car.GetTotalMilesDriven();
car.ParkTheCar("101");

TypeScript Compiler

Once you install the TypeScript plug-in in your machine then the compiler for TypeScript will be installed onto the machine as well. As I mentioned earlier that TypeScript is a super set of JavaScript, so the job of the compiler is to convert the TypeScript into JavaScript. You can use the command line to achieve it. Here is a sample command to generate the JS file from the TypeScript, which you wrote.

>tsc myscript.ts

The above command will generate the JavaScript file named myscript.js. Fig 1.0 shows the list of wild cards, which can be used in the command line.

Fig 1.0 – Wild Cards

Compilation of the TypeScript code provided in the previous section will produce the following JavaScript.

var VehicleModule;
(function (VehicleModule) {
    var CarController = (function () {
        function CarController(carColor) {
            this.Color = "Blue";
            this.GetTotalMilesDriven = function () {
                return 1000;
            };
            this.ParkTheCar = function (garageNumber) {
                return "Car parked in garage " + garageNumber;
            };
            this.Color = carColor;
        }
        return CarController;
    })();
    VehicleModule.CarController = CarController;    
})(VehicleModule || (VehicleModule = {}));
var car = new VehicleModule.CarController("Red");
car.GetTotalMilesDriven();
car.ParkTheCar("101");

If you are a Visual Studio 2012 user, then you don’t have to worry about running the command line utility since type script is tightly integrated in Visual Studio 2012. For every save of the .ts file the compilation is run and the resulting JavaScript is updated in the target .js file. In fact a minified version of the file will also be created and maintained in sync with the .ts code base. Fig 1.1 shows the hierarchy of the script files in the solution explorer.

Fig 1.1 – Hierarchy of the Script Files

There are many configurations that can be made for the TypeScript in Visual Studio 2012. GO to Tools –> Options –> Web Essentials –> TypeScript. Fig 1.2 shows the list of available options.

Fig 1.2 – TypeScript Options

Definition Files

TypeScript also provides the flexibility of using plain JavaScript, DOM objects and also other third party libraries like jQuery. All you have to do is add the reference of a TypeScript definition file. The extension of these files will be *.d.ts. You can download these definition files for various libraries from here.

Though TypeScript offers so many features like strong typing, compilation check, strong binding with Visual Studio IDE, clean code maintenance, etc., it all ends up in generating JavaScript, which is going to be used on web pages. So there is no doubt that it would be a perfect adoption for ASP.net web applications.

Happy reading!