Introduction and Basics about TypeScript

TypeScript from Microsoft
TypeScript is a free and open source programming language developed by Microsoft. TypeScript is a superset of JavaScript. TypeScript allows the developers to write the object oriented style of code and compiles them into JavaScript format. For large and JavaScript base projects, TypeScript implementation will result in robust software development.

In this article, I am going to walk through on setting up TypeScript in Visual Studio and describing basics about it.

TypeScript script can be installed in Visual Studio 2012, but it was included by default from Visual Studio 2013 Update 2 and higher versions. You can download the TypeScript for your respective Visual Studio from below button:



TypeScript Setup

After download and installing the TypeScript from the above download button, create a new ASP.NET web project in your Visual Studio as shown below.

Note: In this article I am showing the TypeScript examples using ASP.NET web project application in Visual Studio 2015. You can create any other applications like MVC, ASP.NET Core applications.

TypeScript Project in ASP.NET
After words, create a new folder under project and name it Scripts. You can have your own name.

Next, right click on the Scripts folder and choose Add -> New Item.

Select TypeScript File from the available templates under Web category and add the file with default name app.ts

The outcome of the TypeScript file will be producing the compiled version of JavaScript file from TypeScript.
TypeScript File

Now again right click on Scripts folder and choose Add -> New Item

Choose the TypeScript JSON Configuration File from the available templates list under Web category and add it with default name tsconfig.json
TypeScript JSON Configuration File

Now your solution in visual studio look like this:
TypeScript Project in Visual Studio

If you want to compile the TypeScript file automatically upon saving it, set the compileOnSave key to true value in tsconfig.json file as shown below:
TypeScript Configuration CompileOnSave

TypeScript Basics

TypeScript allows the developers to write the object oriented style of code and compiles it into JavaScript structured format. 

Here is the basic example of the TypeScript code, which shows you how to write a class in TypeScript and defining it's class members (variables, properties, constructors and methods). 

//TypeScript class
class Employee
{
    //variables
    private firstName: string = "";
    private lastName: string = "";

    //get & set property
    get FirstName(): string
    {
        return this.firstName;
    }
    set FirstName(value: string)
    {
        this.firstName = value;
    }

    //get & set property
    get LastName(): string {
        return this.lastName;
    }
    set LastName(value: string) {
        this.lastName = value;
    }

    //constructor
    constructor(fName: string, lName: string)
    {
        this.FirstName = fName;
        this.LastName = lName;
    }

    //method
    GetDisplayName(): string
    {
        return this.FirstName + " " + this.LastName;
    }
}

As you noticed in the above code, TypeScript programming is very similar to other high level programming languages like .NET/JAVA.

Now, if you save the TypeScript file app.ts which automatically compiles and produces the app.js JavaScript file in the same location.

Next steps is to create a new UI page, refer the app.js JavaScript file and call the functions from JavaScript file as shown below:
Running TypeScript Code

When you run the about code, it will alert the display name of the Employee as shown below:
TypeScript Execution Output

Hope this helps you to get start with TypeScript. If you have any queries let’s discuss them from below comment box. 

No comments:

Powered by Blogger.