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

index.d.cts

@@ -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;
   }

index.d.ts

@@ -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;
 }

test/module/typings/cjs/index.ts

@@ -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) => {

test/module/typings/esm/index.ts

@@ -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) => {