Quickest and simplest way to convert fetch JavaScript to work in TypeScript project

Question

What's the simplest way to get this piece of code working in TypeScript project?

var requestOptions = {
  method: 'GET',
  body: raw,
  redirect: 'follow',
  headers: {
    'x-mock-response-code': '204',
  },
}

fetch(
  'https://abcd.mock.pstmn.io/token',
  requestOptions
)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error))

I get this error that won't let me compile:

Argument of type '{ method: string; body: string; redirect: string; headers: { 'x-mock-response-code': string; }; }' is not assignable to parameter of type 'RequestInit'.
   Types of property 'redirect' are incompatible.
     Type 'string' is not assignable to type 'RequestRedirect | undefined'.ts(234

Does this answer your question? [Fetch GET Request with custom header?](https://stackoverflow.com/questions/42862202/fetch-get-request-with-custom-header) — Liam, Aug 15 '22 at 14:05
You need a more specific type for the value of (at least) `redirect`. Try `as const`, or inlining the options, or an explicit type for `requestOptions`, or ... — jonrsharpe, Aug 15 '22 at 14:06
Basically the same question, but in Angular: https://stackoverflow.com/q/62651724/3001761 — jonrsharpe, Aug 15 '22 at 14:14

score 1 · Accepted Answer · edited Aug 15 '22 at 14:12

Since you assigned a plain object to requestOptions without specifying a type, TypeScript has inferred what type it should be.

That type thinks redirect is a string, but fetch expects it to be one of a specific selection of strings.

When you later pass the object to fetch, TypeScript thinks the value you used can be any string and you get an error.

You have a couple of options here:

Be explicit about the types

That way when you pass the object to fetch it will be of the RequestInit type instead of the inferred type you are currently passing.
```
  var requestOptions: RequestInit = {
```
Don't use the intermediate variable

If you assign the object directly to the argument, then TypeScript can compare it directly instead of creating a type and then comparing that type.
```
  fetch(
      'https://abcd.mock.pstmn.io/token',
      {
          // options here
      }
  )
```

You can also [`as const`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions) either the whole `requestOptions` object or just the string `'follow'`: https://stackoverflow.com/a/62652353/3001761 — jonrsharpe, Aug 15 '22 at 14:16

score 1 · Answer 2 · answered Aug 15 '22 at 14:11

1

The easiest way is to specify the type of your requestOptions object:

var requestOptions: RequestInit = {
  method: 'GET',
  body: raw,
  redirect: 'follow',
  headers: {
    'x-mock-response-code': '204',
  },
}

answered Aug 15 '22 at 14:11

Dezzley

1,463
1
13
19

Quickest and simplest way to convert fetch JavaScript to work in TypeScript project

2 Answers2