{"id":3753,"date":"2020-05-18T14:18:34","date_gmt":"2020-05-18T14:18:34","guid":{"rendered":"http:\/\/codethataint.com\/blog\/?p=3753"},"modified":"2020-05-22T12:03:23","modified_gmt":"2020-05-22T12:03:23","slug":"interfaces","status":"publish","type":"post","link":"https:\/\/codethataint.com\/blog\/interfaces\/","title":{"rendered":"Interfaces"},"content":{"rendered":"
    \n
  1. Using Interface we can have blue print of list of things which needs to be implemented<\/li>\n<\/ol>\n
    \r\ninterface calculateInterest {\r\n    accountType: String,\r\n    interest: number,\r\n    depAmt?: number,\r\n    calculateInt(depositAmt: number) : number;\r\n} \r\n\r\nvar IntForSavings: calculateInterest = {\r\n    accountType: "Savings",\r\n    interest: 12,     \r\n    depAmt : 0,\r\n    calculateInt: function (depositAmt:number) {\r\n        this.depAmt = depositAmt;\r\n        return depositAmt * this.interest;\r\n    }    \r\n};\r\n\r\nvar IntForCurrent: calculateInterest = {\r\n    accountType: "Current",\r\n    interest: 5,           \r\n    depAmt: 0,\r\n    calculateInt: function (depositAmt: number) {\r\n        this.depAmt = depositAmt;\r\n        return depositAmt * this.interest;\r\n    }\r\n};\r\n\r\nvar IntForLoans: calculateInterest = {\r\n    accountType: "Loan Account",\r\n    interest: 8,\r\n    depAmt: 0,\r\n    calculateInt: function (depositAmt: number) {\r\n        this.depAmt = depositAmt;\r\n        return depositAmt * this.interest;\r\n    }\r\n};\r\n\r\nconsole.log(IntForSavings.accountType + ' yields ' + IntForSavings.calculateInt(12000) + ' for cash amount of ' + IntForSavings.depAmt);\r\nconsole.log(IntForCurrent.accountType + ' yields ' + IntForCurrent.calculateInt(6000) + ' for cash amount of ' + IntForCurrent.depAmt);\r\nconsole.log(IntForLoans.accountType + ' yields ' + IntForLoans.calculateInt(3000) + ' for cash amount of ' + IntForLoans.depAmt);\r\n<\/pre>\n
    Output<\/strong><\/p>\n
    \r\nSavings yields 144000 for cash amount of 12000\r\nCurrent yields 30000 for cash amount of 6000\r\nLoan Account yields 24000 for cash amount of 3000\r\n<\/pre>\n
    Classes extending Interface<\/strong>
    \nAccounts.ts<\/strong><\/p>\n
    \r\ninterface Accounts {\r\n    accountType?: string;\r\n    calculateInterest(accountType: string): number;\r\n}\r\n\r\nclass SavingsAcc implements Accounts {\r\n   \r\n    minimumBalance: number = 10000;\r\n    accountType: string = 'Savings';    \r\n\r\n    calculateInterest(accountType: string): number{\r\n        return 5;\r\n    }\r\n}\r\n\r\nclass CurrentAcc implements Accounts {\r\n    minimumBalance: number;\r\n    accountType: string = 'Current';\r\n    calculateInterest(accountType: string): number {\r\n        return 5;\r\n    }\r\n}\r\n\r\nclass LoanAcc implements Accounts {\r\n    accountType: string = 'Loan';\r\n    calculateInterest(accountType: string): number {\r\n        return 12;\r\n    }\r\n}\r\n\r\nclass Customer {\r\n    private _accountType: Accounts;          \r\n\r\n    constructor(customerId: number, AccountType : Accounts) {\r\n        this._accountType = AccountType;\r\n    }\r\n\r\n    public get accountType(): Accounts {\r\n        return this._accountType;\r\n    }\r\n    public set accountType(value: Accounts) {\r\n        this._accountType = value;\r\n    }\r\n}\r\n\r\nwindow.onload = function () {\r\n    var objCustomer: Customer = new Customer(1001, new LoanAcc());    \r\n    console.log(objCustomer.accountType.accountType + ' Account with interest rate of ' + objCustomer.accountType.calculateInterest('Loan'));\r\n\r\n\r\n    var objCustomer: Customer = new Customer(1001, new SavingsAcc());\r\n    console.log(objCustomer.accountType.accountType + ' Account with interest rate of ' + objCustomer.accountType.calculateInterest('Savings'));\r\n}\r\n<\/pre>\n
    Output<\/strong><\/p>\n
    \r\nLoan Account with interest of 12\r\nSavings Account with interest of 5\r\n<\/pre>\n
    Accessing property of class extending Interface<\/strong>
    \nWe have the same code of Accounts.ts with slight modification on window.load. We try to access a property specific to class implementing interface.
    \nIn the below code minimumBalance is a property specific to savingsAccount which implements Accounts. In such case we need to do type case from generic interface object to specific class object
    \nso the property specific to class is available.<\/p>\n
    \r\nwindow.onload = function () {\r\n    var objCustomer: Customer = new Customer(1001, new SavingsAcc());\r\n    var objSavingAcc: SavingsAcc = <SavingsAcc>objCustomer.accountType;\r\n    console.log(objCustomer.accountType.accountType + ' Account with interest rate of ' + objCustomer.accountType.calculateInterest('Savings') + ' with minimum balance of ' + objSavingAcc.minimumBalance);\r\n}\r\n<\/pre>\n
    Output<\/strong><\/p>\n
    \r\nSavings Account with interest rate of 5 with minimum balance of 10000\r\n<\/pre>\n
     Using Interface to write clean code <\/strong>
    \nOne of the advantage of interface is while passing multiple arguments to constructor we can avoid the misplacement of the argument passed
    \nlike the one in code below. This is similar to ENUM in Java. The the Account class constructor we can change the arguments to interface as follows<\/p>\n
    Interfaces.ts<\/strong><\/p>\n
    \r\ninterface IPerson {\r\n    name: string;\r\n    age: number;\r\n    location: string;\r\n}\r\n\r\ninterface IEmployee extends IPerson{\r\n    empId: number;\r\n}\r\n\r\ninterface ICustomer extends IPerson {\r\n    custId: number;\r\n    accType: string;\r\n}\r\n<\/pre>\n
    Account.ts<\/strong><\/p>\n
    \r\nclass Account {\r\n    private _name: string;\r\n    private _age: number;\r\n    private _location: string;    \r\n    private _custId: number;   \r\n    private _accType: string;   \r\n\r\n    constructor(name: string, age: number, location: string, custId: number, accType: string) {    \r\n        this._name = name;\r\n        this._age = age;\r\n        this._location = location;\r\n        this._custId = custId;\r\n        this._accType = accType;\r\n    }\r\n}\r\n<\/pre>\n
    Refactored Account class with constructor arguments changed to inteface<\/p>\n
    Account.ts<\/strong><\/p>\n
    \r\nclass Account {\r\n    private _name: string;\r\n    private _age: number;\r\n    private _location: string;    \r\n    private _custId: number;   \r\n    private _accType: string;   \r\n\r\n    constructor(iPerson: ICustomer) {\r\n        this._name = iPerson.name;\r\n        this._age = iPerson.age;\r\n        this._location = iPerson.location;\r\n        this._custId = iPerson.custId;\r\n        this._accType = iPerson.accType;\r\n    }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
    Using Interface we can have blue print of list of things which needs to be implemented interface calculateInterest { accountType: String, interest: number, depAmt?: number, calculateInt(depositAmt: number) : number; } var IntForSavings: calculateInterest = { accountType: "Savings", interest: 12, depAmt : 0, calculateInt: function (depositAmt:number) { this.depAmt = depositAmt; return depositAmt * this.interest; } };… Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[306],"tags":[],"class_list":["post-3753","post","type-post","status-publish","format-standard","hentry","category-interfaces"],"_links":{"self":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/comments?post=3753"}],"version-history":[{"count":5,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3753\/revisions"}],"predecessor-version":[{"id":3768,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3753\/revisions\/3768"}],"wp:attachment":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/media?parent=3753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/categories?post=3753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/tags?post=3753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}