Helpful TypeScript Utility Types.

Sun Oct 29 2023

TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally. This utilty types helps and makes our lifes easier by avoiding bunch of any type in our code. lets undertand this utility types by few real case scenarios.

Example 1 : Infer the return type of function.

import { helper } from "npm-package";
// type FnReturns = ??????

in above case if you want to infer return type of helper which is a function provided by some package then how would you do it? So you can use ReturnType utility type and can easily infer the type of function. This can also be done to normal function and reduce creating new types and importing it to multiple places.

import { helper } from "npm-package";
// easily infer type of what type function returns
type FnReturns = ReturnType<typeof helper>;

Note :

Note that this only takes function as type to produce return type.

Example 2 : Infer a function parameters type.

If you want to infer to parameters type of a function you can use Parameters utility type to easily infer the parameters of a function.

function JSONStringify(...args: Parameters<typeof JSON.stringify>) {
  return JSON.stringify(...args);
}

Note :

Note that this only takes function as type to produce parameters type.

Example 3 : Remove or omit few properties in a type.

If you have a type already defined and you want to make a type simlar but want to omit few properties of the type then we can use Omit utility type to do this.

type MDXFrontmatter = {
  title: string;
  slug: string;
  description: string;
  author: string;
  published: number;
  tags: string[];
  githubUrl?: string;
};

// Nah... redundant code (bad idea ❌)
type PageProps = {
  title: string;
  slug: string;
  description: string;
  author: string;
  published: number;
};

// Good idea ✅
type PageProps = Omit<MDXFrontmatter, "githubUrl" | "tags">;

Note :

Note that this only work with object types.

Example 4 : Pick only few properties from a type defined

Its very similar to Omit type. If you have a type already defined and you want to make a type simlar but only pick few properties of the type then we can use Pick utility type.

type Something = {
  posts: MarkdownPost[];
  total: number;
  authors: Authors[];
};

// Nah... redundant code (bad idea ❌)
type CustomType = {
  posts: MarkdownPost[];
};

// Good idea ✅
type CustomType = Pick<Something, "posts">;

Note :

Note that this only work with object types.

Example 5 : Make all property of a type optional.

If you have a type and you want to derive a type from that by keeping all properties as optional then instead of creating new type use the Partial helper type.

type Pagination = {
  page: number;
  size: number;
};

// Nah... redundant code (bad idea ❌)
type OptionalPagination = {
  page?: number;
  size?: number;
};

// Good idea ✅
type CustomType = Partial<Pagination>;

Note :

Note that this only work with object types.

Example 6 : Make all property of a type required.

If you have a type and you want to derive a type from that by keeping all properties as optional then instead of creating new type use the Partial helper type.

type User = {
  avatar?: string;
  email: string;
  bio?: string;
};

// Nah... redundant code (bad idea ❌)
type RequiredTypeUser = {
  avatar: string;
  email: string;
  bio: string;
};

// Good idea ✅
type RequiredTypeUser = Required<User>;

Note :

Note that this only work with object types.

Example 7 : Key value pair type.

If you want to have an object with all key of same type and all value of object same type then you can annotate your object as Record type.

type UserNameAndRatings = Record<string, number>;
const data: UserNameAndRatings = {
  nisab: 5,
};
data.john = 3;

Explore utility types such as Awaited,Readonly and more from TypeScript Docs