typescirpt

 

7 Utility Types that Every TypeScript Developer Should Know

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:

type Add<T> = (a: T, b: T) => T

const addNumbers: Add<number> = (a, b) => {

  return a + b

}

const addStrings: Add<string> = (a, b) => {

  return a + b

}

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.

type User = {
	name: string
	age: number
	address: string
	occupation: string
	}
	type BasicUser = Pick<User, "name" | "age">
	// type BasicUser = {
	// name: string;
	// age: number;
	// }

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.

type User = {
	name: string
	age: number
	address: string
	occupation: string
	}
	type BasicUser = Omit<User, "address" | "occupation">
	// type BasicUser = {
	// name: string;
	// age: number;
	// }

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.

type User = {
	name: string
	age: number
	address: string
	occupation: string
	}
	type PartialUser = Partial<User>
	// type PartialUser = {
	// name?: string;
	// age?: number;
	// address?: string;
	// occupation?: string;
	// }

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.

type PartialUser = {
	name: string
	age: number
	address?: string
	occupation?: string
	}
	type User = Required<PartialUser>
	// type User = {
	// name: string;
	// age: number;
	// address: string;
	// occupation: string;
	// }

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.

type User = {
	name: string
	age: number
	address: string
	occupation: string
	}
	type ReadOnlyUser = Readonly<User>
	const user: ReadOnlyUser = {
	name: "Peter",
	age: 24,
	address: "Toronto",
	occupation: "software_engineer"
	}
	user.name = "Tom"
	// Cannot assign to 'name' because it is a read-only property.

6. Record<Keys, Type>

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

type User = {
	name: string
	age: number
	address: string
	occupation: string
	}
	type Team = Record<"player1" | "player2", User>
	// type Team = {
	// player1: User;
	// player2: User;
	// }

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.

import axios from 'axios'
	type Response = ReturnType<typeof axios>
	function callAPI(): Response{
	return axios("url")
	}

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.