This tutorial relates to the type of property in the interface. What can you do if you want to override the Type of an Interface property in TypeScript? Let’s go into detail.
Override the type of an interface property in TypeScript
Method: Use utility types (omit)
You can use utility types (omit) to achieve this.
Syntax:
Omit<type,keys>
Parameters:
- type: interface that you want to extend
- keys: all property that you want to remove from interface when extend
Omit utility type will help you reconstruct a type by removing all properties from the type and eliminating keys.
Example:
interface person {
address: string;
name: string;
age: number;
id: number;
}
interface detailPerson extends Omit<person,'address'> {
address: {
homeNumber:number;
country: string;
};
}
const James: detailPerson= {
address:{
homeNumber:12,
country:'England'
},
name :'James',
age:25,
id:2314
};Here I create an interface type ‘person’, which is the parent interface. Then I create detailPerson, a child interface that extends all properties from the person interface. Still, with omit, I remove the address property and use the new address property, which has the type as an object.
If you want to override more than one property on the interface, you can use “|” to divide all the properties you want to override type when passing in omit.
Example:
interface person {
address: string;
name: string;
age: number;
id: number;
}
interface detailPerson extends Omit<person,'address'| 'age'> {
address: {
homeNumber:number;
country: string;
};
age:string
}
const James: detailPerson= {
address:{
homeNumber:12,
country:'England'
},
name :'James',
age:'25',
id:2314
};Here I divide the address and age attribute by the “|” symbol.
If you just override without deleting the old type. You will get an error:
Example:
interface person {
name : string;
age : number;
country : string;
}
interface persons extends person{
name:string[];
}The error:
Interface 'persons' incorrectly extends interface 'person'.
Types of property 'name' are incompatible.
Type 'string[]' is not assignable to type 'string'.
If you want to create a new type instead of an interface, override the origin type. You can follow this way:
Example:
interface person {
address: string;
name: string;
age: number;
id: number;
}
type detailPerson = Omit<person,'address'>&{
address: {
homeNumber:number;
country: string;
};
};
const James: detailPerson= {
address:{
homeNumber:12,
country:'England'
},
name :'James',
age:25,
id:2314
};Summary
In this tutorial, I showed you how to override the type of an interface property in TypeScript. You can use use utility types (omit) to create a new interface or new type. If you have any questions or problems, please comment below, I will answer as possible. Thanks for your reading!
Maybe you are interested:
- Defining and using Key-Value pair in TypeScript
- Extend an Interface excluding a Property in TypeScript
- Get the Type of a Function’s Arguments in TypeScript
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm