如何避免 typescript + Vue 3 中的“请求的模块不提供名为的导出”错误？

Question

我有这个界面：

产品.ts

import { Category } from "@/Models/Category";

export interface Product {
    id: number;
    name: string;
    slug: string;
    description: string;
    price: number;
    categories: Category[];
    quantity: number;
}

和类别.ts

import { Product } from "@/Models/Product"

export interface Category {    
    id: number
    name: string
    slug: string
    // relations
    products: Product[]   
}

然后我收到这个错误：

未捕获的语法错误：请求的模块“/src/Models/Product.ts?t=1654212769656”不提供名为“Product”的导出（位于 Category.ts:1:1）

我尝试使用导出默认值来解决，并删除正在导入的文件中的括号，但错误仍然存​​在，我该怎么办？

这是我的 tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {    
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }        
  },

  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    }
  ]
}

谢谢。

Answer 1

使用 'import type { Category } from "@/Models/Category" 的正确方法