TypeScript 声明冲突

Question

复制：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
  }
}

运行 npm run serve，dev服务器启动后，打印出这些错误：

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 |

我做错了什么？

Answer 1

您必须执行以下操作：

/* 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;
  }
}

但是，这只会显示在 TypeScript 代码中，不会显示在 Vue 标记中。原因是标记的智能感知来自 Vue 插件，而不是来自 TypeScript 语言服务。

Answer 2

我已经在我的项目中试用过，效果如下：

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

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

Answer 3

声明 declare module '*.vue' 应该在全局范围内。即非模块中的顶级声明（其中模块是至少包含一个顶级 import 或 export）的文件。

模块中 declare module 'vue' 形式的声明是一种扩充。有关详细信息，请参阅 Typescript Module Augmentation。

这两组声明应该放在不同的文件中。

TypeScript 声明冲突

TypeScript Declarations Conflict

typescript

vue.js

typescript-typings

vue-cli

vuejs3