TypeScript In OnePage

TypeScript For Angular By Sagar Jaybhay

It is a super-set of JavaScript and it is a language. It provides the feature which is not present in the JavaScript. Any valid JavaScript code is valid at typescript.

  1. Strong Typing
  2. Object-oriented features
  3. Catch errors at compile-time lots of error able to catch

The browser outside is not able to understand typescript so we need to more accurate way to compile code so typescript compiler transpile the code into JavaScript.

Different Type In Typescript:

  1. Any: in if you don’t know the type of datatype you can use any.
  2. Their are different datatypes in typescript like number,string,date,boolean,any. code example shown in below.
let a:any;
a=10;
a=true;
a="sagar Jaybhay";
let g:boolean;
let c:string;
let d:any;
let e:Date;
let f:number[];
let h:any[]=[1,'sagar',true,0.1]

Type Assertion:

It means typecasting by using this you can get intellisense. It is not changing the type of that datatype. In this, we only tell type variable to the compiler so that he will provide intellisense.

let first_Name ="sagar jaybhay";
let endingChar=(<string>first_Name).endsWith('y');
let another= (first_Name as string).endsWith('y');
typeassertion in typescript

Arrow Function:

In JavaScript we have to write a function we like below way.

let display_name_javascript_way=function(name)
{
    console.log(name);
}

But in typescript, it is also another way to write this function.

let print_by_arrow_function=(parameterName)=>{
    console.log(parameterName);
}

If the function is a single line we also remove the parenthesis from that function. It is like a lambda function in c#.

The interface in Typescript:

It is like a contract. It doesn’t have any method implemented in that it’s only structure.

interface I1
{
    name:string;
    salary:boolean;
    sal:number;
}

Class

Is a unit of class variables and function. By creating an object you can access these variables and method inside the class.

class Student
{

    name:string;
    mark:number;
    address:string;

percentahe=function(){
    this.mark=423;
    console.log(423/700*50);
}

displayName(){
    console.log(this.name);
}
}

let s=new Student();
s.name="sagar Jaybhay";
s.displayName();
s.percentahe();

Constructor in TypeScript:

Every class has a constructor which is called when we create the object. To initialize class parameter they are used.

class Student
{

    name:string;
    mark:number;
    address:string;

    constructor(mark1: number, name1: string) {
        this.mark = mark1;
        this.name = name1;
    }
percentahe=function(){
    this.mark=423;
    console.log(423/700*50);
}

displayName(){
    console.log(this.name);
}
}


let s = new Student(12,"sagar Jaybhay");
s.displayName();
s.percentahe();

You can not overload constructor in typescript. So you wan to make option parameter you can do by using below code.

constructor(mark1?: number, name1?: string) {
        this.mark = mark1;
        this.name = name1;
    }

Access Modifier in TypeScript:

Public, private and protected. It is used for to limit or restriction on the user that outside of class what can access and modify for that reason it is used. By default all members are public.

class Student
{
    name: string;
    mark: number;
    address: string; 
}

These all are public. So you can easily access this outside of class.

class in typescript

Now make a name variable as private then it is not accessible.

private in class typescript
class Student
{  
 address:string; 
 constructor(private name?:string,private mark?:number)
{
}
displayname(){
    console.log(this.name);
}
}

If you declared a variable inside the constructor with access modifier then no need to write that inside class or again. It is accessible through the class like a class variable. By using this feature we remove the redundancy of code.

Properties in TypeScript:

It looks like variable outside class but internally it is like a method. Validation for a variable are included in this property.

class Student
{  
constructor(private x:number)
{

}

Get X(){
    return this.x;
}
Set X(value)
{
if(value<0)
throw new Error('Below 0 Not allowed');
this.x=value;
}
}

Set X & get X are the property method for X variable and it is used to set and get the value of X variable.

property in typescript
property in typescript 1

Modules

It is like you can refer another class which is written in outside of that file or external file. For access such class you need to include this class with import statement and which requires path of that file.

import  {Student } from  './student';
Module in typescript

For import you need to export that class first then and then only you can export it. In a big project, it required everyone to write their code in a separate file which another developer may want to use so in that case modularity required.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *