Extend an Interface excluding a Property in TypeScript

avatar

Borislav Hadzhiev

Mon Mar 21 20222 min read

Extend an Interface excluding a Property in TypeScript #

Use the Omit utility type to extend an interface excluding a property, e.g. type WithoutTasks = Omit<Employee, 'tasks'>;. The Omit utility type constructs a new type by picking the properties from the provided type and removing the specified keys.

index.ts
interface Employee { id: number; name: string; salary: number; tasks: string[]; } // ✅ 1. Exclude 1 property // 👇️ type WithoutTasks = { // id: number; // name: string; // salary: number; // } type WithoutTasks = Omit<Employee, 'tasks'>; // -------------------------------------------------------- // ✅ 2. Exclude multiple properties // 👇️ type WithoutIdAndTasks = { // name: string; // salary: number; // } type WithoutIdAndTasks = Omit<Employee, 'id' | 'tasks'>; // -------------------------------------------------------- // ✅ 3. Exclude property and then add more properties interface WithAddedProps extends Omit<Employee, 'tasks'> { country: string; } const example3: WithAddedProps = { id: 1, name: 'Tom', country: 'Germany', salary: 100, };

We used the Omit utility type to construct a new type based on the provided type with the specified keys removed.

index.ts
interface Employee { id: number; name: string; salary: number; tasks: string[]; } type WithoutTasks = Omit<Employee, 'tasks'>; const example1: WithoutTasks = { id: 1, name: 'Alice', salary: 100, };

The first example creates a new type that has all of the properties in the Employee type excluding the tasks property.

If you need to exclude multiple properties, you can pass a union of string literals to the Omit utility type.

index.ts
interface Employee { id: number; name: string; salary: number; tasks: string[]; } type WithoutIdAndTasks = Omit<Employee, 'id' | 'tasks'>; const example2: WithoutIdAndTasks = { name: 'Bob', salary: 100, };

When passing a union of string literals, make sure to separate the property names that you want to exclude with a pipe | and not a comma or any other separator.

You can also use this approach if you want to exclude some and add more properties.

index.ts
interface Employee { id: number; name: string; salary: number; tasks: string[]; } // ✅ If you need to exclude some and then add more properties interface WithAddedProps extends Omit<Employee, 'tasks'> { country: string; } const example3: WithAddedProps = { id: 1, name: 'Tom', country: 'Germany', salary: 100, };

The country property exists only in the WithAddedProps type, whereas the tasks property only in the Employee type.

The same approach can be used if you need to change the type of a specific property on the interface.

index.ts
interface Employee { id: number; name: string; salary: number; tasks: string[]; } interface WithAddedProps extends Omit<Employee, 'tasks'> { tasks: number[]; // 👈️ change type } const example3: WithAddedProps = { id: 1, name: 'Tom', salary: 100, tasks: [1, 2, 3], };

We excluded the tasks property when extending the interface and then changed its type to number[].

This would not be possible if you directly extend from the Employee interface, because the type number[] is not assignable to the type string[].

Use the search field on my Home Page to filter through my more than 1,000 articles.