Remove a property from an Interface in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 16, 2022

banner

Photo from Unsplash

Remove a property from an Interface in TypeScript #

Use the Omit utility type to remove a property from an interface, e.g. type WithoutAge = Omit<Person, 'age'>. The Omit utility type constructs a new type by removing the specified keys from the existing interface.

index.ts
interface Person { name: string; age: number; address: string; } // ✅ Remove 'age' property from interface type WithoutAge = Omit<Person, 'age'>; // ✅ Remove multiple properties from interface type WithoutAgeAndAddress = Omit<Person, 'age' | 'address'>; // ✅ Remove property and extend interface interface PersonWithoutAge extends Omit<Person, 'age'> { language: string; }

We can use the Omit utility type to remove one or more properties from an interface.

The first two examples create a type instead of an interface, because we are simply removing the properties from the interface without extending it (adding new properties to it).

It doesn't make sense to extend and interface without adding any properties to it, so it's more intuitive to declare a type.

In the third example, we remove the age property from the Person type and extend the newly constructed type with the language property.

Here is a more verbose version of the examples above, where we create create objects that conform to the newly constructed types.

index.ts
interface Person { name: string; age: number; address: string; } // ✅ Remove 'age' property from interface type WithoutAge = Omit<Person, 'age'>; const obj1: WithoutAge = { name: 'Tom', address: 'Example str 123', }; // ✅ Remove multiple properties from interface type WithoutAgeAndAddress = Omit<Person, 'age' | 'address'>; const obj2: WithoutAgeAndAddress = { name: 'Alfred', }; // ✅ Remove property and extend interface interface PersonWithoutAge extends Omit<Person, 'age'> { language: string; } const obj3: PersonWithoutAge = { name: 'James', address: 'Example str 123', language: 'English', };

You will often see the Omit utility type used when overriding the type of a specific property.

index.ts
interface Person { name: string; age: number; address: string; } // ✅ Remove property to change its type interface PersonWithVerboseAddress extends Omit<Person, 'address'> { address: { country: string; city: string; }; } const obj3: PersonWithVerboseAddress = { name: 'James', age: 30, address: { country: 'Chile', city: 'Santiago', }, };

We removed the address property from the Person interface and then changed its type to an object.

This is much better than duplicating the properties we need from the Person interface onto the other interface, because we still signal to the reader of our code that there is a relation between the two interfaces.

Had we tried to directly override the address property without excluding it from the interface first, we would get an error, because there is a conflict between the type of the address property on the two interfaces.

index.ts
interface Person { name: string; age: number; address: string; } // ⛔️ Error: Type {country: string; city: string} is not // assignable to type 'string' // Types of property 'address' are incompatible interface PersonWithVerboseAddress extends Person { address: { country: string; city: string; }; }
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.