What is the appropriate typescript type for an array payload when using the fetch API?

Question

What is the appropriate typescript type for an array payload when using the fetch API?

My current method involves using fetch to send URL encoded form data:

private purchase = async () => {
    const { token } = await this.state.instance.requestPaymentMethod();

    const formData = [];
    formData.push(`${encodeURIComponent("paymentToken")}=${encodeURIComponent(token)}`);

    // @ts-ignore
    const result = await fetch(`http://example.com/checkout`, {
        method: "post",
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        body: formData,
    });
}

The solution works with the @ts-ignore annotation, but I am seeking a type that can replace it. Any suggestions on what type to use in this scenario?

typescript fetch

Answer 1

Answer №1

The fetch API is a key component of the DOM API, and its definition can be found in lib.dom.d.ts.
As per this definition, the type for body is specified as:

type BodyInit = Blob | BufferSource | FormData | URLSearchParams | ReadableStream | string;

Hence, when making a request with the content type

application/x-www-form-urlencoded

, you can utilize URLSearchParams as the type for body:

private buy = async () => {
  const { nonce } = await this.state.instance.requestPaymentMethod();

  const formBody = new URLSearchParams();
  formBody.append('paymentMethodNonce', nonce);

  const response = await fetch(`http://localhost:4000/checkout`, {
    method: "post",
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    body: formBody,
  });
}

Answer 2

The fetch API is a key component of the DOM API, and its definition can be found in lib.dom.d.ts.
As per this definition, the type for body is specified as:

type BodyInit = Blob | BufferSource | FormData | URLSearchParams | ReadableStream | string;

Hence, when making a request with the content type

application/x-www-form-urlencoded

, you can utilize URLSearchParams as the type for body:

private buy = async () => {
  const { nonce } = await this.state.instance.requestPaymentMethod();

  const formBody = new URLSearchParams();
  formBody.append('paymentMethodNonce', nonce);

  const response = await fetch(`http://localhost:4000/checkout`, {
    method: "post",
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    body: formBody,
  });
}

What is the appropriate typescript type for an array payload when using the fetch API?

Answer №1

Similar questions

A new feature introduced in TypeScript, expression-level syntax was not present until it was added in JavaScript

Unable to log in with password after hashing using React, NodeJS, and mySQL

Utilizing TypeScript generics to accurately extract type information from state during reduction

Using Typescript with Material UI Select

Unable to retrieve values from nested objects in component.html

The concept of passing arguments in Typescript

Packaging a NodeJS project in Visual Studio - A step-by-step guide to creating and setting up an N

Arranging Objects by Alphabetical Order in Typescript

The useAutocomplete function in Material-UI fails to consider the disabled

TypeScript: "Implementing" methods. The organized approach

Implementing Angular 2 reactive forms checkbox validation in an Ionic application

Ways to specify an unused parameter within a function

Is there a way to enable autofill functionality if an email already exists in the database or API within Angular 12?

Employing multiple subscriptions within a function

What is the method to access a component from a module that has been imported into the app module?

Guide on associating user IDs with user objects

Retrieve distinct values for the keys from an object array in JavaScript

Problem encountered while directing to a component within Angular

Obtaining the current row index in React MUI Data Grid using React-Context

Retrieve the 90 days leading up to the current date using JavaScript