TypeScript 101: Tools to Hello World

this post by dhananjay kumar of the infragistics.com community blog , syndicated by permission.

this post will help you get started with typescript by setting up the development environment for typescript in visual studio and sublime text. at the end of the post, we will create a simple typescript program in visual studio.

typescript features

includes:

does:

typescript in visual studio

prerequisites

to work with typescript in the visual studio, download the typescript package for your version of visual studio from http://www.typescriptlang.org and install as needed ( figure 1 , right).

more recent versions of visual studio include typescript.

to create a typescript project in visual studio

1. find html application with typescript inside the typescript section of installed templates, as shown in ( figure 2 ), below.

   

2. create a project using the

   html application with typescript

   template. after making the project, find the files app.ts in the solution explorer ( figure 3 ) and app.js in the project folder:

   • app.ts
     a typescript file. whenever you save this file, visual studio will create a javascript equivalent of it with the name app.js .

   • in index.html ( figure 4 ), you will notice a reference to the compiled app.js ; however the file is not included in the project by default. you can add it to the project manually.

   

   

you can add more than one typescript file with opening a context menu with a right click, selecting "add new item," and then "typescript file." after adding the new source file, visual studio will create a corresponding javascript file in the same folder. you need to manually add references to those javascript files in your html.

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, shown in figure 5 , below:

typescript in sublime text

prerequisites

• a syntax highlighter

• a custom build system

to install typescript syntax highlighting

1. git clone this package to \appdata\roaming\sublime text 2\packages as shown in figure 6 , below:

   

2. once installed, create a new .ts file in sublime text and you will find that typescript syntax is working ( figure 7 ):

   

to create the typescript build system

1. tools → build system → new build system

2. in the new build system window, paste the code below and save the file with a name like "typescriptbuild."

{
    "selector": "source.ts",
    "cmd": ["tsc", "$file"],
    "file_regex": "^(.+?) \\((\\d+),(\\d+)\\)(: .+)$"
}

after custom build creation, select tools → build system → typescriptbuild and you should able to use ctrl+b  to build typescript into a javascript file.

a simple example

1. using typescript, let's create a class. typescript allows us to create a class using 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.

2. below, we are creating a student class with two properties, constructor and a method. the class can be created as:

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!