Improved type-safety for AxiosRequestConfig (#2995)

carloschida · jasonsaayman · web-flow · commit 4eeb3b17e285 · 2021-09-05T14:06:05.000+02:00
* Improved type-safety for AxiosRequestConfig

- AxiosRequestConfig is now a generic type whose template corresponds to data

Signed-off-by: Carlos Chida &lt;carlos.chida@starchitecture.eu&gt;

* Fixed tests

- TS tests now match the behaviour described in the PR

Signed-off-by: Carlos Chida &lt;carlos.chida@starchitecture.eu&gt;

Co-authored-by: Jay &lt;jasonsaayman@gmail.com&gt;
diff --git a/index.d.ts b/index.d.ts
@@ -47,7 +47,7 @@ export interface TransitionalOptions{
   clarifyTimeoutError: boolean;
 }
 
-export interface AxiosRequestConfig {
+export interface AxiosRequestConfig<T = any> {
   url?: string;
   method?: Method;
   baseURL?: string;
@@ -56,7 +56,7 @@ export interface AxiosRequestConfig {
   headers?: any;
   params?: any;
   paramsSerializer?: (params: any) => string;
-  data?: any;
+  data?: T;
   timeout?: number;
   timeoutErrorMessage?: string;
   withCredentials?: boolean;
@@ -85,7 +85,7 @@ export interface AxiosResponse<T = any>  {
   status: number;
   statusText: string;
   headers: any;
-  config: AxiosRequestConfig;
+  config: AxiosRequestConfig<T>;
   request?: any;
 }
 
@@ -142,14 +142,14 @@ export class Axios {
     response: AxiosInterceptorManager<AxiosResponse>;
   };
   getUri(config?: AxiosRequestConfig): string;
-  request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;
-  get<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
-  delete<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
-  head<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
-  options<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
-  post<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
-  put<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
-  patch<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
+  request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig<T>): Promise<R>;
+  get<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig<T>): Promise<R>;
+  delete<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig<T>): Promise<R>;
+  head<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig<T>): Promise<R>;
+  options<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig<T>): Promise<R>;
+  post<T = any, R = AxiosResponse<T>>(url: string, data?: T, config?: AxiosRequestConfig<T>): Promise<R>;
+  put<T = any, R = AxiosResponse<T>>(url: string, data?: T, config?: AxiosRequestConfig<T>): Promise<R>;
+  patch<T = any, R = AxiosResponse<T>>(url: string, data?: T, config?: AxiosRequestConfig<T>): Promise<R>;
 }
 
 export interface AxiosInstance extends Axios {
diff --git a/test/typescript/axios.ts b/test/typescript/axios.ts
@@ -111,6 +111,10 @@ axios.patch('/user', { foo: 'bar' })
   .catch(handleError);
 
 // Typed methods
+interface UserCreationDef {
+    name: string;
+}
+
 interface User {
   id: number;
   name: string;
@@ -138,7 +142,7 @@ axios.get<User>('/user', { params: { id: 12345 } })
 axios.head<User>('/user')
 	.then(handleUserResponse)
     .catch(handleError);
-    
+
 axios.options<User>('/user')
 	.then(handleUserResponse)
 	.catch(handleError);
@@ -147,19 +151,19 @@ axios.delete<User>('/user')
 	.then(handleUserResponse)
 	.catch(handleError);
 
-axios.post<User>('/user', { foo: 'bar' })
+axios.post<User>('/user', { name: 'foo', id: 1 })
 	.then(handleUserResponse)
 	.catch(handleError);
 
-axios.post<User>('/user', { foo: 'bar' }, { headers: { 'X-FOO': 'bar' } })
+axios.post<User>('/user', { name: 'foo', id: 1 }, { headers: { 'X-FOO': 'bar' } })
 	.then(handleUserResponse)
 	.catch(handleError);
 
-axios.put<User>('/user', { foo: 'bar' })
+axios.put<User>('/user', { name: 'foo', id: 1 })
 	.then(handleUserResponse)
 	.catch(handleError);
 
-axios.patch<User>('/user', { foo: 'bar' })
+axios.patch<User>('/user', { name: 'foo', id: 1 })
 	.then(handleUserResponse)
   .catch(handleError);
 
@@ -189,19 +193,19 @@ axios.delete<User, string>('/user')
   .then(handleStringResponse)
   .catch(handleError);
 
-axios.post<User, string>('/user', { foo: 'bar' })
+axios.post<Partial<UserCreationDef>, string>('/user', { name: 'foo' })
   .then(handleStringResponse)
   .catch(handleError);
 
-axios.post<User, string>('/user', { foo: 'bar' }, { headers: { 'X-FOO': 'bar' } })
+axios.post<Partial<UserCreationDef>, string>('/user', { name: 'foo' }, { headers: { 'X-FOO': 'bar' } })
   .then(handleStringResponse)
   .catch(handleError);
 
-axios.put<User, string>('/user', { foo: 'bar' })
+axios.put<Partial<UserCreationDef>, string>('/user', { name: 'foo' })
   .then(handleStringResponse)
   .catch(handleError);
 
-axios.patch<User, string>('/user', { foo: 'bar' })
+axios.patch<Partial<UserCreationDef>, string>('/user', { name: 'foo' })
   .then(handleStringResponse)
   .catch(handleError);
 
