Nuxt•5d ago

Typescript is not recognized well for Module Author

https://github.com/nuxt/module-builder/issues/597

GitHub

Typescript is not recognized well · Issue #597 · nuxt/module-builder

I updated to version 1.0.1 and I'm having a problem recognizing the typescript structure of the components. For example now in my project in the file: ".nuxt/components.d.ts" there is...

5 Replies

kapa.ai•5d ago

Hi @Cesxhin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're having issues with TypeScript recognition when authoring Nuxt modules. Based on the knowledge sources, there are several important considerations for Nuxt module authors working with TypeScript. TypeScript Version Compatibility Nuxt has been regularly updating its TypeScript support. Recent PRs show updates to TypeScript versions 5.5.3, 5.6.3, and 5.8.3 in the Nuxt codebase, indicating ongoing maintenance of TypeScript compatibility Link to TypeScript update PR. Adding Type Declarations in Modules When authoring Nuxt modules, you can add type declarations using the addTypeTemplate utility from @nuxt/kit:

import { defineNuxtModule, addTypeTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `// Generated by my-module
        interface MyModuleNitroRules {
          myModule?: { foo: 'bar' }
        }
        declare module 'nitropack' {
          interface NitroRouteRules extends MyModuleNitroRules {}
          interface NitroRouteConfig extends MyModuleNitroRules {}
        }
        export {}`
    })
  }
})

import { defineNuxtModule, addTypeTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `// Generated by my-module
        interface MyModuleNitroRules {
          myModule?: { foo: 'bar' }
        }
        declare module 'nitropack' {
          interface NitroRouteRules extends MyModuleNitroRules {}
          interface NitroRouteConfig extends MyModuleNitroRules {}
        }
        export {}`
    })
  }
})

For more granular control, you can use the prepare:types hook Link to module type declarations. Recent Issues with Type Exports There was a recent issue (#31665) with exporting types in module.ts that was broken in Nuxt 3.16.2. The issue was that custom types weren't being re-exported properly in the generated types.d.ts file. This was fixed in module-builder v1.0.0 Link to issue. Vue-tsc Version Requirements A recent PR (#28484) highlighted that using an outdated version of vue-tsc can cause type-checking issues with Nuxt. The recommendation is to use vue-tsc@^2 or vue-tsc@latest instead of older versions Link to vue-tsc PR. Best Practices for Module Authors When authoring modules: 1. Always prefix exposed interfaces to avoid conflicts 2. Be TypeScript-friendly - using TypeScript benefits users even when they're not using TypeScript directly 3. Avoid CommonJS syntax - use native ESM 4. Consider migrating from JavaScript to TypeScript by renaming .js files to .ts Link to module best practices If you're experiencing specific issues with type recognition in your module, you might want to check: - Your tsconfig.json configuration - Whether you're using the latest version of vue-tsc - If you're properly exporting types from your module - If you're using the addTypeTemplate utility correctly For more detailed guidance, you might want to check the specific issue you referenced (#597) in the module-builder repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@552606377067937792> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

CesxhinOP•5d ago

@kapa.ai not recognized files components with *.d.ts

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're having issues with Nuxt not recognizing component files with .d.ts extensions. Let me explain how component recognition works in Nuxt and how to handle TypeScript declaration files. Component Recognition in Nuxt By default, Nuxt recognizes components based on the file extensions specified in your Nuxt configuration. However, .d.ts files are TypeScript declaration files, not actual components, so they aren't automatically registered as components. You can control which file extensions are recognized as components by configuring the components option in your nuxt.config.ts:

export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      extensions: ['.vue'],
    }
  ]
})

export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      extensions: ['.vue'],
    }
  ]
})

This explicitly tells Nuxt to only register .vue files as components Link to component extensions documentation. TypeScript Declaration Files TypeScript declaration files (.d.ts) serve a different purpose - they provide type information to TypeScript but don't contain actual implementation code. They're not meant to be registered as components. If you're trying to add global type definitions, you should place them in a types directory and ensure they're properly structured. For example:

// ~/types/my-types.d.ts
declare global {
  interface IMongoCase {
    test: string
  }
}

// tell TypeScript that this file is a module
export {}

// ~/types/my-types.d.ts
declare global {
  interface IMongoCase {
    test: string
  }
}

// tell TypeScript that this file is a module
export {}

This makes the type available globally without needing to import it in each file Link to Stack Overflow answer. Module Type Declarations If you're developing a Nuxt module and want to add type declarations, you should use the addTypeTemplate utility:

import { defineNuxtModule, addTypeTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `// Generated by my-module
        // Your type definitions here
        export {}`
    })
  }
})

import { defineNuxtModule, addTypeTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `// Generated by my-module
        // Your type definitions here
        export {}`
    })
  }
})

This properly registers your type declarations with Nuxt Link to module type declarations. If you're experiencing specific issues with your setup, please provide more details about your project structure and configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@552606377067937792> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Typescript is not recognized well for Module Author

Did you find this page helpful?