HerrZatacke
HerrZatacke

Reputation: 283

How to fix Typescript compilation error ts2345 "Type 'Response' is missing ... from type 'Response': redirected, trailer, formData!"

I am trying to make a request using node-fetch in my typescript project and I do not understand how to fix the compilation error or what it actually tries to tell me.

I've updated all packages (including the global typescript package) to the latest versions.

I've created a gist that isolates the error: https://gist.github.com/HerrZatacke/ae90f608e042864b6e00e9c73a950602

This (very short) script is able to reproduce the compilation error:

import fetch from 'node-fetch';

const toJson = (response: Response):PromiseLike<object> => (
  response.json()
);

const makeSomeRequest = (): Promise<object> => {
  return fetch('https://some-api.com/')
    .then(toJson)
};

makeSomeRequest();

The installed versions used are

@types/node-fetch 2.3.7
node-fetch2.6.0
typescript 3.5.2

the actual error is

example.ts:9:11 - error TS2345: Argument of type '(response: Response) => PromiseLike<object>' is not assignable to parameter of type '(value: Response) => object | PromiseLike<object>'.
  Types of parameters 'response' and 'value' are incompatible.
    Type 'Response' is missing the following properties from type 'Response': redirected, trailer, formData

Upvotes: 6

Views: 6116

Answers (1)

HerrZatacke
HerrZatacke

Reputation: 283

With the help/hints of the two commenters above (thanks a lot), I managed to find the reason and a solution for that error:

Typescript initially tries to "guess" which types you are using.

The following line states I want to use the type response, which is an interface of the native Fetch API

const toJson = (response: Response): Promise<object> => {

the type definition for it can be found in lib.dom.d.ts

node-fetch instead is implementing it's own Response type from @types\node-fetch\index.d.ts

So, if the correct response type is being imported first, the typescript compiler runs without the error.

Which means, instead of just importing node-fetch, you also have to import it's definition of Response:

import fetch, { Response } from 'node-fetch';

Upvotes: 18

Related Questions