如何向 Nuxt 项目添加全局接口答案

【问题标题】：How to add global interfaces to Nuxt project如何向 Nuxt 项目添加全局接口
【发布时间】：2022-07-17 05:29:38
【问题描述】：

我刚开始使用 Nuxt 3，在使用 typescript 功能时遇到了一些问题。

我正在尝试构建一个通用的 NavBar，它可以有多个带有不同链接的按钮。为此，我想创建一个可以作为数组传递给组件的接口。

类似：

interface Button {
  icon: string,
  link: string
}

有没有办法让界面在我的整个项目中都可见？我找不到很多关于 Nuxt 的打字稿集成。

【问题讨论】：

我所做的只是一个根文件夹/types 和一个index.ts，它会逐一导出每种类型。这样您就可以轻松地将它们包含在 import { type, anotherType, an wholeOtherType } from '~/types' 中，而无需太多工作。

标签： typescript nuxt.js nuxtjs3

【解决方案1】：

我ll think i会找到解决办法。我遇到了同样的问题，当我尝试导入这样的界面时：

import {NavBarInterface} from "~/interfaces";

nuxt 将以下错误推送到我的控制台：

然后我删除导入链接，一切都开始正常工作。但我的 IDE（网络风暴）仍然显示给我，然后我需要导入该界面。

显然，这在 IDE 中还没有最终确定，因为 Nuxt 会自动找到这些接口，甚至不需要导入它们。我还注意到如何命名接口所在的文件夹没有区别，如果我将它命名为接口类型，它对我来说是一样的

我自己导出接口的文件是这样的：

export interface NavBarItemInterface {
  link: string,
  description: string,
}

export interface NavBarInterface  extends Array<NavBarItemInterface>{}

【讨论】：