Utilize TypeScript's Omit & Partial for Data Creation & Update Scenarios

TypeScript offers many utilities that can help us to create more expressive and fine-grained types. In this article, we’ll zoom in on two handy TypeScript utilities: Omit and Partial.

Omit is the go-to tool to exclude specific properties, such as IDs, for typing objects that hold data for creating new entities. Partial, on the other hand, shines when all properties are optional, as is the case when updating data via a PATCH request. By harnessing the power of Omit and Partial, we’ll streamline our code and polish the developer experience of our types.

The power of Omit in TypeScript

TypeScript’s Omit utility is a practical method for creating a new type that excludes specific properties from an existing type. It is handy when particular properties, like an id, aren’t required in certain situations.

Example use case: Creating a new data entry

Define the base type:

type Product = {
  id: number;
  name: string;
  price: number;
  description: string;
};

Use Omit to create a new type without the id field:

type ProductNew = Omit<Product, "id">;

Create a new data entry:

const productNew: ProductNew = {
  name: "Sample Product",
  price: 19.99,
  description: "This is a sample product",
};

Example: Creating a new entry via a POST API request

async function createProduct(product: ProductNew): Promise<Product> {
  return fetch("https://api.example.com/products", {
    method: "POST",
    body: JSON.stringify(product),
  });
}

createProduct(productNew);

Defining a new type with Omit ensures that our createProduct() function clearly states which properties it needs without making the id in the original Product type optional. This practice prevents potential errors that could happen if we’d make the id optional in all cases. Furthermore, it helps keep our code clean and maintain a well-organized codebase because we don’t have to create a separate type with all the same properties except the id.

Leverage TypeScript’s Partial utility

TypeScript’s Partial utility enables us to create a new type with all properties of an existing type marked as optional. Marking all properties as optional is especially useful when we need to update an existing data entry, such as when making a PATCH request or updating a row in a database, and you only want to update specific fields.

Example use case: Updating an existing data entry

Use Partial to create a new type with only optional properties:

type ProductPartial = Partial<Product>;

Update only the name property of an existing entity:

const updatedProduct: ProductPartial = {
  name: "Updated Sample Product",
};

Example: Updating an entry via a PATCH API request using fetch()

async function updateProduct(
  id: number,
  product: ProductPartial
): Promise<Product> {
  return fetch(`https://api.example.com/products/${id}`, {
    method: "PATCH",
    body: JSON.stringify(product),
  });
}

updateProduct(1, updatedProduct);

Using the Partial utility makes creating a type for updating existing data via a PATCH request straightforward. Although all properties of the ProductPartial type are optional, it still ensures that we can’t pass an object with invalid properties to the updateProduct() function.

Wrapping it up

In this article, we learned about potential use cases of Omit and Partial utilities in TypeScript, demonstrating their usage in handling data creation and updates. I encourage you to explore and implement these convenient TypeScript utilities in your projects to unlock their full potential and elevate your TypeScript game.