How to make header object in TypeScript?

Question

If I make the headers and would change conditionally:

let headers = {
    'Content-Type': 'application/json',
    crossDomain: true,
}
if (authnRes?.data?.jwt) {
    headers['Authorization'] = `Bearer ${authnRes?.data?.jwt}`
}

I will get an error:

Element implicitly has an 'any' type because expression of type '"Authorization"' can't be used to index type '{ 'Content-Type': string; crossDomain: boolean; }'.
  Property 'Authorization' does not exist on type '{ 'Content-Type': string; crossDomain: boolean; }'.

How can I solve it? Is it maybe a predefined axios type for Headers?

axios({
    // ..
    headers: headers,
})
    .then((resp: any) => {
    })
    .catch((err) => console.error(err))

--

Is it any easier way then this below?

let headers: {
    [key: string]: string | boolean
} = {
    'Content-Type': 'application/json',
    crossDomain: true,
}

Does this answer your question? [How to conditionally add properties to a javascript object literal](https://stackoverflow.com/questions/21568760/how-to-conditionally-add-properties-to-a-javascript-object-literal) — Tobias S., Apr 27 '22 at 12:28

score 1 · Answer 1 · answered Dec 30 '22 at 04:14

1

Still got an error with @coglialoro solution, solved it by using this notation:

import type { AxiosRequestHeaders } from 'axios';
let headers = {
  'Content-Type': 'application/json',
  crossDomain: true,
} as AxiosRequestHeaders;

answered Dec 30 '22 at 04:14

Freezystem

4,494
1
32
35

score -1 · Accepted Answer · answered Apr 27 '22 at 12:39

You can import AxiosRequestHeaders from axios and use it to type your headers variable, like so :

import { AxiosRequestHeaders } from 'axios';
let headers: AxiosRequestHeaders = {
  'Content-Type': 'application/json',
  crossDomain: true,
};

By the way, if you go and look at the type definition you'll see it's very similar to your attempt:

type AxiosRequestHeaders = {
  [x: string]: string | number | boolean;
}

How to make header object in TypeScript?

2 Answers2