Hey there! Let's tackle this TypeScript + Axios issue. You want to add a custom handlerEnabled property to your Axios request config, and you prefer using generics instead of traditional declaration files—totally understandable. Here are a few clean ways to make this work:

1. Directly Extend Config via Generics on Request Calls #

Axios's request methods (like get) accept generic parameters that let you override the default request config type. You can merge AxiosRequestConfig with your custom properties right in the call:

First, define your custom config type:

type CustomAxiosConfig = {
  handlerEnabled?: boolean;
};

Then, when calling $axios.get, specify the merged type as the third generic parameter (which corresponds to the request config):

import { AxiosResponse, AxiosRequestConfig } from 'axios';
import $axios from 'helpers/axiosInstance';

$axios.get<unknown, AxiosResponse, AxiosRequestConfig & CustomAxiosConfig>(
  '/customers',
  { handlerEnabled: false }
);

Breakdown: The get method's generics are ordered as:

• T: The type of the response data (we used unknown here, but you can replace it with your customer type)
• R: The full Axios response type (defaults to AxiosResponse<T>)
• D: The request config type (we merged the default with your custom config)

2. Create a Reusable Extended Config Type #

If you need this custom config across multiple requests, create a reusable type to avoid repeating the merge:

import { AxiosRequestConfig } from 'axios';

type ExtendedAxiosRequestConfig = AxiosRequestConfig & {
  handlerEnabled?: boolean;
};

Then use it either via generics or a type assertion:

// Using generics
$axios.get<unknown, AxiosResponse, ExtendedAxiosRequestConfig>(
  '/customers',
  { handlerEnabled: false }
);

// Or using type assertion (quicker for one-off calls)
$axios.get('/customers', { handlerEnabled: false } as ExtendedAxiosRequestConfig);

3. Extend Your Custom Axios Instance's Type (Most Elegant for Reuse) #

If $axios is a custom instance you've created, you can override its method types once so all future calls automatically recognize your custom config. This is the cleanest approach for repeated use:

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

// Define your custom config type
type CustomRequestConfig = AxiosRequestConfig & {
  handlerEnabled?: boolean;
};

// Create your instance with overridden method types
const $axios: Omit<AxiosInstance, 'get' | 'post' | 'put' | 'delete'> & {
  get<T = unknown, R = AxiosResponse<T>, D = CustomRequestConfig>(
    url: string,
    config?: D
  ): Promise<R>;
  // Repeat the above for other methods (post, put, delete) if needed
} = axios.create({
  // Your base instance config (e.g., baseURL, headers)
});

// Now you can call get without extra generics—TypeScript will recognize handlerEnabled!
$axios.get('/customers', { handlerEnabled: false });

This way, every time you use $axios.get (or other methods you've overridden), TypeScript will accept your handlerEnabled property natively.

Why This Works #

Axios's core methods are designed with generics to let you customize types like request config and response data. By explicitly specifying the merged config type (either per call or on the instance), you're telling TypeScript to accept your custom properties without modifying global declaration files.

内容的提问来源于stack exchange，提问作者Zeinab Malaki