7 Utility Types that Every TypeScript Developer Should Know

Juno Ng
JavaScript in Plain English
3 min readAug 11, 2021

--

Photo by Martin Adams on Unsplash

The type system in TypeScript is very powerful. It provides type safety and documentation to JavaScript programs and allow them to scale with ease and speed. While the type system is so helpful and loved, it can also leave our code messy if we do not plan and design the types and interfaces.

Generics

Whatever benefits we obtain from avoiding repetition in code, we can obtain from creating reusable types as well. Much like creating functions for repetitive logics, generics is a TypeScript feature that allows us to write reusable types.

Let’s look at an example:

By placing the right type into the generics of Add, it can be used to describe the summation of two numbers or the concatenation of two strings. Instead of writing a type for each function, we only need to do it once with generics. It does not only save us efforts, but also makes our code cleaner and less prone to errors.

Utility Types

TypeScript natively provides several useful utility types to help us with some common type transformations. These utility types are globally available and they all make use of generics.

Here below are 7powerful yet easy to use utility types that every TypeScript developer should know.

1. Pick<Type, Keys>

The Pick utility type creates a new type by picking the set of properties Keys, which can be a string literal or union of string literals, from Type. The value of Keys has to be the keys of Type, otherwise TypeScript compiler will complain. This utility type is especially useful when you want to create lighter objects by picking certain properties from objects with a lot of properties.

2. Omit<Type, Keys>

The Omit utility type is the opposite of Pick. Instead of stating what properties to keep, Keys refers to the set of properties keys to be omitted. It is more useful when you only want to get rid of certain properties from an object and keep the others.

3. Partial<Type>

The Partial utility type constructs a type with all properties of Type set to optional. It can be very useful when we are writing the update logic of an object.

4. Required<Type>

The Required utility type does the opposite of Partial. It constructs a type with all properties of Type set to required. It can be used to ensure that no optional properties appear in a type.

5. Readonly<Type>

The Readonly utility type construct a type with all properties of Type set to read only. Reassigning new values to its variable and properties will result in TypeScript warning.

6. Record<Keys, Type>

The Record utility type constructs an object type with property keys from Keys and value of type Type.

7. ReturnType<Type>

The ReturnType utility type constructs a type from the return type of a function type. It is useful when we are handling function types from external libraries and want to build custom types based on them.

Apart from the abovementioned, there are also other utility types that can help TypeScript developers write cleaner and “DRY-er” types. The link to the TypeScript documentation on Utility Types can be found here.

Conclusion

Utility types are very useful features provided by TypeScript. Developers should make use of them to avoid hardcoding types.

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Interested in scaling your software startup? Check out Circuit.

--

--