How To Pick And Omit Keys in TypeScript?

In TypeScript, when working with objects, there are scenarios where we may want to pick or omit certain keys from an existing type. TypeScript provides utility types Pick and Omit to accomplish this. These utilities allow us to create new types by including or excluding specific properties from an existing type.

Let’s dive into how to use Pick and Omit in TypeScript with examples.

What is Pick in TypeScript?

Pick Is a utility type that allows us to create a new type by selecting a subset of keys from an existing type. This is useful when we only need certain properties from an object.

Syntax:

Pick<Type, Keys>

• Type: The original type from which properties are picked.
• Keys: The specific properties we want to include in the new type.

Example: Let’s say we have a type Person and we want to pick only name and age from it. Here, the BasicPerson type only includes the name and age properties from the Person type.

type Person = {
    name: string;
    age: number;
    email: string;
    address: string;
};

// Using Pick to create a new type with only name and age
type BasicPerson = Pick<Person, 'name' | 'age'>;

const person: BasicPerson = {
    name: 'Prateek',
    age: 20,
};

console.log(person); 
// Output: { name: 'Prateek', age: 20}

Output:

{ name: 'Prateek', age: 20 }

What is Omit In TypeScript?

Omit is the opposite of Pick. It creates a new type by excluding specified keys from an existing type. This is useful when we want most properties from a type but need to leave out a few.

Syntax:

Omit<Type, Keys>

• Type: The original type from which properties are omitted.
• Keys: The specific properties we want to exclude in the new type.

Example: Let’s omit the email and address fields from the Person type. In this case, ContactPerson will only have the name and age properties from Person, omitting email and address.

type Person = {
    name: string;
    age: number;
    email: string;
    address: string;
};

// Using Omit to create a new type excluding email and address
type ContactPerson = Omit<Person, 'email' | 'address'>;

const contactPerson: ContactPerson = {
    name: 'Prateek',
    age: 20,
};

console.log(contactPerson); 
// Output: { name: 'Prateek', age: 20 }

Output:

{ name: 'Prateek', age: 20 }

Combining Pick and Omit

We can combine Pick and Omit to fine-tune the properties we want to include or exclude from an existing type.

Example: Suppose we want to omit the email the Fromproperty first, and then pick only the name FromFor the resulting type. In this example, we first omit email using Omit, and then pick only name from the resulting type using Pick.

type Person = {
    name: string;
    age: number;
    email: string;
    address: string;
};

// First omit the email field, then pick only the name
type SimplifiedPerson = Pick<Omit<Person, 'email'>, 'name'>;

const simplifiedPerson: SimplifiedPerson = {
    name: 'Prateek',
};

console.log(simplifiedPerson);
// Output: { name: 'Prateek' }

Output:

{ name: 'Prateek' }

Nested Picking and Omitting

When working with nested types, we can also use Pick and Omit For deeper structures, but we may need to create intermediate types or use type transformations to handle deeply nested fields.

Example: Let’s consider a nested object type where we want to pick certain properties from a nested object. In below code, we omitted the zipCode field from the nested address object while retaining the other fields.

type Company = {
    name: string;
    address: {
        city: string;
        country: string;
        zipCode: string;
    };
    CEO: string;
};

// Omit zipCode from the address and keep the rest
type SimplifiedCompany = {
    name: string;
    address: Omit<Company['address'], 'zipCode'>;
    CEO: string;
};

const company: SimplifiedCompany = {
    name: 'GFG',
    address: {
        city: 'Delhi',
        country: 'India',
    },
    CEO: 'Prateek',
};

console.log(company);
// Output: { name: 'GFG', address: { city: 'Delhi', country: 'India' }, CEO: 'Prateek' }

Output:

{
    name: 'GFG',
    address: { city: 'Delhi', country: 'India' },
    CEO: 'Prateek'
}