DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > How the TypeScript Omit Type Works

How the TypeScript Omit Type Works

Let's look at how the Omit Type works in TypeScript

Johnny Simpson user avatar by
Johnny Simpson
CORE ·
Apr. 27, 22 · Web Dev Zone · Tutorial
Like (3)
Save
Tweet
5.32K Views

Join the DZone community and get the full member experience.

Join For Free

TypeScript provides a number of utility types that are used to solve a particular problem that using types in Javascript creates. One very useful utility type used in TypeScript is the Omit type, which lets us customize an already existing type. Let's look at how it works.

Custom Types

This article assumes you know how to create custom types in TypeScript. If you don't, read my article on custom types here.

TypeScript Omit Type

In TypeScript, we often create custom types that let us ensure data conforms to a specific format. For example, if we wanted to create a custom User type that has four fields - firstName, lastName, age and lastActive, we could do something like this:

TypeScript
 
type User = {
  firstName: string;
  lastName: string;
  age: number;
  lastActive: number;
}

Sadly, coding is not always straightforward. Sometimes, we want to use our type again, but remove certain elements from it, thus creating a new type. To do this, we can use Omit<Type, Omissions>. Omit accepts two values:

  • The Type to base our new type on
  • A Union Type listing all the fields to remove. For example, if we want to take our User type, and remove age and lastActive, we could do the following:
TypeScript
 
type User = {
  firstName: string;
  lastName: string;
  age: number;
  lastActive: number;
}

type UserNameOnly = Omit<User, "age" | "lastActive">

Now we have two types - User, which is our core user type, and UserNameOnly, which is our User type minus age and lastActive. Similarly, if we only wanted to remove age, this would suffice:

TypeScript
 
type UserNameAndActive = Omit<User, "age">

Now we can use our new types anywhere in our code. This gives us the flexibility to use a type, and transform it for specific circumstances. Here is an example of using both our new types:

TypeScript
 
type User = {
  firstName: string;
  lastName: string;
  age: number;
  lastActive: number;
}

type UserNameOnly = Omit<User, "age" | "lastActive">
type UserNameAndActive = Omit<User, "age">

const userByName:UserNameOnly = {
    firstName: "John",
    lastName: "Doe",
};
const userWithoutAge:UserNameAndActive = {
    firstName: "John",
    lastName: "Doe",
    lastActive: -16302124725
}
TypeScript

Published at DZone with permission of Johnny Simpson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Understanding OAuth 2.0
  • 5 Steps to Create a Successful Agile Release Plan
  • API Security Weekly: Issue 165
  • Troubleshooting HTTP 502 Bad Gateway in AWS EBS

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo