How to add types for virtual modules?

[Lisianthus-A]

I'm writing a library that generates a virtual module at runtime, which users can import it in JavaScript or TypeScript, just like:

import { msg } from "virtual:my-plugin";
console.log(msg);

But I get Cannot find module 'virtual:my-plugin' or its corresponding type declarations.ts(2307) in vscode.

Here is the plugin code:

import type { PluginOption } from "vite";

function MyPlugin(): PluginOption {
  const virtualModuleId = "virtual:my-plugin";
  const resolvedVirtualModuleId = "\0" + virtualModuleId;

  return {
    name: "my-plugin",
    resolveId(id) {
      if (id === virtualModuleId) {
        return resolvedVirtualModuleId;
      }
    },
    load(id) {
      if (id === resolvedVirtualModuleId) {
        return `export const msg = "from virtual module"`;
      }
    },
  };
}

export default MyPlugin;

how can I include type definitions for this virtual module to fix it?

[chenxch]

You need to add the type declaration.

// module.d.ts
declare module 'virtual:*' {
  // eslint-disable-next-line
  const component: any;
  export default component;
}

[Lisianthus-A]

thank you

[benjaminpreiss]

I was wondering... Where does this module.d.ts file go?

[Lisianthus-A]

I was wondering... Where does this module.d.ts file go?

Anywhere, just in package.json files field.

[jamesschinnerplxs]

Can a plugin generate the declaration files for you?

[IARI]

Yes,, that!
the only reason i'm looking into virtual modules right now is, that I want to provide computed types, and i want to be able to use them during devlopment, with IDE support - is that completely impossible right now?

[EdwardLemayDev]

Was looking into something like this recently, and I found that Sveltekit does it really well with their Generated types.

From what I understand, their Vite plugin generates $types.d.ts files with relevant types for each route in a mirrored file structure in .sveltekit/types (src/routes/home/+page.js|ts will have a corresponding .sveltekit/types/src/routes/home/$type.d.ts). They also generate a tsconfig file with rootDirs set to the project's root and the generated types folder.

From there, when creating a project, the generated tsconfig file is extended by either the jsconfig or tsconfig of the project itself, giving you access to the generated types for any route components by simply referencing ./$type.