EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript Extend Interface

TypeScript Extend Interface

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:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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 of TypeScript Extend Interface

Below are some of the different 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:

TypeScript Extend Interface 1

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:

TypeScript Extend Interface 2

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 3

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:

Example 4

Conclusion

On the basis of the above article, we understood the concept of typescript and extend the 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

We hope that this EDUCBA information on “TypeScript Extend Interface” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

  1. TypeScript Optional Chaining
  2. TypeScript Array of Objects
  3. TypeScript keyof Enum
  4. Typescript Key-Value Pair
All in One Excel VBA Bundle
500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access
Financial Analyst Masters Training Program
1000+ Hours of HD Videos
43 Learning Paths
250+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Data Science Bundle
1500+ Hour of HD Videos
80 Learning Paths
360+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Software Development Bundle
3000+ Hours of HD Videos
149 Learning Paths
600+ Courses
Verifiable Certificate of Completion
Lifetime Access
Primary Sidebar
All in One Software Development Bundle3000+ Hours of HD Videos | 149 Learning Paths | 600+ Courses | Verifiable Certificate of Completion | Lifetime Access
Financial Analyst Masters Training Program1000+ Hours of HD Videos | 43 Learning Paths | 250+ Courses | Verifiable Certificate of Completion | Lifetime Access
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more