13 Typescript Utility Types: A Developer's Cheat Sheet

Author: Rahul Sharma
Translator: Front-end Xiaozhi Source: dev

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

As an example, you have 2 response types.

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

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

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

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

Let's take a look at some useful functions that can help you write better code.

Uppercase

Constructs a type with all properties 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 set to lowercase. Contrary to Uppercase.

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

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

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

Capitalize

Builds a type with all properties set to the type starting with uppercase.

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

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

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

Uncapitalize

Builds a type with all properties set to non-capitalized types. 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

Builds a type with all properties set to optional type.

 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

Construct a type consisting of all properties of Type, set as required. Contrary to 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 read-only.

 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

Record is a great tool type. It will map all property values of one type to another type and create a new type,

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

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

// 或者
type AddressesRecord = Record<"home" | "office", Address>;

Pick

From a composite type, take a combination of several desired types

 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

Supports culling certain properties based on a type and returns a new type.

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

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

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

Exclude

Exclude<T, U> , this tool type can remove all types that can be assigned to type U from type T.

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

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

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

Extract

The function of Extract, contrary to Exclude, is to extract the types in T that can be assigned to U.

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

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

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

NonNullable

Builds a type with all properties set to non-null.

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

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

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

The bugs that may exist in editing cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, here is a useful BUG monitoring tool , Fundebug .

Original: https://dev.to/devsmitra/13-typescrit-utility-a-cheat-sheet-for-developer-ab3

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.