How to pass along a generic?

I'm fairly new to TypeScript, so I'm still trying to wrap my head around generics.

I have a class, Client, that has an AxiosInstance property. This is used to attach headers to each request.

I'd like the Client class to have the exact same get and post methods that an AxiosInstance has.

This is easy enough. I'll make it as simple as I can for this question:

import Axios, { type AxiosInstance, type InternalAxiosRequestConfig } from 'axios';

class Client {
  constructor(){
    this.axios = Axios.create();

    // Attach authorization to each request if it does not already exist.
    this.axios.interceptors.request.use((requestConfig: InternalAxiosRequestConfig) => {
      requestConfig.headers = {
        authorization: 'basic foobar',
        ...requestConfig.headers
      };

      return requestConfig;
    });
  }

  axios: AxiosInstance;

  get/*<What do I put here?>*/(...args: Parameters<AxiosInstance['get']>) {
    return this.axios.get/*<What do I put here?>*/(...args);
  }

  post/*<What do I put here?>*/(...args: Parameters<AxiosInstance['post']>) {
    return this.axios.post/*<What do I put here?>*/(...args);
  }
}

My question is, AxiosInstance.get() and AxiosInstance.post each have generics — am I even saying that correctly? How do I pass the generics, similar to how I've done with the args, from the Client.get() and Client.post() to the AxiosInstance.get() and AxiosInstance.post()?

TypeScript lacks the ability to perform arbitrary higher-level type manipulation of the sort you'd need to write this easily. In particular there's no way to use something like the Parameters<T> utility type on a generic function type without losing information. The generic type parameters will be replaced with their constraints when you do that:

type GenFn = <A extends string, B extends number>(a: A, b: B) => [A, B];

type P = Parameters<GenFn>;
// type P = [a: string, b: number] 😢

Oops, A and B have been erased completely. And you can't "pass" generic type arguments to GenFn, so you can't directly write something like

type P<A extends string, B extends number> = 
  Parameters<GenFn<A, B>> // error, this is invalid TypeScript.

TypeScript does have what's called instantiation expressions, where you can take a value of a generic function type and pass generic type arguments to it without calling it. But you need the compiler to think you have a value of that type; it can't happen purely at the type level (as mentioned in this comment on microsoft/TypeScript#47607):

declare const genFn: GenFn; // pretend we have a value of this type
type P<A extends string, B extends number> = Parameters<typeof genFn<A, B>>;
// type P<A extends string, B extends number> = [a: A, b: B] 👍

So we could look up the get() and post() method signatures of AxiosInstance as defined in the index.d.ts file from axios, which are

class Axios {
  get<T = any, R = AxiosResponse<T>, D = any>(
    url: string, config?: AxiosRequestConfig<D>
  ): Promise<R>;

  post<T = any, R = AxiosResponse<T>, D = any>(
    url: string, data?: D, config?: AxiosRequestConfig<D>
  ): Promise<R>;
}

And then pretend to make a dummy instance _dummyAxios of AxiosInstance and use instantiation parameters like typeof _dummyAxios.get<T, R, D>, like this:

declare const _dummyAxios: AxiosInstance; // pretend

class Client {
  axios!: AxiosInstance;

  get<T = any, R = AxiosResponse<T>, D = any>(
    ...args: Parameters<typeof _dummyAxios.get<T, R, D>>
  ) {
    return this.axios.get<T, R, D>(...args);
  }

  post<T = any, R = AxiosResponse<T>, D = any>(
    ...args: Parameters<typeof _dummyAxios.post<T, R, D>>
  ) {
    return this.axios.post<T, R, D>(...args);
  }
}

And that works.

But it's not a wonderful approach. You still need to consult the Axios typings in order to determine the number, constraints, and defaults of the type parameters (i.e., <T = any, R = AxiosResponse<T>, D = any>) because there are no higher order type operations to give those to you. And you have to pretend to have _dummyAxios. It would be nice if you could at least use typeof this.axios instead of typeof _dummyAxios, but this isn't allowed to appear there. And even ...args: Parameters<typeof this.axios.post<T, R, D>> isn't particularly helpful as documentation.

Since you need to copy some things from the Axios call signatures anyway, you might as well just copy the full call signatures and use them without trying to force the compiler to perform type operations it can only sort of achieve. That is, just copy and paste the call signatures:

class Client {
  axios!: AxiosInstance;

  get<T = any, R = AxiosResponse<T>, D = any>(
    url: string, config?: AxiosRequestConfig<D>
  ) {
    return this.axios.get<T, R, D>(url, config);
  }

  post<T = any, R = AxiosResponse<T>, D = any>(
    url: string, data?: D, config?: AxiosRequestConfig<D>
  ) {
    return this.axios.post<T, R, D>(url, data, config);
  }
}

Yes, it's more tedious for you when you're writing it, but it's a lot more straightforward for you when you're reading it, or others who come later. It's much more obvious what this code expects as input, and much easier to explain than anything involving "instantiation expressions on phantom generic functions".

Playground link to code