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

Question

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

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

就像是：

interface Button {
  icon: string,
  link: string
}

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

Answer 1

感谢Tea_lover_418，我尝试了他在评论中的建议，并且在声明中效果更好global。

在项目的根目录中创建一个types以index.ts文件命名的目录，添加全局类型声明，如下例所示。就是这样，您无需导入全球可用的任何内容。

// ~/types/index.ts

export { };

declare global {
  type SomeType = [boolean, string, number]; 

  interface MyFancyInterface {
    ...
  }

  const enum GlobalConstEnum {
    ...
  }

  ....
}

Answer 2

对Fennec 答案的修正很少。

1. 我会添加索引。d .ts 而不是 index.ts ，理想情况下应该生成它。

// ~/types/index.d.ts

export { MyInterface };

declare global {
  interface MyInterface {
        some_field: number
    }
}

2. 您应该向 tsconfig.json 添加 include （复数）

  {
    "extends": "./.nuxt/tsconfig.json",
    "includes": [
      "types/*.d.ts"
    ]
  }