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? — Liam
– Liam, Commented Aug 15, 2022 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
– jonrsharpe, Commented Aug 15, 2022 at 14:06
Basically the same question, but in Angular: stackoverflow.com/q/62651724/3001761 — jonrsharpe
– jonrsharpe, Commented Aug 15, 2022 at 14:14

jonrsharpe · Accepted Answer · 2022-08-15 14:12:54Z

3

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
      }
  )
```

edited Aug 15, 2022 at 14:12

jonrsharpe

123k31 gold badges277 silver badges488 bronze badges

answered Aug 15, 2022 at 14:10

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jonrsharpe Over a year ago

You can also as const either the whole requestOptions object or just the string 'follow': stackoverflow.com/a/62652353/3001761

Dezzley · Accepted Answer · 2022-08-15 14:11:34Z

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, 2022 at 14:11

Dezzley

1,9151 gold badge20 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related