Vue3+TS项目引入vue-axios后调用this.axios报TS2339错误如何解决？

TypeScript无法识别你通过vue-axios挂载到Vue全局实例上的axios属性，缺少对应的类型声明，所以触发TS2339报错。

方案1：扩展全局类型声明（推荐，保留完整类型提示） #

在项目src目录下新建名为axios.d.ts的类型声明文件，写入以下内容：

import type { AxiosStatic } from 'axios'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    axios: AxiosStatic
  }
}

export {}

保存后重启IDE的TypeScript服务即可解决报错，同时可以保留axios的所有类型提示。

方案2：直接导入axios使用（更简单，适合小型项目） #

你可以不使用全局挂载的方式，直接在需要调用接口的组件中导入axios使用：

1. 在TodoList组件的script头部新增导入：

import axios from 'axios'

2. 修改loadTodos方法中的调用代码，去掉this：

const response = await axios.get('http://localhost:8080/')

不需要修改其他配置即可正常使用。

方案3：临时类型断言（仅适合临时调试，不推荐） #

如果只需要临时绕过类型检查，可以直接对this做类型断言：

const response = await (this as any).axios.get('http://localhost:8080/')

该方法会丢失axios的类型提示，不建议长期使用。

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