Java Topics

Tuesday, April 19, 2022

Typescript

 TypeScript Type

---------------------------------------------------

1) The TypeScript language supports different types of values

     TypeScript

                    1) Static Types

                           a) Built-in or Primitive Type

                           b) User-Defined DataType

                    2) Generics

                    3) Decorators

Static Types

-------------

1) Static Types mean "at compile time " or "without running a program."

2) Static types can be further divided into two sub-categories

         a) Built-in or Primitive Type

         b) User-Defined DataType

Built-in or Primitive Type

---------------------------------

     1) Number

     2) String

     3) Boolean

     4) Void

     5) Null

     6) Undefined

     7) Any Type


User-Defined DataType

----------------------------------

1) Array

2) Tuple

         (var userId : [number, String] = [1, 'USER001'];)

         (var Employee : [number, string, boolean] = [1, 'USER001', true];)

3) Interface

4) Class

5) Enums

6) Functions

number

-----------

1) The numeric data type can be used to represents both integers  and fractions.


demo 

        let first: number = 12.0;  //number

         console.log(first);        //12


2) TypeScript also supports Binary(Base 2),Octal(Base 8), Decimal(Base 10), and Hexadecimal(Base 16) literals.


string

----------


1) string literals is enclosing them in single or double quotation  marks.

2) It embedded the expressions in the form of $ {expr}.

demo

         let strVariable: string = " ";

         console.log(strVariable);          //empty

demo2 :

        let empName: string = "Jason Daniel";

        let empDept: string = "D&A";


        //Before-ES6


        let output1: string = empName + " works in the " +

                              empDept + "department.";

         console.log(output1);


          // o/p Jason Daniel works in the D&A department.


demo3 :

        let empName: string = "Jason Daniel";

        let empDept: string = "D&A";


        //After-ES6


        let output2: string = '${empName} works in the ${empDept} //with back-ticks

       department.'

        console.log(output2);


Note:


a) The variable values are written as ${ }.

b) Instead of writing a string that is a combination of text and  variables with concatenations,

we can use a single statement  with back-ticks ' (symbol under tidle and not single quote)


Boolean

--------------

1) Boolean data type can have only two values. They are "true" and  "false."


demo

        let isDone: boolean = false;

         console.log(isDone);


Void

----------


1) A void is a return type of the functions which do not return  any type of value


demo

        function helloUser(): void{

            console.log("This is a void message");

        }

        console.log(helloUser());


o/p


     This is a void message

      undefined


Note:

a) An undefined data type denotes uninitialized variable, whereas  null represents a variable whose value is undefined.


     let unusable: void = undefined;


 


demo:


     let tempNum: void = undefined;  //no value is assigned

      console.log(tempNum);

      tempNum = null;

      console.log(tempNum);


Null


--------


1) Null represents a variable whose value is undefined.

      let num: number = null;  //null value is assigned

      let bool: boolean = null;

      let str: string = null;


Undefined

-------------


1) The Undefined primitive type denotes all uninitialized variables in TypeScript and JavaScript


Any Type

------------

1) It is the "super type" of all data type in TypeScript

2) It is used to represents any JavaScript value


     


      let val: any = 'Hi';

      val = 555;  //Ok

      val = true; //Ok


 


Demo


      function processData(x: any, y: any) {

          return x + y;

          }

          let result: any;

          result = processData("Hello ", "Any!"); //Hello Any!

          console.log( "with string as any" + result);

          result = processData(2,3);

           console.log("with number as any" + result );


User-Defined DataType

----------------------------


   1) Array

   2) Tuple

   3) Interface

   4) Class

   5) Enums

   6) Functions


Array

--------------


1) An array is a collection of elements of the same data type

2) An array can be written in two ways:


           a) var list : number[] = [1,3,5];

           b) var list : Array<number> = [1,3,5];


                              //generic array type


Demo


          var list : Array<number> = [1,3,5];


          console.log ("index of zero" + list[0]);


          console.log ("index of two" + list[2]);


 


Tuple

---------------


1) The Tuple is a data type which includes two sets of values of  different data types.


demo


var employee: [number, string] = [1, "steve"];

console.log("Employee number : " + employee[0]);


 


Inheritance

---------------

1) TypeScript classes can be extended to create new classes with  inheritance, using the keyword 'extends'. (Adv. class can inherite multiple classes,interfaces. Interface also inherit classes )


Demo


class Person {


  name: string;


    constructor(name: string) {


      this.name=name;


}


}


class Employee extends Person {


empCode: number;


  constructor(empCode: number, name: string) {


    super(name);


      this.emoCode = empCode;


    }


 


class Implement multiple Interface

------------------------------------------


Demo

interface IPerson {


name: string;


display(): void;


}


interface IEmployee {


   empCode: number;


}


class  Employee implements IPerson,IEmployee {


empode: number;


name: string;


constructor(empcode: number, name:string) {


    this.empCode = empCode;


    this.name = name;


}

display(): void {


 

TypeScript - abstract Class

----------------------------------


1) TypeScript allows us to define an abstract class using keyword   abstract.

2) Abstract classes are mainly for inheritance where other classes may derive from them.

3) We cannot create an instance of an abstract class.

4) An abstract class typically includes one or more abstract , methods or property declarations.

5) The class which extends the abstract class must define all the abstract methods.


Demo

abstract class APerson{

   name: string;

   constructor(name:string){

       this.name = name;

  }

display(): void{

        console.log(this.name);

}

abstract find(string): void;

find(name:string):void{

console.log("welcome :" +name);

}

}

let emp:Employee = new Employee("James", 100);

emp.find('Steve');

emp.display();


TypeScript - Data Modifiers or Access Modifiers

-----------------------------------


public - visible to all (no restriction)


private - visible to within the class(own)


protected - visible to own and derived classes


===============================================================================================


1) The concept of 'Encapsulation' is used to make class members    public or private

2) class can control the visibility of its data members.This is done using access modifiers.

3) There are three types of access modifiers in TypeScript:  public,private and protected.

public

----------

1) By default, all members of a class in TypeScript are public.

2) All the public members can be accessed anywhere without any restrictions.


emp.empCode = 123;


emp.empName = "Jason Daniel";


console.log("Employee code : " + emp.empCode);


console.log("Employee name : " + emp.empName);


private

--------------

demo


      class Employee{


         private empCode: number;


         empName: string;


           display():void{


                console.log("private empCode : " +this.empCode);


          }

          }

               let emp = new Employee();


                   //emp.empCode = 123; // compiler Error


               emp.empName = "HCL"; //OK


                 emp.display();


protected

------------


1) Te protected access modifier is similar to the private access  modifier, except that protected members can be accessed using their deriving classes.


Demo

export{}


class Employee{


public empName: string;


   protected empCode: number;


  constructor(name: string,code: number){


    this.empName = name;


    this.empCode = code;


}


}


class SalesEmployee extends Employee{


No comments:

Post a Comment