DEV Community

Blake Lamb
Blake Lamb

Posted on

TypeScript's "Omit" Utility Type

Overview & Setup

This article will demonstrate how to use the Omit utility type in TypeScript. This utility type allows you to take a type and use a subset of its attributes, excluding any specified attributes, as the type for a variable without having to declare a second interface.

The demo I will do is in Angular, but this can be done in any TypeScript file. Create a new component in an Angular Project, or create a new StackBlitz Angular project. I did my work in a StackBlitz project, which can be found here.

In your TypeScript file, create a new interface. This can be done by inserting the code below above the @Component decorator.

// app.component.ts

export interface Player {
  firstName: string;
  lastName: string;
  age: number;
  stats: {
    ppg: number;
    apg: number;
    spg: number;
    rpg: number;
  };
  country: string;
  college: string;
}
Enter fullscreen mode Exit fullscreen mode

Once the new interface has been declared, we will create three new class variables. This is where we will implement the Omit utility type. It is done by declaring the type as Omit<T, "attributes" | "go" | "here">, as seen below. These are the two variables I created using my 'Player' interface.

// app.component.ts

  spida: Player = {
    firstName: 'Don',
    lastName: 'Mitch',
    age: 24,
    stats: {
      ppg: 24,
      apg: 4,
      spg: 3,
      rpg: 3,
    },
    country: 'USA',
    college: 'Louisville',
  };

  skyWalker: Omit<Player, 'age'> = {
    firstName: 'Walker',
    lastName: 'Kessler',
    stats: {
      ppg: 8,
      apg: 1,
      spg: 1,
      rpg: 7,
    },
    country: 'USA',
    college: 'Auburn',
  };
Enter fullscreen mode Exit fullscreen mode

I have created one of the variables using all of the attributes of the interface. The other is created by using the Omit utility type and declaring which attributes to exclude. Omit<Player, 'age'>. When each of these variables is created, you should see that both are valid ways of declaring a type for each variable.

It should be noted that this utility type is best used when there are only a few attributes that need to be excluded. It is bad practice for Omit to exclude too many attributes. Excluding a lot of attributes can become confusing to other developers and become more damaging than helpful. In short, it's best to keep it simple.

So now we've demonstrated how to actually use the Omit utility type, so now let's talk about why it is beneficial development in TypeScript.

Why?

One of Typescript's biggest advantages is to create strongly typed variables. This is typically done by using an interface to declare the variable's type. But as always, it's good to find ways to not duplicate code. In this instance, if we didn't use the Omit utility type, we would have to do something like this:

// app.component.ts

export interface Player {
  firstName: string;
  lastName: string;
  age: number;
  stats: {
    ppg: number;
    apg: number;
    spg: number;
    rpg: number;
  };
  country: string;
  college: string;
}

export interface PlayerWithoutAge {
  firstName: string;
  lastName: string;
  stats: {
    ppg: number;
    apg: number;
    spg: number;
    rpg: number;
  };
  country: string;
  college: string;
}
Enter fullscreen mode Exit fullscreen mode

This accomplishes the same task but does it with more code. It also can make it more difficult down the line to make sure that you're using the correct interface. But it still allows you to keep each variable strongly typed.

Besides keeping your code strongly typed, I think the next most important benefit to using the Omit utility type is to keep IntelliSense. This may seem insignificant to some, but IntelliSense is helpful to minimize mistakes such as spelling errors or remembering what attributes are on a type. I am always looking for ways to use my IntelliSense as life is more difficult when it isn't available. It also keeps me focused on whatever task I am working on rather than having to pause and figure out what the shape of a variable should look like.

Conclusion

TypeScript has so many benefits that can be used to your advantage. The key is knowing what they are and how to leverage them to boost your productivity while developing. Hopefully this article has done just that and will help you to level up your skills and knowledge.

What other benefits could you see to using the Omit utility type? Let me know in the comments below!

Top comments (0)