10

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
Rutger Cappendijk
  • 129
  • 2
  • 6
  • 4
    What I do is just a root folder `/types` with an `index.ts` that exports every type one by one. This way you can easily include them with `import { type, anotherType, an wholeOtherType } from '~/types'` without too much work. – Tea_Lover_418 May 18 '22 at 11:44

2 Answers2

13

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 {
    ...
  }

  ....
}
Fennec
  • 1,535
  • 11
  • 26
2

Few corrections to Fenec 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
    }
}

  1. To you tsconfig.json you should add include

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

Gleb Svechnikov
  • 275
  • 1
  • 2
  • 8