Sachin Chaurasiya

Posted on Jun 20, 2022 • Edited on Jun 24, 2022 • Originally published at blog.sachinchaurasiya.dev

TypeScript Utility Types: The 6 Most Useful

#javascript #typescript #react #webdev

I have been working with typescript for almost a year now, and I have learned and implemented a lot in this time. Among the things, I enjoy most about typescript are the utility types that allow me to write better code, so today I will discuss the 6 most useful utility types that will help you write better code.

So let's get started,

Record

If you want to construct an object type with a set of properties keys of type types then the Record is the best utility type to use.

Example

You want to create an object type to store the user's information, here you can use the Record utility to achieve the same.

// Our user ID will be a string
type UserID = string

// Defining our available user information types
type UserInfo = {
  name: string;
  email: string;
  avatarUrl: string;
}

const users: Record<UserID, UserInfo> = {
 "uuid1": { "name": "user1", "email": "user1@gmail.com", "avatarUrl": "https://user1.com/avatar.png" },
 "uuid2": { "name": "user2", "email": "user2@gmail.com", "avatarUrl": "https://user2.com/avatar.png" },
 "uuid3": { "name": "user3", "email": "user3@gmail.com", "avatarUrl": "https://user3.com/avatar.png" }
 }

If you try to add any other type that does not exist in the UserInfo type, the typescript will give a compile error.

Partial

The Partial utility type is very useful when you want to use an existing type but want all the properties to be optional.

Example

Suppose you want to update a property of the user and you already have a user interface with all the properties required, but you don't want to create a separate interface for updating the user information. Using the Partial utility, you can dynamically create a type with all the properties as optional.

// User interface with all required properties
interface User{
 id:string;
 name: string;
 slug: string;
 group: string[];
 avatarUrl: string;
 about: string;
}

// Partial<User> generates a new type based on User with all the property
// keys being optional
const updateUser: Partial<User> = {
  about: 'I am a software engineer.'
}

Required

The Required utility type is exactly the opposite of the Partial utility type and is very useful when you want to use an existing type but want all the properties to be required.

Example

In some cases, you may want to enforce that an object has all the required properties, even if the original type defines some of them as optional.

// User type has lastName property as optional
type User = {
    firstName: string,
    lastName?: string
}

// You want to create a user with both firstName and lastName, so you can use User type with Required utility type to make all the properties as required.
const user1: Required<User> = {
    firstName: "John",
    lastName: "Doe"
}

Omit

Omit utility type can be used to create an object type by omitting specific properties from another object type.

Example

Let's say you have an object type user with some properties X, Y and Z. If you want to create an object type without property Z, then you can use this utility type.

type Product = {
  X: string;
  Y: string;
  Z: string;
}

type ProductWithoutZ = Omit<Product, "Z">;

Pick

With the Pick utility type, you can pick properties from an existing type to create a new type.
When you have a child component that has some properties in common with the parent component, you can create a type for the child by picking those properties.

Example

type ParentType = {
  X: string;
  T: number;
  S: boolean;
}

type ChildType = Pick<ParentType, "X" | "S">

Exclude

When working with union type it's a common scenario that you want to use union type with only certain members not all, there you can use Exclude utility to achieve the same.

Example

type ReactionUnion = '👍' | '👎' | '😄' |  '🎉' | '😕' | '❤️' | '👀' | '🚀'

// This is equivivalent to  '👍' | '👎' 
type OnlyThumbsUnion = Exclude<ReactionUnion , '😄' |  '🎉' | '😕' | '❤️' | '👀' | '🚀'>

Summary

In this article, we discussed 6 TypeScript utility types that will help you write better typescript code.
More utility types are provided by TypeScript, you can check them out
here.

And that’s it for this topic. Thank you for reading.

Connect with me

LinkedIn | Twitter

Top comments (9)

peerreynders • Jun 20 '22

I f you want to construct an object type with a set of properties keys of type types then the Record is the best utility type to use.

Even the TypeScript documentation is sloppy here.

Ultimately Records are always based on plain JavaScript objects:

"All keys in the square bracket notation are converted to strings, unless they're Symbols. JavaScript object property names (keys) can only be strings or Symbols. … JavaScript will call the anotherObj.toString() method, and use this result string as the new key."

So TypeScript will also allow string | number as a Key type but the distinct values 10 and "10" will always map to the same key "10".

If it is necessary to use types other than string or Symbol as a Key consider using the Map type instead:

"A Map's keys can be any value (including functions, objects, or any primitive)."