Typescript
💡
This page contains TS snippets that I usually use.
Tips & Tricks
Site Name | Description |
---|---|
Typescript Clean Code | Clean Code Docs for Typescript |
Format Date
export const formatDate = (date: string | Date, time = true): string => { const convertedDate = new Date(date)
const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric', }
const optionsWithoutTime: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric', }
return convertedDate.toLocaleDateString( 'en-EN', time ? options : optionsWithoutTime )}
Frequent Axios snippets
Reusable Fetcher Function
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
export const fetcher = <ResType, ReqType>( url: string, params?: AxiosRequestConfig['params'], headers?: AxiosRequestConfig['headers'], data?: ReqType | AxiosRequestConfig['data'], method: AxiosRequestConfig['method'] = 'GET') => axios(url, { params, headers, data, method }).then( (res: AxiosResponse<ResType>) => res.data )
GET Request
export const getAPI = <ResType, ReqType = undefined>( url: string, params?: AxiosRequestConfig['params'], headers?: AxiosRequestConfig['headers'], body?: ReqType | AxiosRequestConfig['data']) => fetcher<ResType, ReqType>(url, params, headers, body, 'GET')
POST Request
export const postAPI = <ResType, ReqType>( url: string, params?: AxiosRequestConfig['params'], headers?: AxiosRequestConfig['headers'], body?: ReqType | AxiosRequestConfig['data'], method: AxiosRequestConfig['method'] = 'POST') => fetcher<ResType, ReqType>(url, params, headers, body, method)
Most Used Utility Types
Partial
Constructs a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type.
type Todo = { title: string description: string}
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) { return { ...todo, ...fieldsToUpdate }}
const todo1 = { title: 'organize desk', description: 'clear clutter',}
const todo2 = updateTodo(todo1, { description: 'throw out trash',})
Required
Constructs a type consisting of all properties of Type set to required. The opposite of Partial.
type Props = { a?: number b?: string}
const obj: Props = { a: 5 }
const obj2: Required<Props> = { a: 5 }// Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.
Pick
Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.
type Todo = { title: string description: string completed: boolean}
type TodoPreview = Pick<Todo, 'title' | 'completed'>
const todo: TodoPreview = { title: 'Clean room', completed: false,}
Omit
Constructs a type by picking all properties from Type and then removing Keys (string literal or union of string literals).
type Todo = { title: string description: string completed: boolean createdAt: number}
type TodoPreview = Omit<Todo, 'description'>
const todo: TodoPreview = { title: 'Clean room', completed: false, createdAt: 1615544252770,}