Typescript

Tips & Tricks#

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#