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

Posted 2023-02-22

【中文标题】Typescript - 修改拦截器以返回 config.data 时如何更改 axios 响应的类型

【英文标题】：Typescript - How to change type of axios response when modified interceptor to return config.data

【发布时间】：2021-04-17 02:34:39

【问题描述】：

这里是代码

const fetcher = Axios.create()

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

问题是

fetcher.get('...')的类型是AxiosInstance，其实是AxiosInstance.data类型

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

【参考方案1】：

重新定义模块是not necessary。

假设您的拦截器执行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))

【参考方案2】：

在某处写类型，例如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>;
  

更新您的 tsconfig.json，例如

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

现在您可以使用fetcher.get<DataType>('...')，您应该会得到所提及类型的响应。

此解决方案可能有效！另请查看this thread 以了解更多信息！ Solution Ref

【参考方案3】：

你可以试试这个this

fetcher.get<DataType>('...')

EX：如果它返回一个数字

fetcher.get<number>('...')

【讨论】：

谢谢。仍然是我在 fetcher.get<...> 中写的任何类型，它都会返回 AxiosInstance，因为该类型只描述了 AxiosInstance 的数据结构