Typescript - How to import and use RequestInit type from fetch?

I want to create a custom fetchServer method in which I can manipulate the different parameters (such as the URL, headers, and so on) in my React application before performing the actual fetch.

This method, at the end, uses the common fetch from Javascript, which has the following signature:

function fetch(input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>

So, I've written my fetchServer this way:

export const fetchServer = async <T>(
  url: string,
  options: any = {},
): Promise<T> => {
  ...
  const alteredOptions = { ...options, /* my custom code */ };
  const rawResponse = await fetch(url, { ...alteredOptions});
  ...
};

However, as you can see, I'm using any for options, because I'm unable to import successfully the RequestInit type from anywhere.

I've read this issue, but it's from apollo package (which I'm not using) and it's not solved.

I can try to declare it myself, but then the same happens with body and headers properties (which have BodyInit and HeadersInit types).

I've also tried to reference it directly, but ESlint throws an error because it's undefined and VSCode seems unable to import it correctly (although it autocompletes it).

interface RequestInit
'RequestInit' is not defined : eslint(no-undef)

I'm using Typescript v4.6.3, and these are my tsconfig.json settings:

"compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "downlevelIteration": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
},

How should I type my options parameter so that it extends the RequestInit type parameter of fetch method, and I'm able to extend it with my own properties?

I ran into the same issue. Turns out it was not a type error like I thought it was at first. Typescript has the type info from "DOM" being included as a lib in tsconfig.json

<pre>
{
"compilerOptions": {
...
"lib": [..., <b>"DOM"</b>],
}
</pre>

But that error was really only something wrong with eslint and it not seeing RequestInit as a global type.

A quick workaround is to add the following to the .ts file that referenced it.

/* global RequestInit */

You could also add it as a global to your eslintrc file to do the same thing project wide.

"globals": {
  "RequestInit": true
}