使用axios-cancel时遇TypeScript类型及属性不存在错误求助

问题代码（http.ts） #

// 使用axios作为当前Http库
import axios from 'axios';
import axiosCancel from 'axios-cancel';

// 添加`cancel`原型方法以终止XHR请求和Promise
axiosCancel( axios );

export const Http = {};

/*************************************************************/

// HTTP执行方法
// 使用此执行方法发起axios请求
Http.execute = ( config ) => {
    return axios( config );
};

// HTTP取消方法
// 使用Http.cancel方法通过ID取消请求
Http.cancel = ( id ) => {
    return new axios.Cancel(id);
};

// HTTP取消所有请求方法
// 使用Http.cancelAll取消所有进行中的请求
Http.cancelAll = () => {
    return axios.cancelAll();
};

出现的类型错误 #

• 鼠标悬停在axiosCancel( axios );行时：

参数类型“import(".../node_modules/axios/index").AxiosStatic”无法赋值给参数类型“import(".../node_modules/@types/axios-cancel/node_modules/axios/axios").AxiosStatic”。类型“AxiosStatic”缺少类型“AxiosStatic”中的以下属性：cancel、cancelAll

• 鼠标悬停在return axios.Cancel(id);行时：

属性“cancel”在类型“AxiosStatic”上不存在。是否指“Cancel”？ts(2551)
index.d.ts(528, 3): “Cancel”在此处声明

• 鼠标悬停在return axios.cancelAll();行时：

属性“cancel”在类型“AxiosStatic”上不存在。是否指“Cancel”？ts(2551)
index.d.ts(528, 3): “Cancel”在此处声明

当前NPM依赖版本 #

"devDependencies": {
    "@types/axios": "^0.14.0",
    "@types/axios-cancel": "^0.2.2",
    "ts-loader": "^9.4.4",
    "typescript": "^5.2.2",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "axios": "^1.5.1",
    "axios-cancel": "^0.2.2"
  }

解决方案 #

方案1：修复类型依赖冲突 #

问题根源是@types/axios-cancel内部依赖的axios类型版本与项目中使用的axios@1.5.1不匹配，导致类型定义不一致。

1. 卸载冗余的axios类型包：

npm uninstall @types/axios

注：axios从v0.21.0版本开始自带类型定义，无需单独安装@types/axios，旧类型包会和自带类型产生冲突。

2. 手动扩展axios类型定义
   在项目中创建types/axios-cancel.d.ts文件，添加以下内容：

import axios from 'axios';

declare module 'axios' {
  interface AxiosStatic {
    cancel: (message?: string) => void;
    cancelAll: () => void;
    Cancel: typeof axios.Cancel;
  }
}

declare module 'axios-cancel' {
  function axiosCancel(axiosInstance: axios.AxiosStatic): void;
  export default axiosCancel;
}

然后在tsconfig.json中确保类型目录被识别：

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

方案2：改用axios自带的取消功能（推荐） #

axios从v0.22.0开始原生支持AbortController取消请求，无需依赖第三方包，类型兼容性更好：

修改http.ts代码如下：

import axios from 'axios';

export const Http = {};

// 维护所有请求的控制器实例
let abortControllers: AbortController[] = [];

// HTTP执行方法，自动绑定取消令牌
Http.execute = (config) => {
  const controller = new AbortController();
  abortControllers.push(controller);
  const request = axios({ ...config, signal: controller.signal });
  
  // 请求完成后清理控制器
  request.finally(() => {
    abortControllers = abortControllers.filter(c => c !== controller);
  });
  
  return request;
};

// 创建独立的取消令牌（用于单个请求取消）
Http.createCancelToken = () => {
  const controller = new AbortController();
  return {
    token: controller.signal,
    cancel: (message?: string) => controller.abort(message)
  };
};

// 取消所有进行中的请求
Http.cancelAll = () => {
  abortControllers.forEach(controller => controller.abort('所有请求已取消'));
  abortControllers = [];
};

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