Saturday, February 22, 2020

typescript


To look for tsc command options use the below the url
https://www.typescriptlang.org/docs/handbook/compiler-options.html


To declare a variable in typescript we use the keyword "let"

Data types available in Type script


number
string
boolean (default value is undefined in Typescript)
unionTypes (to hold multiple datatypes but it is restricted to use those only)
any (We can have any datatype for the variable)

Boolean (default value is undefined in Typescript)
Date
String



Eg:

let unionTypes : string | number;
unionTypes = 'pavan';
unionTypes = 10;

let employee : any;
employee = 10;
employee = "kumar";

employee = {id :10, name: "pavan", age:10};

Typescript is case sensitive. To log we can use

console.log("Sample")


Variable declaration

let <<variablename>>: <<datatype> = <<value>>

Eg :
let fname: string = 'pavan'; 

To compile(i.e. Transpilation ) the typescript file to javascript we can use below command
tsc <<typescriptfilename>>

To run the javascript file using node use below command
node <<javascriptfilename>>


Generic Array can be used

let departments : Array<string> = new Array<string>();

departments.push("IT");
departments.push("Marketing");

***********************************************
Both will be same
let employeenames : string[] = [];
employeenames.push("Pavan");
employeenames.push("anusha");

let studentnames : Array<string> = new Array<string>();
studentnames.push("kumar");
studentnames.push("venkata");

using typescript using new Array() is fine but in JavaScript don't use it.

https://www.w3schools.com/js/js_arrays.asp

If you want know about map reduce in JavaScript
https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d


***********************************************

Loop

 a. foreach
 b. for of
 c. for in : This gives index

departments.forEach(function (dept){
  console.log(dept);
});

for(let dept of departments){
    console.log(dept);
};

for(let dept in departments){
    console.log(dept);
};

Arrow or Lamda Expression

departments.forEach((dept) => {
  console.log(dept);
});

Class 
  Make sure class name is Pascal (i.e Employee, Student,EmployeeInfo)
  variable at class level will not be having let keyword
  constructor overloading is not allowed in typescript

Access modifiers 
  private
  public  - this is the default when not specified
  protected

We have get and set for private variables/members/properties of the class to be accessed but the name of the method needs to be different and those are treated as properties rather than a method.
To verify it we can use typeof as
console.log(typeof emp.getempid )

Note : If you treat getter and setter as methods then we will get below error
"This expression is not callable. Type 'Number' has no call signatures"
"This expression is not callable. Type 'string' has no call signatures"

readonly is used to make sure the value once assigned is not changed

class Employee {
     id : number;
     name: string;
    address:string;
}


class Employee {
    private id : number;
    name: string;
    address:string;
readonly department = 'IT';

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

    get getempid(){
        return this.id;
    }

    set setempid(id:number){
        this.id= id;
    }
}

let emp = new Employee('Pavan','Carsoncity');
emp.setempid= 10;

console.log(emp.getempid);


Ignore this error message when you compile the code

error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.


Function creation in Typescript class 

functionname() : <<returntype>>{
}

Eg :
addEmployee(name:String, age:number): void{
    this.name = name ; 
    this.age = age;
}

Interface
Below is the example for interface

Interface and Class in single file
interface IStudent{
addStudent();
}

class Student implements IStudent{
addStudent(){
}
}


Interface and class in different files

Iemployee.interface.ts
export interface IEmployee{
addEmployee();
editEmployee();
}

employeeservice.ts
import { IEmployee } from './Iemployee.interface';

export class EmployeeService implements IEmployee {
addEmployee(){
return 1;
}

getEmployee(){
return "1";
}

editEmployee(){
}
}

Module in Typescript

Similar to package in java we have in typescript

export class <<className>>{
}

import {} from '<<relativepath>>'


Typescript configuration : 

    tsc -init

Above command will generate a file "tsconfig.json" with configuration which will be used during build .

To build the typescript files 

tsc -p .\tsconfig.json

To get the map between the Js and typescript  then make sourceMap as true in tsconfig.json

Type definition in typescript
https://github.com/DefinitelyTyped/DefinitelyTyped

No comments:

Post a Comment