13 Typescript Utility: A Cheat Sheet for Developer

This content originally appeared on DEV Community and was authored by Rahul Sharma

Typescript is very powerful in terms of type checking, but sometime it gets tedious when some types are subsets of other types and you need to define type checking for them.

Let say you have 2 response types:

UserProfileResponse

interface UserProfileResponse {
  id: number;
  name: string;
  email: string;
  phone: string;
  avatar: string;
}

LoginResponse

interface LoginResponse {
  id: number;
  name: string;
}

Instead of defining types of same context LoginResponse and UserProfileResponse, we can define type for UserProfileResponse and pick some properties for LoginResponse.

type LoginResponse = Pick<UserProfileResponse, "id" | "name">;

Let's understand some utility functions that can help you with this.

Uppercase

Constructs a type with all properties of Type set to uppercase.

type Role = "admin" | "user" | "guest";

// Bad practice 💩
type UppercaseRole = "ADMIN" | "USER" | "GUEST";

// Good practice ✅
type UppercaseRole = Uppercase<Role>; // "ADMIN" | "USER" | "GUEST"

Lowercase

Constructs a type with all properties of Type set to lowercase. Opposite of Uppercase.

type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type LowercaseRole = "admin" | "user" | "guest";

// Good practice ✅
type LowercaseRole = Lowercase<Role>; // "admin" | "user" | "guest"

Capitalize

Constructs a type with all properties of Type set to capitalize.

type Role = "admin" | "user" | "guest";

// Bad practice 💩
type CapitalizeRole = "Admin" | "User" | "Guest";

// Good practice ✅
type CapitalizeRole = Capitalize<Role>; // "Admin" | "User" | "Guest"

Uncapitalize

Constructs a type with all properties of Type set to uncapitalize. Opposite of Capitalize.

type Role = "Admin" | "User" | "Guest";

// Bad practice 💩
type UncapitalizeRole = "admin" | "user" | "guest";

// Good practice ✅
type UncapitalizeRole = Uncapitalize<Role>; // "admin" | "user" | "guest"

Partial

Constructs a type with all properties of Type set to optional.

interface User {
  name: string;
  age: number;
  password: string;
}

// Bad practice 💩
interface PartialUser {
  name?: string;
  age?: number;
  password?: string;
}

// Good practice ✅
type PartialUser = Partial<User>;

Required

Constructs a type consisting of all properties of Type set to required. Opposite of Partial.

interface User {
  name?: string;
  age?: number;
  password?: string;
}

// Bad practice 💩
interface RequiredUser {
  name: string;
  age: number;
  password: string;
}

// Good practice ✅
type RequiredUser = Required<User>;

Readonly

Constructs a type consisting of all properties of Type set to readonly.

interface User {
  role: string;
}

// Bad practice 💩
const user: User = { role: "ADMIN" };
user.role = "USER";

// Good practice ✅
type ReadonlyUser = Readonly<User>;
const user: ReadonlyUser = { role: "ADMIN" };
user.role = "USER"; // Error: Cannot assign to 'role' because it is a read-only property.

Record

Constructs a type with a set of properties K of type T. Each property K is mapped to the type T.

interface Address {
  street: string;
  pin: number;
}

interface Addresses {
  home: Address;
  office: Address;
}

// Alternative ✅
type AddressesRecord = Record<"home" | "office", Address>;

Pick

Pick only the properties of Type whose keys are in the union type keys.

interface User {
  name: string;
  age: number;
  password: string;
}

// Bad practice 💩
interface UserPartial {
  name: string;
  age: number;
}

// Good practice ✅
type UserPartial = Pick<User, "name" | "age">;

Omit

Omit only the properties of Type whose keys are in the union type keys.

interface User {
  name: string;
  age: number;
  password: string;
}

// Bad practice 💩
interface UserPartial {
  name: string;
  age: number;
}

// Good practice ✅
type UserPartial = Omit<User, "password">;

Exclude

Constructs a type with all properties of Type except for those whose keys are in the union type Excluded.

type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type NonAdminRole = "USER" | "GUEST";

// Good practice ✅
type NonAdmin = Exclude<Role, "ADMIN">; // "USER" | "GUEST"

Extract

Constructs a type with all properties of Type whose keys are in the union type Extract.

type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type AdminRole = "ADMIN";

// Good practice ✅
type Admin = Extract<Role, "ADMIN">; // "ADMIN"

NonNullable

Constructs a type with all properties of Type set to non-nullable.

type Role = "ADMIN" | "USER" | null;

// Bad practice 💩
type NonNullableRole = "ADMIN" | "USER";

// Good practice ✅
type NonNullableRole = NonNullable<Role>; // "ADMIN" | "USER"

Must Read If you haven't

28 Javascript Array Methods: A Cheat Sheet for Developer

How to solve Express.js REST API routing problem with decorators?

3 steps to create state management library with React Hooks and Context API

Catch me on Github, Twitter, LinkedIn, Medium, and Stackblitz.

This content originally appeared on DEV Community and was authored by Rahul Sharma

Print Share Comment Cite Upload Translate Updates

APA

Rahul Sharma | Sciencx (2022-04-02T07:15:44+00:00) 13 Typescript Utility: A Cheat Sheet for Developer. Retrieved from https://www.scien.cx/2022/04/02/13-typescript-utility-a-cheat-sheet-for-developer/

MLA

" » 13 Typescript Utility: A Cheat Sheet for Developer." Rahul Sharma | Sciencx - Saturday April 2, 2022, https://www.scien.cx/2022/04/02/13-typescript-utility-a-cheat-sheet-for-developer/

HARVARD

Rahul Sharma | Sciencx Saturday April 2, 2022 » 13 Typescript Utility: A Cheat Sheet for Developer., viewed ,<https://www.scien.cx/2022/04/02/13-typescript-utility-a-cheat-sheet-for-developer/>

VANCOUVER

Rahul Sharma | Sciencx - » 13 Typescript Utility: A Cheat Sheet for Developer. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/02/13-typescript-utility-a-cheat-sheet-for-developer/

CHICAGO

" » 13 Typescript Utility: A Cheat Sheet for Developer." Rahul Sharma | Sciencx - Accessed . https://www.scien.cx/2022/04/02/13-typescript-utility-a-cheat-sheet-for-developer/

IEEE

" » 13 Typescript Utility: A Cheat Sheet for Developer." Rahul Sharma | Sciencx [Online]. Available: https://www.scien.cx/2022/04/02/13-typescript-utility-a-cheat-sheet-for-developer/. [Accessed: ]

rf:citation

» 13 Typescript Utility: A Cheat Sheet for Developer | Rahul Sharma | Sciencx | https://www.scien.cx/2022/04/02/13-typescript-utility-a-cheat-sheet-for-developer/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.