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

Question

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.

Answer 1

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).

Answer 2

Yes, d.ts files naming is relevant for module resolution. When resolving import Foo from 'module', tsc will lookup module.ts first and then module.d.ts. Most likely for your case tsc is still finding the declarations using other strategies, like a types or baseUrl config.

If you want to better understand how this works, this command can be helpful

tsc --traceResolution | grep -B 20 "shims-vue.d.ts"

That is completely fine, but, for instance, this issue is a good example of how .d.ts file naming does matter.

See the module resolution docs for a more detailed explanation.