Typescript

How the TypeScript Omit Type works

TypeScript provides a number of utility types which 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.

TypeScript Omit Type

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

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

Sadly, coding is not always straight foward. 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:

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:

type UserNameAndActive = Omit<User, "age">

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

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
}

More Tips and Tricks for Typescript

• How the TypeScript Readonly Type Works
• How the TypeScript Partial Type Works
• How Intrinsic Type Manipulations work in TypeScript
• TypeScript Array Type
• Type Casting in TypeScript
• How the TypeScript Parameters Type Works
• Creating Custom Types in Typescript
• How the TypeScript NonNullable Type Works
• How the TypeScript ReturnType Type works
• How to setup a new Project in Typescript