Typescript

💡
This page contains TS snippets that I usually use.

Tips & Tricks

Site NameDescription
Typescript Clean CodeClean 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,
}

Video Resources

React TypescriptTS in 100 seconds
TS in Literal Magic