What is the best way to transform HeadersInit into an Object<string,string> data type?

Question

What is the best way to transform HeadersInit into an Object<string,string> data type?

In short, I am faced with the task of converting the headers of a RequestInit into a format that another library can comprehend. This particular library requires the headers to be in the format of Object<string, string>. Initially, I attempted something like this:

headers: {
   ...init?.headers,
},

However, it turned out to be more complicated than expected. It appears that some values in init.headers are of type number, leading to issues with TypeScript. How can I effectively convert these values to prevent any complaints from TypeScript?

javascript typescript

Answer 1

Answer №1

When creating a new instance of the Headers constructor from HeadersInit,

function headersInitToRecord(headersInit: HeadersInit) {
    return Object.fromEntries(new Headers(headersInit).entries());
}

Alternatively, if you wish to handle cases where undefined is passed in,

function headersInitToRecord1(headersInit?: HeadersInit | undefined) {
    // It's acceptable to pass in undefined to the new Headers() constructor
    return Object.fromEntries(new Headers(headersInit).entries());
}

Or, if you want to account for when undefined is passed in and have it return undefined,

function headersInitToRecord2(headersInit?: HeadersInit | undefined) {
    return headersInit && Object.fromEntries(new Headers(headersInit).entries());
}

Check out the tests playground here:

console.log(
    headersInitToRecord([['foo', 'bar']]),
    headersInitToRecord({foo: 'bar'}),
    headersInitToRecord(new Headers([['foo', 'bar']])),
)

Answer 2

When creating a new instance of the Headers constructor from HeadersInit,

function headersInitToRecord(headersInit: HeadersInit) {
    return Object.fromEntries(new Headers(headersInit).entries());
}

Alternatively, if you wish to handle cases where undefined is passed in,

function headersInitToRecord1(headersInit?: HeadersInit | undefined) {
    // It's acceptable to pass in undefined to the new Headers() constructor
    return Object.fromEntries(new Headers(headersInit).entries());
}

Or, if you want to account for when undefined is passed in and have it return undefined,

function headersInitToRecord2(headersInit?: HeadersInit | undefined) {
    return headersInit && Object.fromEntries(new Headers(headersInit).entries());
}

Check out the tests playground here:

console.log(
    headersInitToRecord([['foo', 'bar']]),
    headersInitToRecord({foo: 'bar'}),
    headersInitToRecord(new Headers([['foo', 'bar']])),
)

What is the best way to transform HeadersInit into an Object<string,string> data type?

Answer №1

Similar questions

Is there a better option than using public methods when transitioning from class-based to function-based React components?

Leveraging Gatsbyjs to Integrate GraphQL Data with Material UI Library

Explore the wonders of generating number permutations using JavaScript recursion!

Uh-oh, Ajax encountered a 500 Internal Server Error!

Displaying imported JSON data in a tabular format

Arrangement of jQuery On Events and Triggers

How can I obtain my .apk file?

Using Typescript and React to assign an array object to state

Angular - The 'options' property is not found in the 'HTMLOptionElement' type

Splitting JavaScript files in the "dist" folder based on their source folders can be achieved in Angular by using G

Error message 'require is not defined' can occur in Meteor.js when trying to incorporate an NPM package

Attempting to retrieve a file from the database with the utilization of Angular 5 and ASP.NET Core

The Facebook Like Button appears on Firefox but not on Internet Explorer due to Javascript errors

Guide to displaying the continent name on a 3D globe using Reactjs, TypeScript, and Threejs

What is the best way to include the application version in an Electron project using JavaScript

Please provide either a render prop, a render function as children, or a component prop to the Field(auto) component

Error: "Access-Control-Allow-Origin" header is missing in Firebase Function

ReactJS safeguarded route redirection/refresh obstacle

Determine the dimensions of a div element in IE after adjusting its height to auto

Delay the v-alert display after an item is added to the array basket using setTimeout