By 06/07/2015 7 Comments

Super keyword With Constructor In TypeScript

Definition Of Super Keyword With Constructor:

  • In TypeScript a constructor can be defined in both base and its derived classes.
  • If a constructor is defined only in derived class, TypeScript compiler will generate a compile-time error until we use a “super ()” keyword in it.
  • In most cases a base class defines a constructor or both base and derived classes can define its own constructors.
  • In TypeScript, if both derived and base classes define their own constructors then a base class constructor is must be called through a “super ()” keyword reference inside a derived class constructor. That process is called constructor overloading or a derived class constructor overloads the constructor of a base class. If “super ()” is not specified in a derived class constructor a compile-time error will be generated.
  • In a derived class, the overridden/hidden functions of a base class can be accessed/called through a “super” keyword reference because along with a base class constructor the base class functions can also be accessed/refer through “super” keyword.
  • In most cases, to access the base class functions, the “super” keyword is specified inside those functions which have same name as base class’s functions has in a derived class.
  • Remember a base class constructor constructs its base class portion/object and a derived class constructor constructs its derived class portion/object.

Example:

// a class declaration. This is a base class.
class MarkSheet {

    // properties declaration of different types.
    studentName: string;
    tsMarks: number;
    aspMarks: number;

/* Parametrized constructor declaration. It constructs the base class mark sheet object. 3 parameters are passed in this constructor.*/
    constructor(studentName: string, tsMarks: number, aspMarks: number) {
        this.studentName = studentName;
        this.tsMarks = tsMarks;
        this.aspMarks = aspMarks;
    }

    /* function declaration which returns student name. It has string as its return type, empty parameter-list and public access by default. */
    getName(): string {
        return (this.studentName);
    }

    /* function declaration which returns total marks. It has number as its return type, empty parameter-list and public access by default. This function is re-implemented by a derived class. */
    totalMarks(): number {
        return 200;
    }

    /* function declaration which returns obtain marks. It has number as its return type, empty parameter-list and public access by default. This function is re-implemented by a derived class.*/
    obtMarks(): number {
        return (this.tsMarks + this.aspMarks);
    }

    /* function declaration which returns percentage. It has number as its return type, 2 number type parameters and public access by default. */
    percentage(total: number, obtain: number): number {
        return obtain / total * 100.0;

    }
}

/* Following is another class BcsMarksheet declaration, notice its syntax here it is inheriting a MarkSheet class means BcsMarksheet class is a derived or child class of MarkSheet and MarkSheet class is a base or parent class of BcsMarkSheet, so all the public members of base MarkSheet class is now exists in derived BcsMarksheet class and can be access through BcsMarksheet object reference. */
class BcsMarksheet extends MarkSheet {

    // 2 properties are declared in this derived class.
    htmlMarks: number;
    javaMarks: number;

/* Parametrized constructor declaration. It constructs the derived class mark sheet object. 5 parameters are passed in this constructor.*/
    constructor(studentName: string, tsMarks: number, aspMarks: number, htmlMarks: number, javaMarks: number) {

        this.htmlMarks = htmlMarks;
        this.javaMarks = javaMarks;

/* Notice: super () keyword calls a base class constructor. Here the super () keyword is initializing/constructs the portion of a base class/object through this derived class constructor. 3 arguments are passed in super (), these 3 arguments will be received to base class constructor in order to construct a base class. */
        super(studentName, tsMarks, aspMarks);
    }

    /* following functions is re-implemented in this class. This process is called function overriding. Notice: here a “super” keyword is being used which is calling its base class function via a dot (.) sign and also add it with html and java marks. */
    obtMarks(): number {
        return (super.obtMarks() + this.htmlMarks + this.javaMarks);
    }

    /* following functions is re-implemented in this class. This process is called function overriding. Notice: here a “super” keyword is being used which is calling its base class function via a dot (.) sign and also add it with 200 value. */
    totalMarks(): number {
        return super.totalMarks() + 200;
    }
}

/* object creation of Bcs mark sheet. This object is being created through a parametrized constructor. Different types of mark sheet information such as (subject marks, student name etc.) are passed in this constructor as arguments. */
var bcsMarksheet: BcsMarksheet = new BcsMarksheet("Abc", 85, 70, 65, 55);

/* Following statements call the different functions of above class through its derived class reference (reference variable) and also print them. */
document.write("Bcs Mark sheet: <br/>");

document.write("Student name: " + bcsMarksheet.getName() + "<br/>");
document.write("TypeScript marks: " + bcsMarksheet.tsMarks + "<br/>");
document.write("Asp marks: " + bcsMarksheet.aspMarks + "<br/>");
document.write("Html marks: " + bcsMarksheet.htmlMarks + "<br/>");
document.write("Java marks: " + bcsMarksheet.javaMarks + "<br/>");

document.write("Total marks: " + bcsMarksheet.totalMarks() + "<br/>");
document.write("Obtain marks: " + bcsMarksheet.obtMarks() + "<br/>");
document.write("Percentage: " + bcsMarksheet.percentage(bcsMarksheet.totalMarks(), bcsMarksheet.obtMarks()));






Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .