TypeScript Extend Interface

Introduction to TypeScript Extend Interface

Typescript gives us a way to write JavaScript in the way we all want. Typescript is considered a superset of JavaScript which compiles the code into plain JavaScript. Typescript is an object-oriented programming language with interfaces and classes and it is statically typed like Java or C. We all know about Angular 2.0, the language is actually written in Typescript. The best feature of typescript is that the programmer can write programs based on the oops concept and can compile them to JavaScript on a server as well as the client-side. In this article, we are explaining extended interface used in Typescript. This article will include several examples to help the readers in understanding the Typescript extend the interface.

Syntax to extend interface in Typescript:

interface EDUCBA {
coursename: string;
price: number;
coursename1: string;
price1: number;
coursename2: string;
price2: number;
}
interface New extends EDUCBA {
duration: string;
duration1: string;
duration2: string;
click(): void;
}
……………………

Examples

Extend Interface in Typescript explained with examples:

A syntactical contract which an entity needs to conform to is called an interface. We can also define this as the interface represents a syntax to which an entity should adhere to. Properties, events, and methods are defined by Interfaces and these are also the member of the interface. Only the declaration of the members is contained in Interfaces. The members are defined by the deriving class. Other interfaces can also get extended by an interface in Typescript, which means many interfaces can be extended by a single interface at a time. The interface can also extend a class in Typescript.

Example #1

Code:

interface Old {
name: string;
course: string;
startSomething(activate: boolean): void;
}
interface Click extends Old {
price: number;
}
class NewClick implements Click {
name: string;
course: string;
price: number;
constructor( name: string, course: string, price: number) {
this.name = name;
this.course = course;
this.price = price;
}
startSomething(activate: boolean): void {
this.activate = activate;
}
}
let newcourse: Click = new NewClick('Rahul', 'Data Science', 25500);
newcourse.startSomething(true)
console.log(newcourse);

Output:

Example #2

Code:

interface EDUCBA {
coursename: string;
price: number;
coursename1: string;
price1: number;
coursename2: string;
price2: number;
}
interface New extends EDUCBA {
duration: string;
duration1: string;
duration2: string;
click(): void;
}
let clk: New = {
coursename: "Data Science", coursename1: "Finance", coursename2: "Excel",
price: 25500, price1: 23500, price2: 4400,
duration: "40 hours", duration1: "36 hours", duration2: "20 hours",
click: function () {
console.log("membership activated")
}
};
console.log(clk);
clk.click();

Output:

Example #3

Code:

interface EDUCBA {
coursename: string;
price: number;
coursename1: string;
price1: number;
coursename2: string;
price2: number;
}
interface Action {
click(): void;
click1(): void;
click2(): void;
}
interface New extends EDUCBA, Action {
duration: string;
duration1: string;
duration2: string;
}
let clk: New = {
coursename: "Data Science", coursename1: "Finance", coursename2: "Excel",
price: 25500, price1: 23500, price2: 4400,
duration: "40 hours", duration1: "36 hours", duration2: "20 hours",
click: function () {
console.log("**Membership Activated**")
},
click1: function () {
console.log("**Plan is 1 year long**")
},
click2: function () {
console.log("**Happy Learning!!**")
}
};
console.log(clk);
clk.click();

Output:

Example #4

Code:

interface EDUCBA {
rollnumber:number,
marks:number,
registrationnumber: number,
rollnumber1:number,
marks1:number,
registrationnumber1: number,
rollnumber2:number,
marks2:number,
registrationnumber2: number,
bestcourse: string,
bestcourse1: string,
bestcourse2: string
}
var first:EDUCBA = {
rollnumber:11223344,
marks:45,
registrationnumber: 657834,
bestcourse:"Data Science",
rollnumber1:11223343,
marks1:53,
registrationnumber1: 657833,
bestcourse1: "Big Data",
rollnumber2:11223342,
marks2:67,
registrationnumber2: 657832,
bestcourse2:"Machine Learning",
}
console.log("Student Data")
console.log(first.rollnumber)
console.log(first. marks)
console.log(first.registrationnumber)
console.log(first.bestcourse)
console.log(first.rollnumber1)
console.log(first.marks1)
console.log(first.registrationnumber1)
console.log(first.bestcourse1)
console.log(first.rollnumber2)
console.log(first.marks2)
console.log(first.registrationnumber2)
console.log(first.bestcourse2)
var second:EDUCBA = {
rollnumber:11223341,
marks:78,
registrationnumber: 657831,
bestcourse:"Artificial Intelligence",
rollnumber1:11223340,
marks1:89,
registrationnumber1: 657830,
bestcourse1:"Software Development",
rollnumber2:11223348,
marks2:81,
registrationnumber2: 657839,
bestcourse2:"Cloud Computing",
}
console.log("Achievers Data ")
console.log(second.rollnumber);
console.log(second.marks);
console.log(second.registrationnumber);
console.log(second.rollnumber1);
console.log(second.marks1);
console.log(second.registrationnumber1);
console.log(second.rollnumber2);
console.log(second.marks2);
console.log(second.registrationnumber2);

Output:

Conclusion

On the basis of the above article, we understood the concept of typescript and extend the interface. This article explains Typescript extend interface with its working and different examples which will help everyone in understanding and implementing the concept. This article would help the beginners of Typescript who are looking to implement extend information for their respective programs.

Recommended Articles

This is a guide to TypeScript Extend Interface. Here we discuss the Introduction, syntax, and examples with code implementation. You may also have a look at the following articles to learn more –

1. TypeScript Optional Chaining
2. TypeScript Array of Objects
3. TypeScript keyof Enum
4. Typescript Key-Value Pair