React项目中api.d.ts提示非模块错误(TS2306)求助

问题场景 #

在React项目中集成API，将前端作为API访问接口，创建了以下文件：

• api.js：封装axios请求，导出getAllCustomers方法
• api.d.ts：定义Customer接口及模块声明
• server.js：Express后端服务，转发API请求
• GetAllCustomerDetails.tsx：React组件，尝试导入getAllCustomers获取数据

但在组件中导入时出现错误：

File 'd:/Courses/React/TEST-2/api-frontend/src/api.d.ts' is not a module.ts(2306)

调整tsconfig.app.json和tsconfig.node.json的module为commonjs、target为ES6后，问题仍未解决。

解决方案 #

1. 确保.d.ts文件符合模块规范 #

TypeScript仅将包含import/export语句的文件视为模块，针对你的场景，有两种正确的声明方式：

方式一：直接导出类型

如果api.d.ts是为同目录下的api.js提供类型，直接导出接口和函数类型即可：

// api.d.ts
export interface Customer {
  id: number;
  name: string;
  // 补充你的客户字段
}

export function getAllCustomers(): Promise<Customer[]>;

方式二：使用模块声明包裹

若需明确为指定JS模块补类型，用declare module包裹：

// api.d.ts
declare module './api' {
  export interface Customer {
    id: number;
    name: string;
  }

  export function getAllCustomers(): Promise<Customer[]>;
}

2. 修正组件中的导入路径 #

不要直接导入.d.ts文件，TypeScript会自动关联同名的.js和.d.ts文件。确保组件里的导入指向api.js：

// GetAllCustomerDetails.tsx
import { getAllCustomers } from './api';

3. 检查tsconfig配置 #

确保tsconfig.app.json的include包含src下所有文件，同时配置正确的模块解析策略：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "moduleResolution": "NodeNext", // 或Node16，提升模块解析准确性
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true // 可选，开启严格模式有助于提前发现类型问题
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

4. 清理缓存并重启服务 #

VS Code的TypeScript服务可能缓存旧的类型信息，按Ctrl+Shift+P调出命令面板，输入Restart TypeScript Server重启服务。如果使用Vite等构建工具，可删除node_modules/.cache目录后重新启动项目。

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