Dynamically generate virtual typings for modules

[cabralpinto]

I wrote a simple Vite plugin that automatically generates a .ts file for each .yaml file to provide proper TypeScript typing for YAML imports. While this works as intended, it has the downside of cluttering my project with .yaml.ts files, which isn’t ideal. Here's the current implementation:

const yaml = (): Plugin => ({
  name: 'vite-plugin-yaml',
  transform(source, id) {
    if (/\.ya?ml$/.test(id))
      return { code: `export default ${JSON.stringify(YAML.parse(source))};` };
  },
  async handleHotUpdate({ file, read }) {
    if (/\.ya?ml$/.test(file))
      await fs.writeFile(
        `${file}.ts`, 
        `export default ${JSON.stringify(YAML.parse(await read()))};`
      );
  }
});

Is there a way to generate virtual typing files or another method that VSCode can recognize for IntelliSense without physically creating .ts files in the workspace? Any insight would be greatly appreciated. Thanks!

[sapphi-red]

By making a typescript plugin, you won't need to generate a .ts/.d.ts file on the file system. For example, https://github.com/mrmckeb/typescript-plugin-css-modules does it in that way.

But using a typescript plugin is a bit hard, so probably you want to avoid that.
https://github.com/mrmckeb/typescript-plugin-css-modules?tab=readme-ov-file#recommended-usage

The other way is to generate a type definition for each module in a single file.

declare module 'src/foo.yaml' {
  const content: any // types here
  export default content
}

declare module 'src/bar.yaml' {
  const content: any // types here
  export default content
}

Then, put that file in .gitignore or some where. Note that this will require vite build or vite dev before type checking.