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
}
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))
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))
Maybe some contrubution will help
https://github.com/Microsoft/TSJS-lib-generator/pull/622
 

 
    
Top comments (0)