By 06/07/2015 16 Comments

Interface In TypeScript

An Interface:

  • An Interface defines the term “what a class must do”. It enforces to the class to complete the uncompleted behavior (functions) and attributes (properties).
  • An object of the interface cannot be created.
  • An interface defines the shape of our class or object.
  • An interface contains incomplete functions and uninitialized properties which means that functions and properties only have their declaration and types.
  • An interface can only be used through its implementation in a class. When an interface is implemented in a class that class must complete its incomplete functions.
  • An interface can be declare by using a keyword “interface”.
  • There are no any complete function can be declared in an interface.
  • One interface can be implemented by any number of classes and also one class can implements any number of interfaces at once separated by commas. Along with interfaces implementation a class is free to declare its own members (functions, properties etc.).
  • An interface can be inherited from other base/parent interfaces.
  • No any access modifier can be explicitly specified with an interface member.
  • Along with functions an interface has also properties/variables.
  • In TypeScript an interfaces cannot have constructors.
  • Static members cannot be declared in an interfaces.
  • A class which implements an interface must has same function name, return type and minimum matching parameters with the functions declared in an interface.
  • In TypeScript an interface is a compile-time language feature and TypeScript compiler does not generate any JavaScript from an interface.
  • TypeScript uses an interface for only type checking at compile-time.
  • In TypeScript the interfaces can be implemented into classes using an “implements” keyword.

Example – 1, An Interface Is Implemented Into 2 Classes:

/* An interface declaration which has different types of functions and properties declaration.*/
interface IMarksheet {
    studentName: string;
    tsMarks: number;
    aspMarks: number;
    htmlMarks: number;

    getName(): string;
    totalMarks(): number;
    obtMarks(): number;
    percentage(total: number, obtain: number): number

}

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

    // 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 markSheet1: 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 1: <br/>");
document.write("Student name: " + markSheet1.getName() + "<br/>");
document.write("TypeScript marks: " + markSheet1.tsMarks + "<br/>");
document.write("Asp marks: " + markSheet1.aspMarks + "<br/>");
document.write("Html marks: " + markSheet1.htmlMarks + "<br/>");
document.write("Total marks: " + markSheet1.totalMarks() + "<br/>");
document.write("Obtain marks: " + markSheet1.obtMarks() + "<br/>");
document.write("Percentage: " + markSheet1.percentage(markSheet1.totalMarks(), markSheet1.obtMarks()));

/* a 2nd class declaration which also implements an IMarksheet interface. This class is responsible to must implements all the functions and properties of that interface. */
class BcsMarkSheet implements IMarksheet {

/* properties declaration of different types. This class has a property oracleMarks which is its own property. */
    studentName: string;
    tsMarks: number;
    aspMarks: number;
    htmlMarks: number;
    oracleMarks: number;

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

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

    /* 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 + this.oracleMarks);
    }

    /* 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 bcsMarkSheet: BcsMarkSheet = new BcsMarkSheet("ABC", 85, 70, 80, 65);

/* Following statements call the different functions of above class through its 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("Oracle marks: " + bcsMarkSheet.oracleMarks + "<br/>");
document.write("Total marks: " + bcsMarkSheet.totalMarks() + "<br/>");
document.write("Obtain marks: " + bcsMarkSheet.obtMarks() + "<br/>");
document.write("Percentage: " + bcsMarkSheet.percentage(bcsMarkSheet.totalMarks(), bcsMarkSheet.obtMarks()));

Example – 2, Implement Multiple Interfaces In A Class:

/* An interface declaration which has different types of functions and properties declaration.*/
interface IMarksheet {

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

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

/* An another interface declaration which has a function declaration.*/
interface IMarksheetComponent {

    percentage(total: number, obtain: number): number;
}

/* a class declaration which implements two interfaces at once IMarksheet and IMarksheetComponent. This class is responsible to must implements all the functions and properties of these interfaces. */
class MarkSheet implements IMarksheet, IMarksheetComponent {

    // 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()));





Next Tutorial →


← 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 .