<!-- Click "Preview" for a more readable version --

Please read and follow the instructions before submitting an issue:

- Read all our documentation, especially the [README](https://github.com/axios/axios/blob/master/README.md). It may contain information that helps you solve your issue.
- Ensure your issue isn't already [reported](https://github.com/axios/axios/issues?utf8=%E2%9C%93&q=is%3Aissue).
- If you aren't sure that the issue is caused by Axios or you just need help, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/axios) or [our chat](https://gitter.im/mzabriskie/axios).
- If you're reporting a bug, ensure it isn't already fixed in the latest Axios version.
- Don't remove any title of the issue template, or it will be treated as invalid by the bot.

⚠️👆 Feel free to these instructions before submitting the issue 👆⚠️
-->

#### Describe the issue
Headers are typed as `Record<string, string>`. This includes `axios.defaults.headers`, which is configured as: https://github.com/axios/axios/blob/76f09afc03fbcf392d31ce88448246bcd4f91f8c/lib/defaults.js#L119-L123

This seems incompatible with `headers` being of type `Record<string, string>`.

#### Example Code
The following line produces a TypeScript error beacuse `headers.commons` is of type `string`: "Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)".

```ts
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
```


#### Expected behavior, if applicable
I expect to be able to configure default headers without TypeScript errors. Using the code examples from the Axios documentation, I would exspect `axios.defaults.headers.common` to be of type `Record<string, string>` not of type `string`.

#### Environment
 - Axios Version 0.22.0 
 - Adapter N/A
 - Browser N/A
 - Browser Version N/A
 - Node.js Version 15.14.0
 - OS: Ubuntu 21.04
 - Additional Library Versions TypeScript 4.4.3

#### Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.

test/typescript/axios.ts
id: number;
  name: string;
}
const handleUserResponse = (response: AxiosResponse<User>) => {
	console.log(response.data.id);
	console.log(response.data.name);
	console.log(response.status);
	console.log(response.statusText);
	console.log(response.headers);
	console.log(response.config);
};
axios.get<User>('/user?id=12345')
	.then(handleUserResponse)
	.catch(handleError);
axios.get<User>('/user', { params: { id: 12345 } })
	.then(handleUserResponse)
	.catch(handleError);
axios.head<User>('/user')
	.then(handleUserResponse)
    .catch(handleError);
axios.options<User>('/user')
	.then(handleUserResponse)
	.catch(handleError);
axios.delete<User>('/user')
	.then(handleUserResponse)
	.catch(handleError);
axios.post<User>('/user', { name: 'foo', id: 1 })
	.then(handleUserResponse)
	.catch(handleError);
axios.post<User>('/user', { name: 'foo', id: 1 }, { headers: { 'X-FOO': 'bar' } })