如何在 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>

但是我没有得到 的 props 的类型推断Component1。那么如何为这个全局组件添加打字稿支持呢？

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 的答案几乎正确 \xe2\x80\x94\xc2\xa0Volar 识别了该组件，但没有提供正确的类型提示。相反发现我需要延长@vue/runtime-core

\n

// src/global-components.d.ts\nimport Component1 from '@/components/Component1.vue'\n\ndeclare module '@vue/runtime-core' {\n  export interface GlobalComponents {\n    Component1: typeof Component1,\n  }\n}\n

\n