Typescript 在其他文件中导入接口会抛出错误

Question

我是 Typescript 新手，正在将其用于与 vue.js 一起使用的 Web 应用程序。

我发现建议为打字稿中的所有内容分配一个类型，并且在我的网络应用程序中，我在具有相同类型的文件之间传递一些对象。

我为这些对象创建了一些接口，以便我可以为它们分配类型并将它们添加到文件 /src/types/index.ts

export interface User {
    slug: string;
    name: string;
    email: string;
};

export interface Page {
    count: number;
    current_page: number;
    has_next: boolean;
    has_prev: boolean;
    page_size: number;
    total_pages: number;
};

当我将其导入另一个文件时

import { Page } from '@/types';

我收到错误：

语法错误：请求的模块'/src/types/index.ts?t=1726778005111'不提供名为'Page'的导出

起初我认为这是我的文件结构以及引用导入方式的错误。 然而，在尝试了很多方法都无济于事之后，我尝试在同一个文件中导出 const。

/src/types/index.ts

export const DATA = "DATA";

当我尝试导入 const 时它起作用了！

import { DATA } from '@/types';
console.log(DATA);

没有错误，我可以查看数据。

这里发生了什么，我是否遗漏了导出接口应如何工作的内容？ 我不想在每个模块内的整个代码中添加接口并复制粘贴相同的代码。

这也是我的 tsconfig.js

{
  "compilerOptions": {
    "target": "ESNext",
    "jsx": "preserve",
    "lib": ["DOM", "ESNext"],
    "baseUrl": ".",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "paths": {
      "@/*": ["src/*"]
    },
    "resolveJsonModule": true,
    "types": [
      "vite/client",
      "vite-plugin-vue-layouts/client",
      "unplugin-vue-router/client"
    ],
    "allowJs": true,
    "strict": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "skipLibCheck": true
  },
  "include": [
    "src/**/*",
    "src/**/*.vue",
  ],
  "exclude": ["dist", "node_modules", "cypress"],
  "references": [{ "path": "./tsconfig.node.json" }],
}

Answer 1

简单的解决方案：

• 将路径从

  '@/types'

  更改为相对路径，例如：

  '/src/types/index.ts'