This page looks best with JavaScript enabled

Typescript: Five most useful utility types for React

 ·  ☕ 3 min read  ·  ✍️ Iskander Samatov

Utility types for React


In this post, I will cover five TypeScript utility types practical in React applications.

What are Utility types?

When working with TypeScript, you’ll often need to construct new types on top of the existing ones. Creating new types this way has several advantages:

  • Adhering to the DRY principle. Reusing the types you already have to build new ones means less redundancy and repetition in your code.
  • Keeping your types in sync on changes. When you need to change the properties of some underlying type, the types that derive from it will also adopt the change.


As you might know, TypeScript has union and intersection types that people often use to construct new types. But TypeScript also ships a number of powerful utility types that are a better choice for handling more nuanced edge cases.

Utility types for React

keyof

Strictly speaking, keyof is an operator, not a utility type, but it’s used in a similar fashion. keyof creates a union type consisting of the property names of the type you pass. keyof is perfect for enforcing using the existing keys of the object:

keyof

When you assign PostKeysType to a variable, that variable can only have a value of author, title, or content.

Partial

Partial will return a new type with all of the props set to optional. It’s great for passing around a dynamic set of props where you don’t know in advance all the props you might receive:

Partial

We’re setting the fieldsToUpdate type to Partial<Post>. That allows passing an object with dynamic fields, as long as they are part of the Post type.

Pick

You can use Pick to create a new type by specifying which properties you would like to copy. To pick the properties, you pass a union type:

Pick

The advantage of creating types this way is that you keep your types in sync. Changes to the properties of the parent type are automatically adopted by the derived one.

Omit

Think of Omit as the opposite of Pick. Rather than picking the set of props that you want to copy, you provide a set of properties you want to omit from the type. Omit will copy all the props, except for the ones you passed:

Omit

Exclude

Exclude works similarly to Omit with one big difference - it works with union types. When you apply Exclude to a union type, it removes a constituent of that union.

Exclude

Conclusion

In this post, we covered the TypeScript utility types you are most likely to use when working on React projects. However, we’ve only scratched the surface with the utility types. There are many more utility types that TypeScript provides, and you can take a look at the exhaustive list here .

Happy coding!

Share on

Software Development Tutorials
WRITTEN BY
Iskander Samatov
The best up-to-date tutorials on web and mobile development.