What is TypeScript

Posted by robert | Filed under TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript which primarily provides static typing, classes and interfaces. Basically you are writing JavaScript with a few conventions that helps you writing cleaner code which will compile into normal JavaScript. One of the big benefits is to enable IDEs to provide code completion, spotting common errors, refactoring, etc.

There are lots of tutorials out there that are good “What is TypeScript” but I just wanted to show some simple examples how TypeScript is similar and different from native JavaScript.

Note: These first couple of examples are not using any TypesScript type annotations but will still compile fine.

Single Class Example

JavaScript Example:

var Person = function(name, age) {
    this.name = name;
    this.age = age;
};

Person.prototype.getDescription = function () {
    return this.name + " is " + this.age + " years old.";
};

TypeScript Example:

class Person {

    name;
    age;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getDescription() {
        return this.name + " is " + this.age + " years old.";
    }

}

Below how we would use these examples:

var person = new Person("Robert", 35);
console.log(person.getDescription());
//Robert is 35 years old

As you can see TypeScript is JavaScript but with a few conventions on how to create a class, always having a “constructor” method and not using the function word. With TypeScript you don’t need type annotation on properties(variables) and methods(functions) but it will come in handy when you start working in large projects and have an IDE that supports TypeScript. Later I will show you the TypeScript code with full type annotations but first I want to compare extending classes between JavaScript and TypeScript.

Extending Classes Example

JavaScript Example:

//Person Class
var Person = function(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.getDescription = function() {
    return this.name + " is " + this.age + " years old";
}


//Man Class
var Man = function(name, age) {
    Person.prototype.constructor.call(this, name, age);
}

Man.prototype = new Person();
Man.prototype.constructor = Man;

Man.prototype.getDescription = function() {
    var originalDescription = Person.prototype.getDescription.call(this);
    return originalDescription + " and is a man";
}

TypeScript Example:

//Person Class
class Person {

    name;
    age;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getDescription() {
        return this.name + " is " + this.age + " years old.";
    }

}

//Man Class
class Man extends Person {

    constructor(name, age) {
        super(name, age);
    }

    getDescription() {
        var originalDescription = super.getDescription();
        return originalDescription + " and is a man";
    }

}

Below how we would use these examples:

var man = new Man("Robert", 35);
console.log(man.getDescription());
//Robert is 35 years old and is a man

TypeScript Example with Type Annotations

Below is the TypeScript class with type Annotations to help developers and IDE’s determine what type of data can be assigned to a property or passed to a methods. The beauty is if you have an IDE like WebStorm 6/PhpStorm 6 you can get code completion and accurate refactoring.

//Person Class
class Person {

    public name:string;
    public age:number;

    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }

    public getDescription():string {
        return this.name + " is " + this.age + " years old.";
    }

}

//Man Class
class Man extends Person {

    constructor(name:string, age:number) {
        super(name, age);
    }

    public getDescription():string {
        var originalDescription:string = super.getDescription();
        return originalDescription + " and is a man";
    }

}

To get started with TypeScript check out my OOP TypeScript Tutorial. Be sure to check out all of my TypeScript Tutorials.

Comments (1) | May 5th, 2013

One Response to “What is TypeScript”

1. Clark Says:
   May 12, 2013 at 1:39 pm

   Hey Robert! As always thanks!

   Reply