Member-only story
13 Typescript Utility: A Cheat Sheet for Developer
Typescript is very powerful in terms of type checking, but sometimes it gets tedious when some types are subsets of other types and you need to define type checking for them.
Let's take an example, 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 the same context LoginResponse and UserProfileResponse, we can define the 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 to write better code.
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.
