DEV Community

Andrew
Andrew

Posted on • Updated on

Typed fetch Response in TypeScript

Currently TypeScript lib.dom.d.ts does not implement Typed fetch response
https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L2230
Bellow you can see how we can override that

interface TypedResponse<T = any> extends Response {
  /**
   * this will override `json` method from `Body` that is extended by `Response`
   * interface Body {
   *     json(): Promise<any>;
   * }
   */
  json<P = T>(): Promise<P>
}

interface Payload {
  id: number
}
Enter fullscreen mode Exit fullscreen mode

Firsth method

function myFetch<T>(...args: any): Promise<TypedResponse<T>> {
  return fetch.apply(window, args)
}

myFetch<Payload>('/')
  .then(response => response.json())
  // here data will have Payload type
  .then(data => console.log(data.id))
// or
myFetch('/')
  .then(response => response.json<Payload>())
  // here data will have Payload type
  .then(data => console.log(data.id))
Enter fullscreen mode Exit fullscreen mode

Second method. I like first one

declare function fetch<T>(...args: any): Promise<TypedResponse<T>>

fetch<Payload>('/')
  .then(response => response.json())
  // here data will have Payload type
  .then(data => console.log(data.id))
// or
fetch('/')
  .then(response => response.json<Payload>())
  // here data will have Payload type
  .then(data => console.log(data.id))
Enter fullscreen mode Exit fullscreen mode

Maybe some contrubution will help
https://github.com/Microsoft/TSJS-lib-generator/pull/622

Discussion (3)

Collapse
iamandrewluca profile image
Andrew Author

Hmm, I will look into it :)

Collapse
iamandrewluca profile image
Andrew Author

You can give a read to this also
kentcdodds.com/blog/using-fetch-wi...