Convert Fetch Wrapper to Typescript

Question

I want to convert this fetch wrapper to typescript: https://kentcdodds.com/blog/replace-axios-with-a-simple-custom-fetch-wrapper

export async function client(endpoint, { body, ...customConfig } = {}) {
  const headers = { 'Content-Type': 'application/json' }

  const config = {
    method: body ? 'POST' : 'GET',
    ...customConfig,
    headers: {
      ...headers,
      ...customConfig.headers,
    },
  }

  if (body) {
    config.body = JSON.stringify(body)
  }

  let data
  try {
    const response = await window.fetch(endpoint, config)
    data = await response.json()
    if (response.ok) {
      return data
    }
    throw new Error(response.statusText)
  } catch (err) {
    return Promise.reject(err.message ? err.message : data)
  }
}

client.get = function (endpoint, customConfig = {}) {
  return client(endpoint, { ...customConfig, method: 'GET' })
}

client.post = function (endpoint, body, customConfig = {}) {
  return client(endpoint, { ...customConfig, body })
}

However, I am confused about how to type the props. Like, how would one type { body, ...customConfig }?

Answer 1

Here is one way to do it:

export async function client(endpoint: RequestInfo, options?: RequestInit) {
  const { body, ...customConfig } = options ?? {}
  const headers = { 'Content-Type': 'application/json' }
  const config: RequestInit = {
    method: body ? 'POST' : 'GET',
    ...customConfig,
    headers: {
      ...headers,
      ...customConfig.headers,
    },
  }

  if (body) {
    config.body = JSON.stringify(body)
  }

  let data
  try {
    const response = await window.fetch(endpoint, config)
    data = await response.json()
    if (response.ok) {
      return data
    }
    throw new Error(response.statusText)
  } catch (err) {
    return Promise.reject(err.message ? err.message : data)
  }
}


client.get = function (endpoint: RequestInfo, customConfig?: RequestInit) {
  return client(endpoint, { ...customConfig, method: 'GET' })
}

client.post = function (endpoint: RequestInfo, body: BodyInit | null, customConfig?: RequestInit) {
  return client(endpoint, { ...customConfig, body })
}