💪🏼 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;
}
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
- Created At
- 11/23/2018
- Updated At
- 9/15/2023
- Published At
- 11/23/2018