Typescript: How to use utility types to keep your code DRY.

Types... If you are coming from a vanilla Javascript background you might see types as idealistic in theory but in practice tanks your productivity. Who wants to write a type for every possible shape some data could have anyways? In web development, we often get some chunk of data from an API clean it, process it, take off a few props here and add a few there and by the time you are done with all that you could end up with a ton of types that are all just variations of the same object. And honestly, writing multiple types for that same piece of data can be a nightmare to maintain.

Every line of code we write is another line of code we will have to read and maintain later. If I decide to change something fundamental I'll probably have to change every interface I have of that object as well. It may not seem like much overhead in the beginning but any experienced developer knows that projects only tend to get more complex over time and technical debt piles up quickly.

If only we had some collection of utility types that allowed us to represent states of any type we create without having to write and maintain them ourselves...

Que in, Typescript utility types: Utility Types Documentation

There are quite a few of these (16 as of writing) and I'm not going to cover them all. I will cover some of the ones I found most useful and give some practical examples of how you can use them yourself.

1# Partial<T>

Constructs a type with all properties of T set to optional. This utility will return a type that represents all subsets of a given type. Let's say you have an interface for a client that you get from a backend API. The client needs to be able to change pieces of their profile and update them. There are many ways to do this but often the best solution is sending only the part of the client that changed, rather than reconstruct the entire object or create an endpoint for each field.

Doing this in Typescript you have a few choices. You could create an object of type any and lose all type safety and IntelliSense... not great. You could make another model with all of the fields being optional. This means that every time you make a change you now have to update two models. A Partial allows us to create a subtype of the client with all props optional on the fly for the specific context we are in, without any additional code.

 public class Client { 
    firstName: string; 
    lastName: string; 
    phone: number; 
    address1: string; 
    address2: string; 
  
    // ...ect 
  } 
  
  async updateClient(clientId: string) { 
    // create a "patch" of the object with only the fields you need to update. 
    const patch: Partial = { firstName: 'Larry', lastName: 'Smithwick' }; 
  
    // Some service that handles the http calls to the API. 
    const result = await this.clientService.updateClient(clientId, patch); 
  } 
 

This is great as we no longer have to maintain a second model for what is often a very limited scope. If either prop used is changed IntelliSense will still step and let us know that something is up since we still get to keep type safety.

2# Pick<T,U>

Sometimes a type can be very large and it can be difficult and cumbersome to find the property we need. Often it is best to limit the scope of data passed to our components to hide unnecessary details and prevent mistakes. Pick allows us to do just in a type-safe manner by removing only the properties we need into a new type.

 interface Account { 
    id: string; 
    client: Client; 
    blogs: Blog[]; 
    settings: AccountSettings; 
  
    // potentially MANY more properties. 
  } 
  
  type BlogsAndSettings = Pick ; 
  
  const blogs: BlogsAndSettings = { 
    blogs: account.blogs, 
    settings: account.settings, 
  }; 
 

Using intersection types we can even take only the properties we need from multiple types.

 interface Client { 
    id: string; 
    firstName: string; 
    lastName: string; 
    address1: string; 
    address2: string; 
  } 
  
  interface Blog { 
    id: string; 
    content: string; 
    title: string; 
    likes: number; 
  } 
  
  // "Client & Blog" creates a type with all properties of both. We then pass a string for each property we want.  
  // Even though we are using strings IntelliSense is still able to check our use of property names. 
  
  type BlogPreview = Pick ; 
  
  const blogPreview: BlogPreview = { 
    title: 'Utilizing Typescript Utility Types', 
    firstName: 'Larry', 
    lastName: 'Smithwick', 
  }; 
 

3# Omit<T,K>

Now let's say we are in a part of the application that deals with sensitive info. We need to send some of this info somewhere else to be displayed but want to make sure parts of it are left out. We could create another model with only the allowed properties OR we could just omit the ones we don't want.

 interface Client { 
    id: string; 
    firstName: string; 
    lastName: string; 
    address1: string; 
    address2: string; 
    socialSecurity: number; 
    creditCards: CreditCard[]; 
  } 
  
  interface Blog { 
    id: string; 
    content: string; 
    title: string; 
    likes: number; 
  } 
  
  type BlogPreview = Omit ; 
  
  const blogPreview: BlogPreview = { 
    title: 'Utilizing Typescript Utility Types', 
    firstName: 'Larry', 
    lastName: 'Smithwick', 
    creditCards: [], // We get an error on this line since creditCard is not a prop of BlogPreview. 
  }; 
 

4# Required<T>

Sometimes we need to fill out a model that has multiple optional types that need to be required for specific functions. Required is the opposite of Partial in that it takes every property of T and makes it required.

 interface Client { 
    firstName: string; 
    lastName: string; 
    phone?: number; 
  } 
  
  function createAccount(client: Required ) { 
    // creates account 
  } 
  
  const client1: Client = { 
    firstName: 'Larry', 
    lastName: 'Smithwick', 
  }; 
  
  // Error types of property 'phone' are incompatible. 
  createAccount(client); 
  
  const client2: Required = { 
      firstName: 'Larry', 
      lastName: 'Smithwick', 
      phone: 9078675309 
  } 
  
  // Accepts parameters without error. 
  createAccount(client2); 
 
 

Utility types are a great option to consider whenever your about to create a similar type of something you already have and helps save us from resorting to using the "any" type in our code. In fact, between utility types, intersections, and unions you will almost never need it. These tools will help keep your code DRY and type-safe at the same time.

Good luck! And remember, (type) safety first!