How to add global interfaces to Nuxt project

Question

I just started with Nuxt 3 and have been having some trouble with using typescript functionality.

I am trying to build a general NavBar that can have multiple buttons with different links. For this I wanted to make an interface that I can pass as an array to the component.

Something like:

interface Button {
  icon: string,
  link: string
}

Is there some way to make interfaces that are visible throughout my whole project? I can't find a lot about typescript integration for Nuxt.

Answer 1

Thanks to Tea_lover_418, I tried what he suggested in the comment and it works even better with global declaration.

At the root of your project create a directory named types with an index.ts file, add your global types declaration like in the example below. That's it, you don't need to import anything it's available globally.

// ~/types/index.ts

export { };

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

  interface MyFancyInterface {
    ...
  }

  const enum GlobalConstEnum {
    ...
  }

  ....
}

Answer 2

Few corrections to Fennec answer.

1. I would add index.d.ts instead of index.ts and ideal case it should be generated.

// ~/types/index.d.ts

export { MyInterface };

declare global {
  interface MyInterface {
        some_field: number
    }
}

2. To you tsconfig.json you should add includes (plural)

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