[SOLVED] Is there any significant meaning for `.d.ts` filenames except for readability?

Is there any significant meaning for `.d.ts` filenames except for readability?

In my project, there's a shims-vue.d.ts file under src folder:

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Even if I rename shims-vue.d.ts to foo.d.ts, the declarations still take effect, so I'm wondering is there any significant meaning for .d.ts filenames except for readability?

Since whatever I renamed it to, its declarations still work without manually importing the renamed .d.ts file.

Solution

Declaration file represents type definitions for another, JavaScript file (module). Declared module name has to match name of physical JavaScript file that will be imported.

For example, for following to work correctly, both for typings, but also for runtime import:

import { $ } from "jquery";

Your declared module name has to be named "jquery", because your JavaScript file is jquery.js:

declare module "jquery" {
    /...
}

It's not important how you named the declaration file jquery.d.ts or my-declaration.d.ts, etc, as long as declared module name is correct and corresponds to physical JavaScript file.

Module declarations also support wild-cards in the name, so in your case *.vue represents default "shape" of any *.vue file (main.vue, page1.vue, etc).