Typescript’s Omit: Pick’s Mirror
Tags: typescript
Published: 2019-12-17 13:49:45

---
title: Typescript’s Omit: Pick’s Mirror
published: true
date: 2019-10-18 00:00:00 UTC
tags: typescript
canonical_url: https://stephencharlesweiss.com//2019-10-18/typescript-omit-intro/
---

I’ve written in the past about the [benefits of `Pick` in writing better interfaces with Typescript](../../2019-06-25/typescript-pick-interface-partials/).

Today, I found out about `Pick`’s mirror: `Omit`.<sup><a href="#footnotes">1</a></sup>Quick refresher: `Pick` is useful for maintaining the type checking when we only want a select number of properties from an existing interface (as opposed to `Partial`). `Omit` behaves similarly, but in the inverse: we use it where we want to _keep_ all, but a select number of properties from an interface.

I think of both `Pick` and `Omit` similarly to `extends` in so far as they’re building upon some base. You can think of them similarly to recipes:

1. `Extends` uses all of the ingredients in the original recipe and then adds some more.
2. `Pick` takes all of the original ingredients and plucks a few out for use in a smaller dish.
3. `Omit` takes all of the original ingredients, but sets aside some of the more specific ingredients because someone in the party is “allergic” to cilantro.

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Using `Omit`

To show how `Omit` works, let’s use the same example we’ve used in the past, `IMyTable`

```typescript
interface IMyTable {
  id: string
  foreign_id: string
  name: string

  is_enabled: boolean
  is_custom: boolean
  display_order?: number

  name_en: string
  name_sp?: string
  name_fr?: string

  description_en?: string
  description_sp?: string
  description_fr?: string
}
```

Let’s say that we want to omit the `foreign_id`. The type is:

```typescript
type NewTableProps = Omit<IMyTable, 'foreign_id'>
```

This is saying that we will have access to _all_ of `IMyTable` _except_ `"foriegn_id”`.

Similarly, if we wanted to exclude _multiple_ properties, we use the `|`:

```typescript
type NewTableProps = Omit<IMyTable, 'foreign_id' | 'is_custom'>
```

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Conclusion

Just like `Pick` is useful when you want to keep the benefits of type checking and increase the specificity of the interface when all you need is a few attributes, `Omit` serves a similar role when you want to exclude a few.

I found this particularly useful when dealing with intrinsic HTML elements with hundreds of properties. Instead of listing out which ones I want to keep, I can simply omit the ones I don't. For example, `Omit<JSX.IntrinsicElements['button'], 'css'>`.

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Footnotes

- <sup><a href="#fn1">1</a></sup> Interestingly, whereas Pick is noted in the Typescript documentation on [Advanced Types](https://www.typescriptlang.org/docs/handbook/advanced-types.html), I could not find a reference to `Omit`. I did, however, find this post on [Omit And Projection Types](http://ideasintosoftware.com/typescript-advanced-tricks/) by Tomas Brambora useful for understanding how to use `Omit`.