Free Online Tutorials

An interface is a syntactical contract that an entity should conform to. In other words, an interface defines the syntax that any entity must adhere to.

Interfaces define properties, methods, and events, which are the members of the interface. Interfaces contain only the declaration of the members. It is the responsibility of the deriving class to define the members. It often helps in providing a standard structure that the deriving classes would follow.

Declaring Interface

Syntax

interface interface_name { 
}

Optional Properties

interface People {
  name: string
  age?: number
}

Readonly properties

interface Point {
  readonly x: number
  readonly y: number
}

Function Types

interface runCommand{
    name:string,
    run:(file:string)=>string
}

Class Types

interface ClockInterface {
  currentTime: Date
}

interface ClockConstructor {
  new (hour: number, minute: number): ClockInterface
}

Interface and Object
Example 1:

interface Igrab{
    type:string,
    getTitle:(link:string)=>string,
    getContent:(link:string)=>string
}

var grabCNN:Igrab = {
    type: "CNN",
    getTitle: (link:string)=>{
        return "Title of "+link
    },
    getContent: (link:string)=>{
        return "Content of "+link
    }
}

console.log(grabCNN.type)
console.log(grabCNN.getTitle("https://edition.cnn.com/somelink.html"))
console.log(grabCNN.getContent("https://edition.cnn.com/somelink.html"))

After compiling:

"use strict";
var grabCNN = {
    type: "CNN",
    getTitle: function (link) {
        return "Title of " + link;
    },
    getContent: function (link) {
        return "Content of " + link;
    }
};
console.log(grabCNN.type);
console.log(grabCNN.getTitle("https://edition.cnn.com/somelink.html"));
console.log(grabCNN.getContent("https://edition.cnn.com/somelink.html"));
 

Result:

[LOG]: CNN 
[LOG]: Title of https://edition.cnn.com/somelink.html 
[LOG]: Content of https://edition.cnn.com/somelink.html 

Interface and Union Type
Example 2:

interface runCommand{
    name:string,
    run:string|string[]|((file:string)=>string)
}

var run:runCommand = {
    name: "run PHP",
    run: (file:string)=>{
        return "php "+file
    }
}

console.log(run.name)
console.log(run.run)

run = {
    name: "run free",
    run: "free -m"
}

console.log(run.name)
console.log(run.run)

run = {
    name: "run ps",
    run: ["ps","aux"]
}

console.log(run.name)
console.log(run.run)

Result:

[LOG]: run PHP 
[LOG]: function (file) { return "php " + file; } 
[LOG]: run free 
[LOG]: free -m 
[LOG]: run ps 
[LOG]: [ "ps", "aux" ] 

Interface and Array (Indexable Types)
Example 3:

interface list_number_string { 
   [index:number]:string 
} 

var list1:list_number_string = ["tutorialspots",".com"] 

interface list_string_number { 
   [index:string]:number 
} 

var list2:list_string_number = {"Monthday": 2, "Tuesday": 3}

Optional Properties and Array

interface Person {
  name: string
  age?: number
  [propName: string]: any
}

var Person1:Person = {
    name: "Peter",    
    job: "Engineer"
}

var Person2:Person = {
    name: "John",    
    age: 34
}

Interface and Inheritance

Typescript allows an interface to inherit from multiple interfaces.

Use the extends keyword to implement inheritance among interfaces.

Example 4:

interface Vehicle { 
   wheels:number 
} 

interface Auto extends Vehicle { 
   branch:string 
   name:string
} 

var GLS = <Auto>{}; 
GLS.wheels = 4 
GLS.name = "GLS" 
GLS.branch = "Mercedes"
console.log("Name:  "+GLS.name) 
console.log("Branch:  "+GLS.branch)

Result:

[LOG]: Name: GLS 
[LOG]: Branch: Mercedes 

Example 5:

interface IFilms { 
   title:string
   description:string
   thumbnail:string 
} 
interface ITVSeries { 
   seasons:number[]
} 
interface TVSeries extends IFilms,ITVSeries {    
} 
var tvseries:TVSeries = {
    title: "The title",
    description: "The description",
    thumbnail: "The thumbnail",
    seasons: [1,2,3,4,5]
}

console.log("Title:  "+tvseries.title) 
console.log("Description:  "+tvseries.description)

Result:

[LOG]: Title: The title 
[LOG]: Description: The description 

Example 6: interface can extend many class

class Jumpable {
    jump() {}
}
  
class Duckable {
    duck() {}
}

interface Sprite extends Jumpable, Duckable {}