Updated February 17, 2023
Definition of TypeScript Extend Type
TypeScript extend type is defined as the typescript interfaces that can extend classes which means that the interfaces can take over the members of a class but without an execution in which the class behaves as an interface that can have all the members which can be communicated without execution, ‘extends’ keyword has been used to extend the types in the typescript and also for generating the UserActivity interfaces can extend the event type. We can extend it by appending the string, which is the ‘UserId’ field within the UserActivity, and can also take over the remaining from the event.
Introduction to TypeScript Extend Type
Typescript is the language that can manage various types of values. It can give data type for JavaScript to convert it into the strongly typed programming language, for which JavaScript does not manage with the data type, as it has an extended type that can be utilized for extending a type into the typescript with the help of the ‘extend’ keyword. It can be extended with the class by implementing extending the interfaces by classes as well as with the interfaces in which interfaces can extend with each other same as in classes in which we can also say that it is flexible in using the interfaces by executing in various places.
How does TypeScript Extend Type work?
Let us see the working of a typescript with extending type in TypeScript which can be implemented by utilizing the ‘extends’ keyword; for that, we can interpret the section as given below,
Code:
type Element = {
fname: string;
durCreated: string;
type: string;
};
interface UserElement extends Element {
UserId: string;
}
Output:
For generating the interface UserElement, we have to extend an Element type. When we try to append a string field ‘UserId’ in UserElement, it can take over the Element, in which we can say that the ‘extend’ keyword has been utilized to extend a type in typescript.
TypeScript Extend Interfaces Types
The interface is the keyword that can be utilized to state the typescript interface in which interface_name is the name of the interface, and the body of it can have the variables and methods; we can retrieve the interface from other interfaces in which we can say that typescript authorize an interface to take over by zero or more base types, and the base type can be a class or interface, the ‘extends’ keyword has been utilized to carry out the inheritance in the middle of the interfaces,
Let us see an example of it,
Syntax:
"child_interface extends parent interface
{
}"Code:
interface Human
{
Fname: string
age:number
}
interface Worker extends Human {
gender: string
workCode:number
}
let wObject = {};
wObject.FName = "Anay"
wObject.age = 32
wObject.gender = "Male"
wObject.wCode = 43
console.log("FName: "+wObject.FName);
console.log("Worker Code: "+wObject.wCode);Output:
There are mainly two types of typescript interface:
1. Array Type Interface
The interfaces can be utilized to define the array type; let us see an example of an array type interface that can return the string and also array has been used, then it will give back the number,
Code:
interface nameArray {
[index:number]:string
}
let ourNames: nameArray;
ourNames = ['Viraj', 'Swar', 'Shivay'];
interface ageArray {
[index:number]:number
}
var ourAges: ageArray;
ourAges =[15, 21, 12];
console.log("Our ages are: "+ourAges[1]);Output:
In this example, first, we have stated the ‘nameArray,’ which can give back the string, and ‘ageArray,’ which can give back a number, the type of index in the array is every time a number; hence we can recover the array element with the utilization of their index position within the array, which can have the output which is given above.
2. Interface in Class
In typescript, we can utilize the interface in a class, and that can execute the interface with the ‘implements’ keyword, let us see an example to understand how it works,
Code:
interface Human {
fName: string;
lName: string;
age: number;
FullName();
GetAge();
}
class Agent implements Human {
fName: string;
lName: string;
age:number;
FullName() {
return this.fName + ' ' + this.lName;
}
GetAge() {
return this.age;
}
constructor(fN: string, lN: string, getAge: number) {
this.fName = fN;
this.lName = lN;
this.age = getAge;
}
}
let myAgent = new Agent('Abhay', 'Chavan', 32);
let fullName = myAgent.FullName();
let Age = myAgent.GetAge();
console.log("Name of Human: " +fullName + '\nAge: ' + Age);Output:
In this example, first, we have defined the Human interface with fname, lName, and FullName. The GetAge method has been used in which the Agent class has been executed this interface utilizing the ‘implements’ keyword, and then after utilization of the interface, we have to define the properties and methods within the class if we have not implemented that properties and methods then it will fetch an error, so we have also described the constructor within a class.
Examples
Different examples are mentioned below:
Example #1
In this example Profile interface extends to the Location interface:
Code:
interface Location {
location: string;
village: string
dist: string
}
interface Organization {
role: string;
}
interface Profile extends Location, Organization {
Fname: string;
Lname: string;
Fname(): string;
}
let profile: Profile = {
Fname: "Emil",
Lname: "Andersson",
Fname(): string {
return this.Fname + " " + this.Lname;
},
location: "Karnataka",
village: "Erode",
dist: "Coimbatore",
role: "CFO"
}Output:
Example #2
This typescript extend removes property, in which ‘age’ can also remove property from the interface, and is also able to remove various properties from the interface, and also remove property and extend the interface:
Code:
interface Human {
name: string;
age: number;
location: string;
}
type WithoutAge = Omit<Human, 'age'>;
type WithoutAgeAndLocation = Omit<Human, 'age' | 'location'>;
interface HumanWithoutAge extends Omit<Human, 'age'> {
language: string;
}
Output:
Conclusion
In this article, we conclude that the ‘extend’ keyword has been used to extend classes into interfaces; we have also discussed the working of typescript extend type, typescript extends interface types, and examples of the typescript extend type, so this article will help to understand the concept of typescript extend type.
Recommended Articles
This is a guide to TypeScript Extend Type. Here we discuss the introduction and how Extend Type works in TypeScript, along with interfaces and examples. You may also have a look at the following articles to learn more –
