Sorting Date column of a Table

Sorting a Date column can be tricky at times. This is done by calculating the difference between the dates.

NOTE: You will get an error: The left-hand side of an arithmetic operation must be of type ‘any’, ‘number’, ‘bigint’ or an enum type when you do not add valueOf()

When by date is of Date type

new Date(objDate1).valueOf() - new Date(objDate2).valueOf()

When date is in dd/MM/yyyy format

new Date(objDate1.split('/')[2],objDate1.split('/')[1],objDate1.split('/')[0],0,0,0,0).valueOf() 
- 
new Date(objDate2.split('/')[2],objDate2.split('/')[1],objDate2.split('/')[0],0,0,0,0).valueOf()

Sorting statement for a column of a table

sorter: (a, b) => { return new Date(a.objDate1.split('/')[2],a.objDate1.split('/')[1],a.objDate1.split('/')[0],0,0,0,0).valueOf() - new Date(b.objDate1.split('/')[2],b.objDate1.split('/')[1],b.objDate1.split('/')[0],0,0,0,0).valueOf();},
sortDirections: ['ascend', 'descend',]

Error TS1110: Type expected

Error:

node_modules/rc-mentions/lib/util.d.ts(4,55): error TS1110: Type expected.

I encountered this error when I was creating a web part in SharePoint Framework using ReactJS.

Solution:

Install the latest version of Typescript or update rush-stack-compiler

npm install typescript@latest
npm install @microsoft/rush-stack-compiler-3.3 --save

or you can use

npm update

Verify that the folder named rush-stack-compiler-3.3 inside node_modules/@microsoft folder.

Now remove dependencies from package.json file for older version and include for the new one.
Change tsconfig.json file in extends field for the new path.

Property ‘entries’ does not exist on type ‘ObjectConstructor’

When we try to read the entries of an object using Object.entries(), it gives the error: Property ‘entries’ does not exist on type ‘ObjectConstructor’.

To resolve this follow below:

• Open config.js file.
• Add following code. There might already be lib section, then add only es2017 under it.

"lib": [
    "es2017"
]

Convert string into number in TypeScript

var str=”10″;

var str = "10";
var num = Number(str);

Modules in TypeScript

• A module is designed to organize the code written in TypeScript.
• There are two types of modules
  • Internal Modules
  • External Modules

Internal Modules

• They are used to group classes, interfaces and functions in one group and can be exported to another module.
• There functionality is pretty much similar to namespaces.
• Internal Modules are still used in some code, but we prefer using namespaces now.
• Syntax

        module ModuleName{
            export class className{
               // statements
            }
        }
 

External Modules

• The are used to specify and load dependencies in multiple .js files.
• External modules are not used when there is only one .js file.
• Traditionally we use <script> tags to load .js file in a particular order, but these tags are not available every time, like in NodeJS.
• There are two ways of loading dependent .js files from a single .js file
  • Client Side – RequireJS
  • Server Side – NodeJS
• The syntax for declaring an external module is using keyword export and import.

Module Loader

• To load JavaScript files externally, we need a module loader.
• Module Loader is another .js library.
• Most common module loader we use is RequireJS. This is an implementation of AMD (Asynchronous Module Definition) specification.
• Instead of loading files one after the other, AMD can load them all separately, even when they are dependent on each other.

Namespaces in TypeScript

• Namespace is used to group logically related code.
• When we have multiple files with globally declared variables, there may be a possibility of overwriting or misusing these variables.
• We use namespaces to solve this issue.
• Namespace definition begins with namespace keyword followed by the namespace name.
• Syntax: namespace namespaceName{ //code for namespace }
• We define classes and interfaces within a namespace.
• If we want to access these classes and interfaces from outside of namespace, they should be exported using export keyword.
• To access the class or interface from another namespace, we use this syntax: namespaceName.className;

Below is the example
We have created two files: Namespace1.ts and Namespace2.ts

Namespace1.ts

namespace namespace1{
    export class Car{
        model:string;
        color:string;
        constructor(m:string, c:string){
            this.model = m;
            this.color = c;
        }
        carDetails():void{
            console.log(this.model + " is available in " + this.color + " color.")
        }
    }
    var myCar = new Car("Swift","Silver");
    myCar.carDetails();
}

Namespace2.ts

/// <reference path = "Namespace1.ts" />
namespace namespace2{
    console.log("\nIn Namespace2.ts file");
    var maruti = new namespace1.Car("Brezza","White");
    maruti.carDetails();
}

Now open Node.js Command Prompt and type the following two commands

tsc --out myjsfile.js Namespace2.ts
node myjsfile.js

Below is the output in Node.js Command Prompt

Access Modifiers in TypeScript

• We can control the access and visibility of data members of a class to the data members of other class using Access Modifiers.
• Hence, we can restrict the usage of data members of a class outside of its scope.
• This phenomena is known as Data Hiding or Encapsulation.
• This concept is used with Inheritance in Classes.

Access Modifier	Description
public	We can access these data members from anywhere within our program. By default, all the data members are public.
private	We can access these data members only from within the scope of the class. If we try to use them from outside, it will throw an error.
protected	These data members can be used from within the scope of the class in which it is defined, and also from its child classes.

Below is an example to illustrate the access modifiers

class ParentClass { 
    pubStr:string;
    private prvStr:string;
    protected protStr:string;
 } 
  
 class ChildClass extends ParentClass { 

    display():void { 
       console.log("\nDisplay method in Child Class!");
       //this.prvStr = "Private Data Member";
       this.protStr = "Protected Data Member in Child Class";
       console.log(this.pubStr);
       console.log(this.protStr);
    } 
}
var childObject = new ChildClass();
childObject.pubStr = "Public Data Member in Child Class";
//childObject.protStr = "Protected data Member";
//childObject.prvStr = "Protected data Member"; 
childObject.display();

Below is the output of above code

Below are the errors if we try to access private and protected data members outside of their scope. I have put comments in the above code. I will be removing these comments and will show you the error message in a screenshot.

Let’s see the error messages after removing the comments of the private access modifiers.


We cannot access private data members from anywhere outside of that class.

Let’s see the error messages after removing the comments of the protected access modifiers.

We can access the protected data members from within the child class only.

instanceof Operator in TypeScript

• instanceof operator returns a boolean value.
• It returns true if the specified object belongs to the specified Class.

Below is an example

class Car { 
    model:string;  
    carDetails():void{
        console.log("car is alloted!");
    }
}
class Bike{color:string}
var myCar = new Car();
console.log(myCar instanceof Car);
console.log(myCar instanceof Bike);

Below is the output of above code

static Keyword in TypeScript

• static keyword is applied to the fields or methods of a Class.
• static field retains its value till the program finishes execution.
• There is no need to create an object to access the data members (fields or methods) of a class. They can be directly accessed by the name of the class. For example, ClassName.DataMember;

Below is an example related to static keyword and how we can use it.

  class Car { 
    static dealer:string;
    model:string;
    static allocationDetails():void{
        console.log("Car is alloted!");
    }     
    carDetails():void{
        console.log(this.model + " is available with " + Car.dealer);
    }
 }
 var myCar = new Car();
 myCar.model = "Hyundai Creta";
 Car.dealer = "ABC Sales";
 myCar.carDetails();
 Car.allocationDetails();

Below is the output of above code

Method Overriding in TypeScript

• Method Overriding is a concept of Inheritance in Classes where a child class can override a function of a parent class. In this, child class may or may not use the logic of a function defined in parent class.
• We use super keyword to refer to the functions or fields of the immediate parent class.

Below is an example of method overriding USING super. If we use super, the same method of parent class is executed.

class ParentClass { 
    display():void {
       console.log("Display method from Parent Class!") 
    } 
 } 
 
 class ChildClass extends ParentClass { 
    display():void { 
       super.display() 
       console.log("dislay method from Child Class!")
    } 
    hello():void{
        console.log("Hello from Child Class!");
    }
 } 
 
 var parentObj = new ParentClass();
 parentObj.display();
 var childObj = new ChildClass();
 childObj.display();
 childObj.hello();

Below is the output of above code

Below is an example WITHOUT using super. If we skip super, then that method of parent class is not executed. Only the method of child class is executed.

class ParentClass { 
    display():void {
       console.log("Display method from Parent Class!") 
    } 
 } 
 
 class ChildClass extends ParentClass { 
    display():void { 
       //super.display() 
       console.log("dislay method from Child Class!")
    } 
    hello():void{
        console.log("Hello from Child Class!");
    }
 } 
 
 var parentObj = new ParentClass();
 parentObj.display();
 var childObj = new ChildClass();
 childObj.display();
 childObj.hello();

Below is the output of above code