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

Question

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

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

类似：

interface Button {
  icon: string,
  link: string
}

是否有某种方法可以使界面在整个项目中都可见？我找不到很多有关 Nuxt 的 TypeScript 集成的信息。

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

对 Fenec 答案进行了一些修正。

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

// ~/types/index.d.ts

export { MyInterface };

declare global {
  interface MyInterface {
        some_field: number
    }
}

2. 您应该在 tsconfig.json 中添加 include

   { “扩展”：“./.nuxt/tsconfig.json”， “包括”： [ “类型/*.d.ts”， ] }

Answer 3

对 Gleb 答案的一个更正 - “include”应该是“includes”（复数）

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

Singular 导致 useNuxtApp 和其他 Nuxt 功能变得“未知”。复数完美运行。