typescript - When refactoring code into separate files, "TS2345: Argument of type is not assignable to parameter of type"

Question

I'm new to TypeScript and I'm refactoring my React app. I got the following error.

TS2345: Argument of type '{ standardHeaders: Headers; }' is not assignable to parameter of type 'RequestInit'.
  Object literal may only specify known properties, and 'standardHeaders' does not exist in type 'RequestInit'.

This is my original code, which works without any TypeScript errors:

  const headers = new Headers({
    Accept: 'application/vnd.api+json',
  });
  fetch(url, { headers })

Then I moved headers to a separate file because it is used in several places:

globals.tsx

export const standardHeaders = new Headers({
  Accept: 'application/vnd.api+json',
});

myfile.tsx

import { standardHeaders } from '../globals';
fetch(url, { standardHeaders })

This causes the "type is not assignable to parameter" error.

I assume I need to set the type of standardHeaders somehow, but how do I do that?

question from:https://stackoverflow.com/questions/65919488/when-refactoring-code-into-separate-files-ts2345-argument-of-type-is-not-assi

Answer 1

The valid 2nd parameter of fetch is an object containing headers instead of standardHeaders so as long as you change the property then it would work:

import { standardHeaders } from '../globals';
fetch(url, { headers: standardHeaders })

Your original code has variable name and property are the same headers that's why it works normally