Typescript - 当修改拦截器返回 config.data 时如何更改 axios 响应的类型

Question

这是代码

const fetcher = Axios.create()

fetcher.interceptors.response.use(config=>{
  return config.data
})

问题是

类型fetcher.get('...')是AxiosInstance，但实际上是AxiosInstance.data类型

那么我怎样才能正确地改变类型呢？

Answer 1

1. 将类型写入某处，例如 src/types/axios/axios.d.ts。

import axios from 'axios'

declare module 'axios' {
  export interface AxiosInstance {
    request<T = any> (config: AxiosRequestConfig): Promise<T>;
    get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    head<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
  }
}

2. 更新你的 tsconfig.json，例如

{
  "compilerOptions": {
    "typeRoots": [
        "./node_modules/@types",
        "./src/types/",
    ]
  }
}

3. 现在您可以使用fetcher.get<DataType>('...')并且您应该得到提到的类型的响应。

这个解决方案可能有效！另请查看此线程以了解更多信息！ 解决方案参考

Answer 2

无需重新定义模块。

假设您的拦截器执行了response => response.data并且服务器响应如下：

{
  book: { id: 42 }
}

这应该足够了：

type Book = {
    id: number
}

type ResponseContainer = {
    book: Book
}

request.post<unknown, ResponseContainer>('/api')
    .then(({ book }) => console.log(book.id))