Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

TypeScript 101: Tools to Hello World

DZone's Guide to

TypeScript 101: Tools to Hello World

TypeScript is super-set of JavaScript created by Microsoft that “lets you write the way you really want and compiles to JavaScript.”

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

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:

Support for standard JavaScript
Static typing and annotations
Encapsulation using classes and modules
Support for constructors, properties, and functions
Syntax checking

Does:

Syntactically sugar-coat JavaScript as a super-set of ECMASCRIPT 5 and with various proposed features of ECMASCRIPT 6
Compiles with module code generation which can be loaded statically or dynamically
Works with type inference
Does not reorder variable declaration

TypeScript in Visual Studio

Prerequisites

Figure 1: TypeScript Download

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. 

    Figure 2: TypeScript project template location

  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.

    Figure 3: TypeScript file app.ts in Solution Explorer

    Figure 4: Reference to compiled app.js in index.html

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:

Figure 5: Simple HTML with TypeScript application in browser


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:

    Figure 6: Git-cloning TypeScript plugin for SublimeText

  2. Once installed, create a new .ts file in Sublime Text and you will find that TypeScript syntax is working (Figure 7):

    Figure 7: Working syntax highlighting in SublimeText

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 ToolsBuild SystemTypeScriptBuild 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!

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:
ecmascript ,javascript ,typescript

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}