Skip to main content

TypeScript Classes & Interfaces

Objects:
real time objects
we are doing online shopping product list
method to add to card etc...add product, delete product, edit product -  this product works with rendering, storing date etc.

each piece is object having certain functionality

Objects are instances of the classes.
Classes:
Classes are blueprint to the objects.
Classes holds the objects and methods they have.

//First class
class Department {
    namestring;

    constructor(nstring){
        this.name = n;
    }
}
const accountName = new Department("Accounts"); // here Department is the blueprint to the object
console.log(accountName);

Constructor Functions and this key word

class Department {
    namestring;

    constructor(nstring){
        this.name = n;
    }
    describe(thisDepartment){
        console.log("This info is belongs to "this.name);
    }
}
const accountName = new Department("Accounts");
accountName.describe();

string array

public properties can accessible any where
private property can accessible only with in the method or class.

class Depo {
    public namestring;
    private employeesstring [] = [];

    constructor(nstring){
        this.name = n;
    }
    addEmployee(employeestring){
        this.employees.push(employee);
    }
    printEmployeeInfo(){
        console.log(this.employees.length);
        console.log(this.employees);
    }
}
const busStn1 = new Depo("Account");
busStn1.addEmployee("Saga");
busStn1.addEmployee("Koti");
busStn1.printEmployeeInfo();

readonly

public readonly id;

if we try accessing the ID variable, we will get compilation error.

Prototype

Inheritance

The class that inherit the properties of the base class
Super is the method we have to use it in the constructor of the In inheritance class.
Super method always refers to the base class constructor and its parameters.

class Depo {
    
    public namestring;
    private employeesstring [] = [];

    constructor(private idstring,public nstring){
        this.name = n;
    }
    describe(){
        console.log(`Department (${this.id}): (${this.name})`)
    }
    addEmployee(employeestring){
        this.employees.push(employee);
    }
    printEmployeeInfo(){
        console.log(this.employees.length);
        console.log(this.employees);
    }
}
class ITDepartment extends Depo{
    adminsArrstring[];
    constructor(idstringadminsstring[]){
        super(id"IT");
        this.adminsArr = admins;
    }
    printAdmins(){
        console.log(this.adminsArr);
    }
}
const busStn1 = new ITDepartment("1",["Saga"]);
busStn1.addEmployee("Saga");
busStn1.addEmployee("Teja");
busStn1.printEmployeeInfo();
busStn1.describe();
busStn1.printAdmins();


Overriding the properties

protected employee : string;
protected key word variable can be used with in the class and inherited class with respective to the base class.
and out side any other class, it won't be available.

Getter and Setter:

class Depo {
    public namestring;
    private employeesstring [] = [];

    constructor(private idstring,public nstring){
        this.name = n;
    }
    describe(){
        console.log(`Department ${this.id}${this.name}`)
    }
    addEmployee(employeestring){
        this.employees.push(employee);
    }
    printEmployeeInfo(){
        console.log(this.employees.length);
        console.log(this.employees);
    }
    
}
class ITDepartment extends Depo{    
    protected adminsArrstring[];
    private ourReports : string;
    get mostRecentReport(){
        if(this.ourReports){
            return this.ourReports
        }
        else{
            throw new Error("No report found");
        }
    }
    set mostRecentReport(valuestring){

        if(!value){
            throw new Error("Please pass a value");
        }
        this.addReport(value);
    }
    constructor(idstringadminsstring[], ourReportsstring){
        super(id"Saga");        
        this.adminsArr = admins;
        this.ourReports = ourReports;
    }
    printAdmins(){
        console.log(this.adminsArr);
    }
    addReport(textstring){
        this.ourReports = text;
    }
}
class SalesDepartment extends Depo{
    
}
const output1 = new ITDepartment("1",["Saga"],"teja_report");
// busStn1.addEmployee("Saga");
// busStn1.addEmployee("Teja");
// busStn1.printEmployeeInfo();
// output1.describe();
// output1.printAdmins();
output1.mostRecentReport = "Lokesh";
console.log(output1.mostRecentReport);


Interfaces

An interface describes the structure of an object.
interface Person{
    namestring;
    agenumber;
    greet(pharse:string):void
}
let userPerson;
user = {
    "name": "Saga",
    "age": 28,
    greet(pharsestring){
        console.log("Hello, Greet you "+pharse);
    }
}

user.greet("Saga Koti");

example 2:

interface Person1{
    name1string;
    //age: number;
    greet1(pharse:string):void
}
class UserClass implements Person1{
    name1string;
    age1 = 30;
    constructor(nstring){
        this.name1 = n;
        console.log(this.name1);
    }
    greet1(pharsestring){
        console.log("phrase:"+pharse+" , name:"+this.name1);
    }
}
let myuser = new UserClass("Saga");
myuser.greet1("Hey!! how are you?");

readonly

In interfaces, we can't use private or static so we will use more often readonly before the key words

Extending Interfaces

interface Named{
    namestring;
}
interface Greeted extends Named{
    greetMe(pharsestring):void
}

class MyUsers implements Greeted{
    namestring;
    age30;
    constructor(nstring){
        this.name = n;   
    }
    greetMe(pharsestring){
        console.log("Helo "+this.name+"!! "+pharse);
    }
}
let myuserIs = new MyUsers("Saga");
myuserIs.greetMe("How are you today!!");

Otherway to implement interface

interface AddFn{
    (xnumberynumber): number
}

let additionAddFn;
addition = (n1numbern2number=> {
    return n1+n2;
}
console.log(addition(3,5));

Optional Parameters & Property:

interface OptionalCheck {
    readonly internalName?:string;
    outputName?: string
}
class Puple implements OptionalCheck{
    internalName?: string;
    age = 30;
    constructor(nstring){
        if(n!=""){
            this.internalName = n;
        }
    }
    greetMeToday(phrasestring){
        if(this.internalName){
            console.log(this.internalName)
        }
        else{
            console.log("Hi "+phrase);
        }
    }
}

let gtMe = new Puple("Saga");
gtMe.greetMeToday("Bala");







Comments

Popular posts from this blog

Powerapps overcome 2000 item limit from any datasource

First go through delegation concept https://tejasadventure.blogspot.com/2020/05/power-apps-understanding.html In powerapps, we observe by default 500 item limit has set with in the app level for any data source. In order to overcome, we have option to set the limit of 2000 item limit maximum in the app. Now using code, MaximoFacility is my data source name contains 3000 items. ColFacilityDropdown is the collection storing the count of items from data source. We expect to see more than 2000 items. Based on StartWith function filtering the data with respective to the charectors and numbers as mentioned below. Code: Place the below code in a button on select property. Add label with code CountRows(ColFacilityDropdown) ClearCollect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "A" ))); Collect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "B" ))); Collect(ColFacilit...

Power Apps Understanding

https://tejasadventure.blogspot.com/2019/10/power-apps-we-have-1.html https://tejasadventure.blogspot.com/2019/11/power-apps-how-to-configure-using-blank.html   https://tejasadventure.blogspot.com/2019/11/power-apps-field-controls.html Report We can use people picker fields, look up fields  file attachment back next save cancel download the report and this report can be used in other system of powerapp. Add new report button - asks add from existing report Report all item view can design in the way like sharepoint list views for example. we can group it Group AND or Group OR by apply filters Canvas apps: Arrange user experience and interface design allow creativity and business use case guide how the way app wants to look like. Sources can be around 200+ ways. Majorly SharePOint, Power BI From data, From Sample From CDS From blank canvas via appSource Model driven apps: Model driven apps uses power of CDS rapidly to configure your for...

PowerApps multiselect cascading dropdown and save an item to SharePoint List

 I have one scenario as below List 1: Division List has title field List 2: District List has Title and Division Field(LookUp from Division List) List 3: Facility List has Title, District Field(LookUp field from District List) List 4: County List has Title, Facility Field(LookUp field from Facility List) Main List: Spill Report is the main list  Division Field( Look up from Division List) District Field(Look up field from District List) Facility Field(Look up field from Facility List) County Field(Look up field from County List) List Screenshots provided below can be refered for clarification. ----------------------------------------------------------------------------------------------------- PowerApps Canvas Apps In Power Apps Canvas App, We need to first design the app with the 4 respective fields Since those fields are multiselect, then it is to combo box. Generally power apps are not supported for multiselect cascasding dropdown. Refere microsoft documentation, Know Limit...