Vue3+TypeScript使用Axios出现TS2769无匹配重载报错

当前项目使用技术栈为 Vue 3、Vite、Axios、TypeScript，编写的count getter逻辑在开发环境可正常运行，但在PyCharm IDE及项目构建阶段会抛出TypeScript类型错误。
相关出错代码如下：

get count() {
      axios({
        method: "get",
        url: "/info/count",
        headers: authHeader(),
      })
        .then((response) => {
        this.count = response.data.status;
      });
    },

PyCharm IDE中抛出的错误信息如下：

TS2769: No overload matches this call.   Overload 1 of 2, '(config: AxiosRequestConfig<any>): AxiosPromise<any>', gave the following error.     Argument of type '{ method: "get"; url: string; headers: { Authorization: string; } | { Authorization?: undefined; }; }' is not assignable to parameter of type 'AxiosRequestConfig<any>'.       Object literal may only specify known properties, and 'headers' does not exist in type 'AxiosRequestConfig<any>'.   Overload 2 of 2, '(url: string, config?: AxiosRequestConfig<any>): AxiosPromise<any>', gave the following error.     Argument of type '{ method: string; url: string; headers: { Authorization: string; } | { Authorization?: undefined; }; }' is not assignable to parameter of type 'string

涉及的authHeader()函数实现代码如下：

export default function authHeader () {
   
        let user_token = localStorage.getItem('auth_user')
        let auth_token = localStorage.getItem('auth_token')

        if (user_token && auth_token) {
            return { 'Authorization': 'bearer ' + auth_token };
        } else {
            return {};
        }
}

报错核心原因：authHeader返回值被TypeScript自动推断为联合类型，与Axios内置的AxiosRequestConfig类型定义不匹配，最终触发方法重载校验失败。

方案1：显式声明authHeader的返回类型（推荐） #

从工具函数定义层面统一类型约束，避免类型自动推断带来的偏差，需要先从axios导入对应的headers类型：

import type { AxiosRequestHeaders } from 'axios'

export default function authHeader (): AxiosRequestHeaders {
  const user_token = localStorage.getItem('auth_user')
  const auth_token = localStorage.getItem('auth_token')

  if (user_token && auth_token) {
    return { 'Authorization': 'bearer ' + auth_token }
  }
  return {}
}

方案2：调用位置做类型断言 #

如果不便于修改公共的authHeader函数，可以在axios调用处对headers值做类型断言，强制TypeScript识别为合法类型：

import type { AxiosRequestHeaders } from 'axios'

// 对应getter内部代码
get count() {
  axios({
    method: "get",
    url: "/info/count",
    headers: authHeader() as AxiosRequestHeaders,
  })
    .then((response) => {
    this.count = response.data.status;
  });
},

额外提示：当前getter写法存在逻辑缺陷，getter中发起异步请求后直接给this.count赋值会触发无限递归更新，建议将接口请求逻辑移到单独的方法或组件生命周期钩子中执行，getter仅负责返回已初始化的响应式状态值。

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