Typescript Basics

Typescript language is a wrapper around javascript language. Any javascript code can also be a typescript code, but typescript has additional features like Strong Typing, Object Oriented features, Catching errors during compile time.

In Angular applications, all javascript code is generally written in typescript. Angular CLI under the hood compliles the typescript file into javascript before bundling in the deployable package.

We can individually learn Typescript without using Angular CLI by downloading Typescript using npm (node package manager).

Basic commands before working on typescript:

 ---------------------------------------------------------------------------------
 Command used to install typescript                         
 ---------------------------------------------------------------------------------
 Use ctrl+~ to open the terminal window in visual   
studio code                                                               
  
 Use command : npm install -g typescript               
 g --> global (installs typescript globally in your laptop   
 -------------------------------------------------------------

 ---------------------------------------------------------------------------------
 Command used to compile typescript                         
 ---------------------------------------------------------------------------------
 Use ctrl+~ to open the terminal window in visual studio code
  
 Use command : tsc main.ts                                   
 This command compiles and produces a javascript file named  main.js                                             
 -------------------------------------------------------------

 ---------------------------------------------------------------------------------
 Command used to compile and run typescript                          
 ---------------------------------------------------------------------------------
 Use ctrl+~ to open the terminal window in visual studio code

 Use command : tsc main.ts | node main.js                   
 This command will compile the main.ts file and will execute  the javascript file main.js   
---------------------------------------------------------------------------------

Variable Declaration:
In Javascript, variables are declared using the keyword - var. In ES2015 javascript standard, JS introduced a new variable declaration using the keyword - let.

The main difference in using variable declaration with 'var' and 'let' is that 'var' has scope to nearest function and 'let' has block scoping.

Type Assertion:
This is mainly used to assert the type of the variable so that intelli sense in Visual Studio Code (IDE) can provide the functions associated with that variable.

Arrow Functions : Same as lambda functions in java.

Object Oriented features of typescript:

In type script we cannot have multiple constructors. Solution is to make the constructor parameters optional. If one constructor parameter is made optional, then all the parameters following it should be made optional.

Eg :

class Point {
let x: number;
let y: number;


constructor(x?:number, y?:number){ --> If we keep a question mark, this means that x is optional)
this.x = x;
this.y = y;
}

}

Access modifiers : Public, private, protected. All the members of the class are by default public.

If we prefix the access modifier in the constructor, typescript will create the variables and also assign them. See the below code.

class Point {
//No need of declaring the variables

constructor(private x?:number, private y?:number){ --> If we keep a question mark, this means that x is optional)
//no need of assigning using this keyword
}
}

Modules in typescript:

If you want to use typescript file outside this file then we need to add export before class :

export class Point {
let x: number;
let y: number;


constructor(x?:number, y?:number){ --> If we keep a question mark, this means that x is optional)
this.x = x;
this.y = y;
}

}

For importing the above file in any other ts file, use below statement
import {Point} from "./path"

Thanks to Mosh for Angular youtube video : https://www.youtube.com/watch?v=k5E2AVpwsko