feat(types): extend AxiosResponse interface to include custom headers type (#6782)

This commit is contained in:
Willian Agostini 2025-08-12 04:29:02 -03:00 committed by GitHub
parent aa78ac23fc
commit 7960d34ede
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 107 additions and 4 deletions

View File

@ -461,11 +461,11 @@ declare namespace axios {
headers?: RawAxiosRequestHeaders | AxiosHeaders | Partial<HeadersDefaults>;
}
interface AxiosResponse<T = any, D = any> {
interface AxiosResponse<T = any, D = any, H = {}> {
data: T;
status: number;
statusText: string;
headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
headers: H & RawAxiosResponseHeaders | AxiosResponseHeaders;
config: InternalAxiosRequestConfig<D>;
request?: any;
}

4
index.d.ts vendored
View File

@ -393,11 +393,11 @@ export interface CreateAxiosDefaults<D = any> extends Omit<AxiosRequestConfig<D>
headers?: RawAxiosRequestHeaders | AxiosHeaders | Partial<HeadersDefaults>;
}
export interface AxiosResponse<T = any, D = any> {
export interface AxiosResponse<T = any, D = any, H = {}> {
data: T;
status: number;
statusText: string;
headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
headers: H & RawAxiosResponseHeaders | AxiosResponseHeaders;
config: InternalAxiosRequestConfig<D>;
request?: any;
}

View File

@ -115,6 +115,10 @@ interface User {
name: string;
}
interface ResponseHeaders {
'x-header': string;
}
// with default axios.AxiosResponse<T> result
const handleUserResponse = (response: axios.AxiosResponse<User>) => {
@ -162,6 +166,54 @@ axios.patch<User>('/user', { name: 'foo', id: 1 })
.then(handleUserResponse)
.catch(handleError);
// with custom response headers axios.AxiosResponse<T, any, H> result
const handleUserResponseWithCustomHeaders = (response: axios.AxiosResponse<User, any, ResponseHeaders>) => {
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, axios.AxiosResponse<User, any, ResponseHeaders>>('/user?id=12345')
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.get<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { params: { id: 12345 } })
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.head<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user')
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.options<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user')
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.delete<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user')
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.post<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.post<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 }, { headers: { 'X-FOO': 'bar' } })
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.put<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.patch<User, axios.AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
// (Typed methods) with custom response type
const handleStringResponse = (response: string) => {

View File

@ -137,6 +137,10 @@ interface User {
name: string;
}
interface ResponseHeaders {
'x-header': string;
}
// with default AxiosResponse<T> result
const handleUserResponse = (response: AxiosResponse<User>) => {
@ -184,6 +188,53 @@ axios.patch<User>('/user', { name: 'foo', id: 1 })
.then(handleUserResponse)
.catch(handleError);
// with custom response headers AxiosResponse<T, any, H> result
const handleUserResponseWithCustomHeaders = (response: AxiosResponse<User, any, ResponseHeaders>) => {
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, AxiosResponse<User, any, ResponseHeaders>>('/user?id=12345')
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.get<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { params: { id: 12345 } })
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.head<User, AxiosResponse<User, any, ResponseHeaders>>('/user')
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.options<User, AxiosResponse<User, any, ResponseHeaders>>('/user')
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.delete<User, AxiosResponse<User, any, ResponseHeaders>>('/user')
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.post<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.post<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 }, { headers: { 'X-FOO': 'bar' } })
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.put<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
axios.patch<User, AxiosResponse<User, any, ResponseHeaders>>('/user', { name: 'foo', id: 1 })
.then(handleUserResponseWithCustomHeaders)
.catch(handleError);
// (Typed methods) with custom response type
const handleStringResponse = (response: string) => {