When you extend an interface excluding a property in TypeScript, learning how to remove keys from that interface helps you to config your type easier. So how to do it? Let’s go into detail now.
How to extend an interface excluding property in TypeScript
Using omit utility type
Omit utility type will help you to construct an interface by getting all properties and removing some specific property.
Syntax:
omit<type,keys>
Parametes:
- type: the type that you want to config
- keys: all the keys that you want to remove from the type
Example:
interface infor {
name:string
age: number;
country: string;
ready: boolean
}
type person = Omit<infor,'ready'>;
//excluded name properties
// type person {
// name:string
// age: number;
// country: string;
// }
You can apply to omit utility type to use exclude a property by passing in keys parameter that property.
Example:
interface infor {
name:string
age: number;
country: string;
ready: boolean
}
type person = Omit<infor,'ready'>;
// excluded name properties
// type person {
// name:string
// age: number;
// country: string;
// }
const Togban:person={
name:'Togban',
age:18,
country:'VietNam'
}
console.log(Togban)
Output:
{ name: 'Togban', age: 18, country: 'VietNam' }
Here I create a person type that extends from the infor interface and excludes ready property. So that person only has name, age, and country property left. You can also exclude multiple properties by using the ‘|’ symbol like the example below:
interface infor {
name:string
age: number;
country: string;
ready: boolean;
favourite:string
}
type person = Omit<infor,'ready'|'favourite'>;
const Togban:person={
name:'Togban',
age:18,
country:'VietNam'
}
console.log(Togban)
Output:
{ name: 'Togban', age: 18, country: 'VietNam' }
Here I exclude multiple properties: ‘ready’ and ‘favourite’ properties.
And when you omit property, you can also add new property when you create a new interface that extends from the parent interface like this:
interface infor {
name:string
age: number;
country: string;
ready: boolean;
favourite:string
}
interface personDetail extends Omit<infor, 'ready'|'favourite'> {
id: number[],
university: string,
majors: string
}
const Togban:personDetail={
name:'Togban',
age:18,
country:'VietNam',
id:[0,1,2,3,4,5],
university:'HOU',
majors:'IT'
}
console.log(Togban)
Output:
{
name: 'Togban',
age: 18,
country: 'VietNam',
id: [ 0, 1, 2, 3, 4, 5 ],
university: 'HOU',
majors: 'IT'
}
You can also override the property type using this technique:
interface infor {
name:string
age: number;
country: string;
id:number
}
interface setIdType extends Omit<infor, 'id'> {
id:number[]
}
const person: setIdType={
name:'Togban',
age:18,
country:'VietNam',
id:[0,1,2,3,4,5]
}
console.log(person)
Output:
{
name: 'Togban',
age: 18,
country: 'VietNam',
id: [ 0, 1, 2, 3, 4, 5 ]
}
Summary
In this tutorial, I showed you how to extend an interface excluding property in TypeScript. You can omit utility types to remove the property you want to exclude. If you have any questions or problems, leave your comment below. Thank you for your reading!
Maybe you are interested:
- Override the Type of an Interface property in TypeScript
- Exclude a Property from a Type 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