DEV Community

Blake Lamb
Blake Lamb

Posted on

1

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!

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay