💪🏼 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