Typescript

What is the Omit Type in TypeScript?

TypeScript offers a wide range of utility types to make its type system more convenient and efficient. These types allow the users to build a new type based on the existing type by removing or modifying properties, making properties read-only or optional, and much more. Each utility type performs specific functionality based on its name such as the “optional” type makes the properties optional, “readonly” declares the field as read-only, and so on.

This guide explains the “Omit” utility type in TypeScript.

What is the Omit Type in TypeScript?

The “Omit” utility type creates a new type by excluding the unnecessary properties of the base type. The base type represents the existing type from which the new type derives.

Syntax

type NewType = Omit<ExistingType, 'PropertyName1' | 'PropertyName2' | ...>

The above syntax can “Omit” multiple properties of “ExistingType” by separating them with the help of the “OR(|)” operator.

Let’s use the above-defined “Omit” utility type practically.

 

Example 1: Applying the “Omit<type, keys>” With Type Alias

This example uses the “Omit<type, keys>” utility type to create a new type from the existing type.

Code

Copy the given line of code in the “.ts” file of the TypeScript project:

type User = {
 name: string,
 age: number,
 location: string
};

type UserWithoutAge = Omit<User, 'age'>;

const userwithoutage: UserWithoutAge = {

  name: 'Ali',

  location: "Islamabad"

};

console.log(userwithoutage);

In this code:

  • The “User” type is defined with the specified properties’ name, age, and location.
  • Next, the “UserWithoutAge” a new type is created from the existing “User” type by excluding its “age” property using the “Omit” utility type.
  • After that, an object “userwithoutage” of type “UserWithoutAge” is created that specifies all fields of the existing type “User” except the “age”.
  • Lastly, the “console.log()” method is applied to display the “userwithoutage” object.

Output

Compile the “.ts” file and run the automatically generated “.js” file:

tsc main.js //Compile.ts File

node main.js //Run .js File

It can be seen that the terminal displays the output of the new type “UserWithoutAge” object.

Example 2: Applying the “Omit<type, keys>” Type With Interface

This example applies the “Omit<type, keys>” utility type with interfaces to create a new type.

Code

interface User {

  name: string;

  age: number;

  location: string;

}

type NewPerson = Omit<User, 'age' | 'location'>;

const person: NewPerson = {

name: 'Ali'

};

console.log(person);

Now, the stated lines of code:

  • Define an interface “User” having the following properties name, string, and location.
  • Next, create a new type “NewPerson” from the existing interface “User” excluding its specified properties age, and location.
  • After that, create the new type “NewPerson” object named “person” specifying only one property i.e. “name” of existing interface “User”.
  • Lastly, display the “person” object’s fields using the “console.log()” method.

Output

Compile and execute the code:

tsc main.js //Compile.ts File

node main.js //Run .js File

The terminal shows only one property value of the new type “NewPerson” specified in its object.

Example 3: Applying the “Omit<type, keys>” Type With Function()

This example utilizes the “Omit<type, keys>” type with a function to return the object of an interface passed as its argument by omitting a few properties of the existing interface.

Code

interface User {

  name: string;

  age: number;

  location: string;

}

function getUserDetails(newuser: Omit<User, "name" | "location">): number {

  return(newuser.age)

}

const newuser: User = {

  age: 40,

  name: "Ali",

  location: "Islamabad"

};

const userDetails = getUserDetails(newuser);

console.log(userDetails);

The above code snippet:

  • First create an interface “User” having name, age, and location properties.
  • Next, define a function name “getUserDetails()” that omits the “name”, and “location” properties of type “newuser” of the existing interface, i.e., “User”.
  • This function returns a numeric value i.e. “age” of the user.
  • Now, create an object of the “newuser” of interface “User” to specify its properties values.
  • After that, call the defined “getUserDetails()” function passing the “newuser” object as its parameter with the help of the “userDetails” constant.
  • Lastly, display the “userDeatils” output via the “console.log()” method.

Output

tsc main.js //Compile.ts File

node main.js //Run .js File

The terminal only shows the “age” property value because “name” and “location” are excluded through the “Omit” utility type.

Conclusion

In TypeScript, the utility type “Omit” takes the existing type as its first parameter and creates a new type by excluding a few properties of the existing type. This utility type helps to duplicate an existing type for the creation of a new type having some of its properties instead of creating the new type from scratch. It can be applied with “type” alias, interfaces, and functions. This guide deeply explained the “Omit” utility type in TypeScript.

About the author

Areej Nadeem

I am a technical author holding a Bachelor’s degree in Computer Science. I am passionate about writing and learning new technologies and sharing my knowledge with the rest of the world.