[Vuejs]-TypeScript Declarations Conflict

by

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.

👤Wenfang Du

1👍

You have to do following:

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
/* eslint-enable */
import * as vue from 'vue';
declare module 'vue' {
  interface HTMLAttributes {
    vModel?: number;
  }
}

However, this will show only in TypeScript code, not in the Vue markup. Reason is that markup get’s its’ intellisense from Vue plugin, not from TypeScript language service.

👤Nenad

1👍

I’ve tried out in my project and it works as follows :

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

  export interface HTMLAttributes {
    vModel?: any;
  }
  export default component
}
👤Boussadjra Brahim

Leave a comment