Quick overview

In this section, I'll present a quick overview of TypeScript. This presentation is by no means exhaustive, as I will explain particular concepts when we come across them. However, here are some basics.

TypeScript is, as I've mentioned, a typed superset of JavaScript. While TypeScript is typed, it only proposes four base types for you to use out of the box. The four types are String, number, Boolean, and any. These types can, using the : operator, type var name: string variables or function arguments and return the add(a:number, b:number):number type function. Also, void can be used for functions to specify that they don't return anything. On the object-oriented side, string, number, and boolean specialize any. Any can be used for anything. It's the TypeScript equivalent of the Java object.

If you need more than these types, well, you'll have to create them yourself! Thankfully, this is pretty straightforward. Here's the declaration of a user class that contains one property:

class Person{
name:String;
}

You can create a new Person instance with the simple command shown here:

var p:Person = new Person();
p.name = "Mathieu"

Here, I create a p variable that statically (for example, the left-hand side) and dynamically (for example, the right-hand side) stands for a Person. Then, I add Mathieu to the name property. Properties are, by default, public, but you can use the public, private, and protected keywords to refine their visibility. They'll behave as you'd expect in any object-oriented programming language.

TypeScript supports interfaces, inheritance, and polymorphism in a very simple fashion. Here is a simple hierarchy composed of two classes and one interface. The interface, People, defines the string that will be inherited by any People implementation. Then, Employee implements People and adds two properties: manager and title. Finally, the Manager class defines an Employee array, as shown in the following code block:

interface People{ 
   name:string; 
} 
 
class Employee implements People{ 
   manager:Manager; 
   title:string; 
} 
 
class Manager extends Employee{ 
   team:Employee[]; 
} 

Functions can be overridden by functions that have the same signature, and the super keyword can be used to refer to the parent implementation, as shown in the following snippet:

Interface People { 
 
   name: string; 
   presentSelf():void; 
} 
 
class Employee implements People { 
 
   name: string; 
   manager: Manager; 
   title: string; 
 
   presentSelf():void{ 
 
         console.log( 
 
               "I am", this.name,  
               ". My job is title and my boss is",  
               this.manager.name 
 
         ); 
   } 
} 
 
 
 
class Manager extends Employee { 
 
   team: Employee[]; 
 
   presentSelf(): void { 
         super.presentSelf(); 
 
         console.log("I also manage", this.team.toString()); 
   } 
} 

The last thing you need to know about TypeScript before we move on to the best practices is the difference between let and var. In TypeScript, you can use both to declare a variable.

Now, the particularity of variables in TypeScript is that it lets you decide between a function and a block scope for variables using the var and let keywords. Var will give your variable a function scope, while let will produce a block-scoped variable. A function scope means that the variables are visible and accessible to and from the whole function. Most programming languages have block scope for variables (such as C#, Java, and C++). Some languages also offer the same possibility as TypeScript, such as Swift 2. More concretely, the output of the following snippet will be 456:

var foo = 123; 
if (true) { 
    var foo = 456; 
} 
console.log(foo); // 456

In opposition, if you use let, the output will be 123 because the second foo variable only exists in the if block:

let foo = 123; 
if (true) { 
    let foo = 456; 
} 
console.log(foo); // 123