Introduction to Typescript and Everything about Types

Getting started with Typescript

download (1).png

Typescript is typed javascript. Typescript is an open-source programming language from Microsoft for building web applications. The code is written in Typescript and compiles down to plain javascript.

Typescript eventually at the end of the day, gets converted into javascript only.
Typescript actually serves your way better in ANGULAR when compared to anything else.
It works on any browser, any os that javascript runs.

We are gonna dive into the TS

Setting up Typescript

To install typescript make sure that you have installed NPM [ Node Package Manager ].

write this to terminal

npm install -g typescript

Assigning types in TS

Typescript is a typed language where we can specify the type of variables.

To assign a type, use let or const then use: then the name of the type then an equal sign, and then value of it. Like this

let varName : type = value ;

Typescript includes all the core types of javascript - number , string , boolean .

Mentioning types allows you to write less buggy code.

TS-Variable

TS encourages us to use var, let const keyword for variable declaration.

var

variables in TS can be declared using var keyword as in JS.

var myVariable : number = 3 ;

let

let declarations can be done without initialization. a variable declared with let have a block-scope and cannot be re-declared.

let myVariable: number = 3 ;

const

const declarations are always initialized with a value. variable declared with const have a block-scope and cannot be re-declared .

const myVariable : number = 3 ;

The Data Types in TS

Typescript Number

Numbers in TS are either floating point or integers.

let myNumber : number = 3 ;

let decNumber : number =3.3;

let bigNumber : bigint =333333333333333333333333;

Typescript String

TS uses (') or (") to surround literalz.

(`) uses to create a multiline string.

let name : string = ' Harry potter ' ;
let role : string =" React native developer " ;


//Multiline string

let experience = ` 3 yearz of experience 
             as react native developer ` ;

Typescript Boolean

It allows two values true and false.

let isGood : boolean ;

isGood = true ;

Typescript ArrayType

It is an ordered list of data.

There are two ways to declare an array variable

//using square brackets 

let list1 : number[ ] = [1,2,3];

//using a generic array type

let list2 : Array<number> =[1,2,3];

Typescript Tuple

A Tuple can contain two values of different data types.

let student : [ string , number ] = [ ' Harry potter ', 3 ] ;

Typescript Enum

An enumerated data type is a group of named constant values.
enum is a way of giving more friendly names to a set of numeric values;

enum color {yellow , purple , blue} ;

let fav : color = color.blue ;
console.log(fav) ; // output is 2

Typescript Any

If you are unsure what the variable type would be then make use of any type.

If you are expecting a value from a third-party library, user inputs, and when the value is dynamic then any type comes in handy here.

This allows you to reassign type of variable to any type .

let numberOne : any =10 ;
numberOne = true ;
numberOne = "hello" ;

// Compiler doesn't throw an error here.

Typescript Void

void is used where there is no data .

Use the void type as the return type of function that does not return a value.

function log(harry) : void {

console.log(harry);

}

Typescript Union

Union allows us to use more than one data type for a variable.

let animal : ( boolean | string ) ;

animal = "Rabbit" ;

animal = true ;

Typescript null,undefined

In TS null and undefined are classified as a subtype of all other types.

let n : null = null ;
let u :undefined = undefined ;

You can assign a value of null and undefined to either boolean, number or string.

let isGood : boolean = null ;
let myName : string = undefined ;

Let us recall the core types of TS

Type	Values	Description
number	3,3.3,-3	All numbers . No diff between integers and floats .
string	"Hoi",'Hoi',`Hoi`	All text values
boolean	true , false	Truthy and falsy values only .

Tips to compile and run

for example The file is saved as Lco.ts .


Compile it by using tsc Lco.ts  .

Then run it by using node Lco.ts .

Thanks for reading...😀
You can also visit my Linkedin profile...