How to use Axios with TypeScript when using response interceptors (AxiosResponse issue)

Summary

In a project I am migrating to TypeScript (TS), I have a response interceptor r => r.data. How do I inform TS that I am not expecting a type of AxiosResponse? I’ve tried overriding using as Array<... but that doesn’t work as AxiosResponse can’t be cast as an Array (e.g. does not has .length).

Thanks!

Context

• axios version: 0.16.2
• Environment: Visual Studio Code

[jeremy-ww]

I override AxiosResponse in my axios.d.ts:

import axios from 'axios'

declare module 'axios' {
  export interface AxiosResponse<T = any> extends Promise<T> {}
}

[zcei]

Use the axios.request<T>(...args) style definition. The last Response-interceptor in the array implicitly comply to an interface like (currentResponse: any) => T

So if you have data being something like:

interface ServerResponse {
  data: ServerData
}

interface ServerData {
  foo: string
  bar: number
}

Then you can say:

axios.request<ServerData>({
  url: 'https://example.com/path/to/data',
  transformResponse: (r: ServerResponse) => r.data
}).then((response) => {
  // `response` is of type `AxiosResponse<ServerData>`
  const { data } = response
  // `data` is of type ServerData, correctly inferred
})