Nuxt•6mo ago

What is a standard way of handling typescript in Nuxt3

I'm starting a fresh project and I wonder what should I do about typescript in Nuxt 3. Normally I would create a folder types and put my ordinary types there and import them in my components. But is that a "standard" approach in new Nuxt? Since other stuff is auto imported maybe the expected way is to add this folder to auto imports?

// nuxt.config.ts:
imports: {
  dirs: ['types/*.ts', 'types/**/*.ts'],
},

// nuxt.config.ts:
imports: {
  dirs: ['types/*.ts', 'types/**/*.ts'],
},

Or maybe I should just declare types globally?

// types/whatever.d.ts

declare global {
  type MyType{
    ...
  }
}

export {};

// types/whatever.d.ts

declare global {
  type MyType{
    ...
  }
}

export {};

Or stick to the old way? For example Nuxtr does not even recommend any file structure for types, so maybe there is completely different way of handling it?

3 Replies

Anjjar•6mo ago

Yes, you can simply create your types in the types directory and import them wherever you need them.

JonathanDoerfler•6mo ago

Just create your types folder and declare your types like this:

// ~/types/whatever.ts

export { };

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

  interface MyFancyInterface {
    ...
  }

  const enum GlobalConstEnum {
    ...
  }

  ....
}

// ~/types/whatever.ts

export { };

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

  interface MyFancyInterface {
    ...
  }

  const enum GlobalConstEnum {
    ...
  }

  ....
}

You don't need to import anything thanks tou auto-imports 🙂

Ulrich•5mo ago

Are we obly to install typescript in nuxt ?

Gaming

Programming

What is a standard way of handling typescript in Nuxt3