question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add a generic type argument to `fetch()` function and `Body` interface

See original GitHub issue

The generic type argument would add depth and consistency to the fetch types.

Expected behavior (example):

Generated definitions:

interface Body<T = any> {
    readonly bodyUsed: boolean;
    arrayBuffer(): Promise<ArrayBuffer>;
    blob(): Promise<Blob>;
    formData(): Promise<FormData>;
    json(): Promise<T>;
    text(): Promise<string>;
}

interface Request<T = any> extends Body<T> {...}
interface Response<T = any> extends Body<T> {...}
...

interface GlobalFetch {
    fetch<T>(input?: Request | string, init?: RequestInit): Promise<Response<T>>;
}

Usage with type:

type MyFetchResponse = { a: string, b: number };
fetch<MyFetchResponse>('https://someserver.com/get?a=string&b=number').then(response => {
  response.json().then(data => {
    // data is MyFetchResponse

    // Both of these are autocompleted at this point
    data.a
    data.b

    data.c //Error: Property 'c' does not exist on type MyFetchResponse
  })
})

Usage without types (same as current):

fetch('https://someserver.com/get?a=string&b=number').then(response => {
  response.json().then(data => {
    // data is any
    data.a
    data.b

    data.c //No error here
  })
})

Actual behavior:

fetch('https://someserver.com/get?a=string&b=number').then(response => {
  response.json().then(data => {
    // data is any
    data.a
    data.b

    data.c //No error here
  })
})

Motivation:

The proposed change would make the usage of fetch much more convenient in typed code without the need for unnecessary castings and overrides.

This change will not brake any other definitions relying on Body, Request and Response interfaces due to the use of optional generic arguments. Therefore, in current definitions, declare var a: Response will automatically evaluate to declare var a: Response<any> thus making the change backward-compatible.

P.S. Creating an issue instead of the pull request because I’m not familiar with WIDL syntax that’s used here and I coudn’t find any explanatory documentation on it.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
viceicecommented, May 9, 2018

The only information i found for editing the files are from here:

Microsoft/TypeScript/blob/master/CONTRIBUTING.md#contributing-libdts-fixes

Microsoft/TSJS-lib-generator#contribution-guidelines

You have to edit the json files at the inputfiles folder.

0reactions
iamandrewlucacommented, Jan 23, 2019
Read more comments on GitHub >

github_iconTop Results From Across the Web

Add type generic to fetch() · Issue #1198 · nodejs/undici - GitHub
I think the argument that a type generic feels safer when it actually isn't is just a misconception as a person who is...
Read more >
How add field according to generic type value in TypeScript?
The idea is to enforce the the correct type params and body . If I add both generic types to PostOptions and DefaultOptions...
Read more >
Using fetch with TypeScript - Kent C. Dodds
When migrating some code to TypeScript, I ran into a few little hurdles I want to share with you. The use case: In...
Read more >
Understanding TypeScript Generics | Generics Simplified
We have the apiRequest function, which takes in three arguments: url of type string, method of "get" and "post" string literal types, and...
Read more >
How to Use fetch with TypeScript -- newline - Fullstack.io
The fetch function is not generic. · To type the response result we need to create a wrapper generic-function ourselves. · We can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found