TypeScript Declarations Conflict

Question

Repro: https://github.com/wenfangdu/d-ts-conflict-repro

shims-vue.d.ts

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

import 'vue'

declare module 'vue' {
  interface HTMLAttributes extends interface {
    vModel?: unknown
  }
}

Run npm run serve, after the dev server starts up, these errors are printed:

ERROR in src/main.ts:2:17
TS7016: Could not find a declaration file for module './App.vue'. 'D:/Repos/d-ts-conflict-repro/src/App.vue.js' implicitly has an 'any' type.
    1 | import { createApp } from 'vue'
  > 2 | import App from './App.vue'
      |                 ^^^^^^^^^^^
    3 | import router from './router'
    4 | import store from './store'
    5 |

ERROR in src/router/index.ts:17:46
TS7016: Could not find a declaration file for module '../views/About.vue'. 'D:/Repos/d-ts-conflict-repro/src/views/About.vue.js' implicitly has an 'any' type.
    15 |     // which is lazy-loaded when the route is visited.
    16 |     component: () =>
  > 17 |       import(/* webpackChunkName: "about" */ '../views/About.vue'),
       |                                              ^^^^^^^^^^^^^^^^^^^^
    18 |   },
    19 | ]
    20 |

What did I do wrong?

Answer 1

The declaration declare module '*.vue' should be in a global scope. i.e. a top-level declaration in a non-module (where a module is a file with at least one top-level import or export).

A declaration of the form declare module 'vue' in a module is an augmentation. For more details see Typescript Module Augmentation.

These two groups of declarations should live in separate files.