Blog

Getting started with TypeScript

Dhananjay Kumar / Thursday, October 8, 2015

 

TypeScript is superset of JavaScript created by Microsoft. TypeScript – according to its website – “lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript”.
 Some features of TypeScript include:

·        Support standard JavaScript

·        Static typing

·        Encapsulation using the classes and the modules

·        Constructors, properties and functions supports

·        You can define interface

·        Lambda support Lambda support

·        Syntax checking

·        Type annotations

·        Static or dynamic loading of module contents

TypeScript can be summarized in the following points:

·        TypeScript is syntactic sugar for JavaScript

·        TypeScript syntax are the superset of ECMASCRIPT 5 syntax.

·        TypeScript compiler converts or compiles the TypeScript file into a JavaScript file locally.

·        TypeScript does not reorder the variable declaration

·        TypeScript syntax includes various proposed features of ECMASCRIPT 6

·        TypeScript complies with module codes generation which can by loaded statically or dynamically.

·        TypeScript works with type inference

This post will help you to get started with TypeScript, setting up the environment for TypeScript development in the Visual Studio and Sublime Text. At the end of the post we will create a simple TypeScript program in Visual Studio.
 
TypeScript in Visual Studio
To work with TypeScript in the Visual Studio, download the package from the URL below:
 
 
Download and install TypeScript package for the cross ponding version of the Visual Studio installed on your machine. After successful installation of the TypeScript package, you will find HTML Application with TypeScript project template inside the TypeScript section of the installed template as shown in the image below:
 
 
Create a project using the HTML Application with TypeScript template. After successful creation of the project, in the solution explorer you will find the project created with the following files.
 
 
In the project app.ts you’ll find a TypeScript file. Whenever you save this file in the background, Visual Studio will create a JavaScript equivalent of app.ts with the name app.js. In the index.html, you will notice that a reference of complied JavaScript file app.js is added.
 
As you might have noticed that app.js file is in the same folder with the app.ts file and it is not included in the project. However if you want you can include the app.js file in the project.
The file app.ts contains a reference code to print the current time in TypeScript. Without changing anything, go ahead and run the application in your favorite browser and you will have the current time printed in the browser using TypeScript as shown the image below:
 
You can add more than one TypeScript file in the project by right clicking on the project and then Add New Item and then select TypeScript file. After adding the file when you build the project, Visual Studio will create corresponding JavaScript files in the same folder of TypeScript files. You need to manually add references of JavaScript files on the HTML.
 
TypeScript in Sublime Text
 
To work with TypeScript in the Sublime Text, we need following two items:

1.      Syntax Highlighter

2.      Custom build for TypeScript

 
To install the TypeScript syntax highlighter for Sublime text navigate to https://github.com/Microsoft/TypeScript-Sublime-Plugin and clone the package in the \AppData\Roaming\Sublime Text 2\Packages using the git clone command as shown in the image below:
 
Once successfully cloned, create a file with extension .ts in Sublime Text and you will find that TypeScript syntax is working as shown in the image below:
 
You can create the TypeScript build system for Sublime Text by navigating to Tools->Build System-> New Build System.
In the New Build System window, paste the code below and save the file with any name like TypeScriptBuild or something similar.
 
{
    "selector": "source.ts",
    "cmd": ["tsc", "$file"],
    "file_regex": "^(.+?) \\((\\d+),(\\d+)\\)(: .+)$"
}
 
After custom build creation, select Tools->Build System-> TypeScriptBuild (or whatever name you gave your custom build) and you should able to use Ctrl+B  to build TypeScript in Sublime Text. As an output you will find a JavaScript file has been created.
 
A simple example
Using the TypeScript, let us create a class. TypeScript allows us to create a class using the very simple syntax. A class can be created using the class keyword. We can define variables with the types, and a constructor can be created using the keyword constructor.
In the below listing, we are creating a Student class with two properties, constructor and a method. The class can be created as shown in the listing below:
 
class Student {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
 
    Print() {
 
        alert(this.name + " is " + this.age + " years old !!");
    }
}
 
window.onload = () => {
    var stud1 = new Student("DJ", 33);
    stud1.Print();
};
 
We can create an object using the new keyword. In the Student class Print method, we are displaying the age and name of the student.
When you run the application you will get an alert message as shown in the image below:
I hope you find this post useful to get started with TypeScript - have something to say? Leave a comment!
 

Want to build your desktop, mobile or web applications with high-performance controls? Download Ultimate Free trial now and see what it can do for you!