DEV Community

Cover image for TypeScript Utility Types: The 6 Most Useful
Sachin Chaurasiya
Sachin Chaurasiya

Posted on • Updated on • Originally published at blog.sachinchaurasiya.dev

TypeScript Utility Types: The 6 Most Useful

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" }
 }
Enter fullscreen mode Exit fullscreen mode

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.'
}

Enter fullscreen mode Exit fullscreen mode

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"
}

Enter fullscreen mode Exit fullscreen mode

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">;
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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 , 'πŸ˜„' |  'πŸŽ‰' | 'πŸ˜•' | '❀️' | 'πŸ‘€' | 'πŸš€'>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (8)

Collapse
peerreynders profile image
peerreynders

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)."

Collapse
brense profile image
Rense Bakker

I should really use the Record pattern more... I keep doing type {[ key:string ]: any } because I got used to it πŸ˜…

Collapse
sachinchaurasiya profile image
Sachin Chaurasiya Author

Great @brense .

Collapse
hossamgouda profile image
HossamGouda

GREAT

Collapse
baptistefkt profile image
Baptiste Firket

Very useful. Thanks!!

Collapse
thec0def0x profile image
CodeFox

Kicking myself for not knowing about partial sooner. That will come in very handy, thank you πŸ‘Œ

Collapse
andrewbaisden profile image
Andrew Baisden

Anything TypeScript is worth reading imo.

Collapse
sachinchaurasiya profile image
Sachin Chaurasiya Author

Indeed