升级TypeScript和Axios至最新版后仍提示AxiosInstance未导出

问题代码 #

class HttpService {
    apiEndPoints = ApiEndPoints;
    appRoutes = AppRoutes;
    baseUrl = '...............http';
    http: AxiosInstance
    constructor() {
        this.http = axios.create({
            baseURL: this.baseUrl,
            headers: {
                'Content-Type': 'application/json',
            },
        });
}

问题描述 #

已将TypeScript和Axios升级至最新版本，但仍出现报错：axios has no exported module AxiosInstance

已尝试的无效方案 #

• 方案1：
  导入语句：

  import axios, { AxiosInstance } from 'axios';
  

  变量声明：

  http: AxiosInstance
  

• 方案2：
  导入语句：

  import axios from 'axios';
  

  变量声明：

  http: axios.AxiosInstance
  

可行解决步骤 #

1. 清理依赖重新安装
   确认package.json中axios版本为v1.x及以上，若版本正确，删除node_modules、package-lock.json（或yarn.lock），执行npm install/yarn install重新安装依赖。

2. 检查TypeScript配置
   打开tsconfig.json，确保：

   • moduleResolution设置为node或nodenext
   • target设置为ES6及以上版本
     保存后重启TypeScript服务或编译器。

3. 正确导入类型
   使用TypeScript的类型导入语法单独引入AxiosInstance：

   import axios from 'axios';
   import type { AxiosInstance } from 'axios';
   
   class HttpService {
       // ...其他属性
       http: AxiosInstance;
       constructor() {
           this.http = axios.create({
               baseURL: this.baseUrl,
               headers: {
                   'Content-Type': 'application/json',
               },
           });
       }
   }
   

4. 移除冲突的类型包
   Axios v1.x及以上版本自带官方类型定义，无需额外安装@types/axios。若项目中已安装该包，执行npm uninstall @types/axios（或yarn remove @types/axios）移除冲突依赖。

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