TypeScript+Vue调用静态方法提示is not a function问题求助

你遇到的这个问题，核心是模块导入与导出方式不匹配，导致调用时拿到的GraphService并不是你定义的那个类。下面我来一步步帮你排查解决：

1. 先检查导入语句是否正确 #

你在GraphService.ts里用了export default默认导出类，所以在Vue组件中必须使用默认导入，不能用命名导入：

// ✅ 正确的导入方式（路径根据你的项目结构调整）
import GraphService from '@/services/GraphService';

如果错误地用了命名导入，就会拿到一个空对象或undefined，自然找不到post方法：

// ❌ 错误的导入方式
import { GraphService } from '@/services/GraphService';

2. 切换为命名导出（可选方案） #

如果你更习惯用命名导入的写法，可以修改GraphService的导出方式：

// GraphService.ts
import axios from 'axios';
export class GraphService { // 去掉default，直接用export导出类
  public static post(query: string, variables: any) {
    return new Promise((resolve) => {
      axios
        .post('https://localhost:44375/api/Graph', { query, variables })
        .then((response) => {
          resolve(response.data.data);
        });
    });
  }
}

之后组件里用命名导入调用即可：

import { GraphService } from '@/services/GraphService';

3. 优化异步方法写法（额外建议） #

你的post方法手动封装了Promise，但axios本身就返回Promise，完全可以简化写法，避免不必要的嵌套：

public static async post(query: string, variables: any) {
  const response = await axios.post('https://localhost:44375/api/Graph', { query, variables });
  return response.data.data;
}

这样代码更简洁，也更符合TypeScript的异步编程规范。

4. 兜底排查：检查TS配置 #

如果以上方法都无效，看看项目根目录的tsconfig.json，确保模块解析配置正确：

{
  "compilerOptions": {
    "module": "ESNext", // 或CommonJS，根据项目环境选择
    "moduleResolution": "node",
    "esModuleInterop": true // 确保默认导出与命名导出能正确交互
  }
}

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