如何在Vue 3中添加对全局组件的类型支持？

Question

所以我有

Component1

，

<!-- Component1 -->
<script lang="ts" setup>
defineProps<{ msg: string }>()
</script>

<template>
  <p>{{ msg }}</p>
</template>

然后我全局注册，

// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import Component1 from "./Component1.vue"

const app = createApp(App)
app.component("Component1", Component1)
app.mount("#app")

后来我用它作为，

<script setup lang="ts"></script>

<template>
  <Component1 />
</template>

但是我没有得到

Component1

的 props 类型推断。那么如何为这个全局组件添加打字稿支持呢？

Answer 1

vue

包导出一个

GlobalComponents

接口，可以使用全局组件的定义来增强。例如，您可以在

src/global-components.d.ts

中添加模块增强，如 Volar 文档中看到的 :

// src/global-components.d.ts
import Component1 from '@/components/Component1.vue'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    Component1: typeof Component1,
  }
}

Answer 2

我发现 @tony19 的答案几乎是正确的 — Volar 识别了该组件，但没有提供正确的类型提示。相反，我发现我需要延长

vue

// src/global-components.d.ts
import Component1 from '@/components/Component1.vue'

declare module 'vue' {
  export interface GlobalComponents {
    Component1: typeof Component1,
  }
}

Answer 3

其他解决方案对我不起作用。现在我们有了 vue-tsc 和新的 Vue VSCode 插件，事情的工作方式可能与以前有所不同。

经过多次尝试和错误，我终于找到了一个适合我的解决方案：

import "@vue/runtime-core";

declare module "@vue/runtime-core" {
    export interface GlobalComponents {
        Component1: typeof Component1;
    }
}

在

vue

 模块中定义接口对我来说不起作用（

vue

 包似乎确实从 

@vue/runtime-core

 重新导出了所有内容，但 

@vue/runtime-core

 似乎没有导出接口 

GlobalComponents

，因此声明该界面可能会将其放入 

vue

 包中，而不是在 

@vue/runtime-core

 中对其进行扩充）。此外，导入在同一文件中增强接口的模块似乎也至关重要。