Angular uses TypeScript extensively for app development. Hence as part of the Angular primer, we will refresh the necessary TypeScript concepts as well.

If you are new to TypeScript, TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript provides static typing, classes, and interfaces and supports almost all features of ES6 and ES7 before they land in the browser.

A TypeScript file is saved with a .ts extension.

The main advantage of adding typings to an untyped language (JavaScript) is to make IDEs understand what we are trying to do and better assist us while coding; in other words, Intellisense.

Having said that, here is what we can do with TypeScript.

In vanilla JavaScript, we would do something like this:

x = 20; 
// after a few meaningful minutes  
x = 'nah! It's not a number any more';

But in TypeScript, we cannot do as shown in the preceding code snippet, the TypeScript compiler would complain as we are modifying the variable type at runtime.

When we declare variables, we can optionally declare the types of variables. For instance:

name: string = 'Arvind'; 
age: number  = 99; 
isAlive: boolean = true; 
hobbies: string[]; 
anyType: any; 
noType = 50; 
noType = 'Random String';

This increases the predictability of what we are trying to do.

I am a guy who believes that JavaScript is an object-based programming language and not an object-oriented programming language, and I know quite a lot of people who disagree with me.

In vanilla JavaScript, we have functions, which act like a class and exhibit prototype-based inheritance. In TypeScript/ES6, we have the class construct:

class Person { 
  name: string; 

constructor(personName: string) {  
this.name = personName;  
} 

getName { 
    return "The Name: " + this.greeting; 
}   
} 
// somewhere else 
arvind:Person = new Person('Arvind');

In the preceding example, we have defined a class named Person and we are defining the class constructor, which accepts the name on initialization of the class.

To initialize the class, we will invoke the class with a new keyword and pass in the name to the constructor. The variable that stores the instance of the class -- the object, arvind in the preceding example, can also be typed to the class. This helps in better understanding the possibilities of the arvind object.

Note: The classes in ES6 still follow Prototypal-based Inheritance and not the classical Inheritance model.

As we start building complex apps, there will be a common need for a certain type of structure to be repeated throughout the app, which follows certain rules. This is where an interface comes into the picture. Interfaces provide structural subtyping or duck typing to check the type and shape of entities.

For instance, if we are working with an app that deals with cars, every car will have a certain common structure that needs to be adhered to when used within the app. Hence we create an interface named ICar. Any class working with cars will implement this interface as follows:

Interface ICar { 
  engine : String; 
  color: String; 
  price : Number; 
} 

class CarInfo implements ICar{ 
  engine : String; 
  color: String; 
  price : Number; 

  constructor(){ /* ... */} 
}

In vanilla JavaScript, you must have observed code blocks like this:

(function(){ 
  var x = 20; 
  var y = x * 30; 
})(); //IIFE 
// x & y are both undefined here.

Modules are achieved in ES6/TS using the imports and exports syntax:

logic.ts
export function process(){ 
  x = 20; 
  y = x * 30; 
} 

exec.ts 
import { process } from './logic'; 
process();

These are the bare essentials that we would need to get started with TypeScript. We will look at more such concepts where needed.

With this we wrap up the key concepts needed to get started with TypeScript. Let us get started with Angular.