13 Typescript Utility: A Cheat Sheet for Developer
source link: https://dev.to/devsmitra/13-typescript-utility-a-cheat-sheet-for-developer-ab3
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Posted on Apr 2
13 Typescript Utility: A Cheat Sheet for Developer
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 take an example, you have 2 response types:
UserProfileResponse
interface UserProfileResponse {
id: number;
name: string;
email: string;
phone: string;
avatar: string;
}
Enter fullscreen mode
Exit fullscreen mode
LoginResponse
interface LoginResponse {
id: number;
name: string;
}
Enter fullscreen mode
Exit fullscreen mode
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">;
Enter fullscreen mode
Exit fullscreen mode
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"
Enter fullscreen mode
Exit fullscreen mode
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"
Enter fullscreen mode
Exit fullscreen mode
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"
Enter fullscreen mode
Exit fullscreen mode
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"
Enter fullscreen mode
Exit fullscreen mode
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>;
Enter fullscreen mode
Exit fullscreen mode
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>;
Enter fullscreen mode
Exit fullscreen mode
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.
Enter fullscreen mode
Exit fullscreen mode
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>;
Enter fullscreen mode
Exit fullscreen mode
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">;
Enter fullscreen mode
Exit fullscreen mode
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">;
Enter fullscreen mode
Exit fullscreen mode
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"
Enter fullscreen mode
Exit fullscreen mode
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"
Enter fullscreen mode
Exit fullscreen mode
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"
Enter fullscreen mode
Exit fullscreen mode
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
More content at Dev.to.
Catch me on Github, Twitter, LinkedIn, Medium, and Stackblitz.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK