Typescript

💡

This page contains TS snippets that I usually use.

Tips & Tricks

Site Name	Description
Typescript Clean Code (opens in a new tab)	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,
}

Video Resources


(opens in a new tab)	(opens in a new tab)
(opens in a new tab)

Starter Template ESLint and Prettier Config