By 06/07/2015 14 Comments

Interface Inheritance In TypeScript

Definition Of Interface Inheritance:

  • Like TypeScript classes an interface can be inherited into other interfaces.
  • In TypeScript, inheritance can be implemented by inherit one interface into other interfaces, the interface which is being inherited is called base interface and the interface which is inheriting is called a derived interface.
  • When a base interface is being inherited into its derived interface, all members (functions and properties) of base interface automatically exist into its derived interface.
  • Interfaces support multiple inheritance which means more than one/multiple base interfaces can be inherited into a derived interface through separated by comma (,) at a time.
  • Same base interface can also be inherited to the several numbers of derived interfaces.


/* 1st base interface declaration which has different types of properties declaration.*/
interface IMarksheetData {

    studentName: string;
    tsMarks: number;
    aspMarks: number;
    htmlMarks: number;

// 2nd base interface declaration which contains a function declaration.
interface IMarksheetOperation {
    percentage(total: number, obtain: number): number;

/* 3rd derived interface declaration which is derived from two multiple interfaces at a time. These interfaces are inheriting through separated by comma (,). This is called multiple inheritance. Now this derived interface has all members of these multiple interfaces. */
interface IMarksheetComponents extends IMarksheetOperation, IMarksheetData {

    getName(): string;
    totalMarks(): number;
    obtMarks(): number;


/* a class declaration which implements an interface IMarksheetComponents. This class is responsible to must implements all the functions and properties of this interface. */
class MarkSheet implements IMarksheetComponents{

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

    // parameterized constructor which creates a marksheet object.
    constructor(studentName: string, tsMarks: number, aspMarks: number, htmlMarks: number) {
        this.studentName = studentName;
        this.tsMarks = tsMarks;
        this.aspMarks = aspMarks;
        this.htmlMarks = htmlMarks;

    /* 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. */
    totalMarks(): number {
        return 300;

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

    /* 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;


/* object creation of mark sheet 1, provide different kinds of information as arguments to its constructor. */
var markSheet: MarkSheet = new MarkSheet("ABC", 85, 70, 80);

/* Following statements call the different functions of above class through its class reference (reference variable) and also print them. */
document.write("Marksheet: <br/>");
document.write("Student name: " + markSheet.getName() + "<br/>");
document.write("TypeScript marks: " + markSheet.tsMarks + "<br/>");
document.write("Asp marks: " + markSheet.aspMarks + "<br/>");
document.write("Html marks: " + markSheet.htmlMarks + "<br/>");
document.write("Total marks: " + markSheet.totalMarks() + "<br/>");
document.write("Obtain marks: " + markSheet.obtMarks() + "<br/>");
document.write("Percentage: " + markSheet.percentage(markSheet.totalMarks(), markSheet.obtMarks()));


← Previous Tutorial

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 .