Typescript
Typescript tips and tricks
Stiven Castillo
May 07, 2022
Choose some properties with Pick
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, we have 2 types of response:
interface UserResponse {
id: number;
name: string;
email: string;
phone: string;
age: number;
}
interface SignInResponse {
id: number;
name: string;
token: string;
}
Instead of defining types of the same context SignInResponse
and UserResponse
, we can define the type for UserResponse
and choose some properties for SignInResponse
. Let’s see:
interface SignInResponse extends Pick<UserResponse, "id" | "name"> {
token: string;
};
Uppercase / Lowercase
type Role = "admin" | "user" | "guest";
type UppercaseRole = Uppercase<Role>; // "ADMIN" | "USER" | "GUEST"
type Role = "ADMIN" | "USER" | "GUEST";
type LowercaseRole = Lowercase<Role>; // "admin" | "user" | "guest"
Lo mismo sería con Capitalize
y Uncapitalize
Optional properties with Partial
Creates a type with all properties of Type set as optional.
interface Product {
name: string;
price: number;
units: number;
}
type PartialProduct = Partial<Product>;
// It's like to do
interface PartialProduct {
name?: string;
price?: number;
units?: number;
}
For the opposite effect is used Required<Product>
Record
interface User {
id: number;
name: string;
lastName: string
}
interface Book {
createdBy: User;
updatedBy: User;
}
type BookRecord = Record<"createdBy" | "updatedBy", User>;