typescript - 如何将类型从 Vue3 组件导出到全局范围？

Question

我有两个全局注册的组件 ParentComponent 和 ChildComponent。全局注册的优点之一是全局注册的组件在应用程序中随处可用。换句话说，我不必在其他组件中导入它们来使用它们。不幸的是，关于类型不能说同样的话。要从组件访问类型，我需要导入它(检查下面的 ParentComponent 代码)无论该组件是否已全局注册。有没有一种方法可以将类型从组件导出到“全局”范围并使其在应用程序的任何位置都可用？

ma​​in.ts

import { createApp} from 'vue'

import App from './App.vue'
import ParentComponent from './ParentComponent.vue'
import ChildComponent from './ChildComponent.vue'

const app = createApp(App)

app.component('parent-component', ParentComponent)
app.component('child-component', ChildComponent)

app.mount('#app')

ChildComponent(摘录)

export type ChildComponentEvent = {
  message: string
}

export default defineComponent({
  methods: {
    emitEvent () {
      const event: ChildComponentEvent = {
        message: 'Hello from child'
      }
      this.$emit('child-event', event)
    }
  }
})

ParentComponent(摘录)

import { ChildComponentEvent } from './ChildComponent'

export default defineComponent({
  methods: {
    childEventHandler (event: ChildComponentEvent) {
      console.log(event)
    }
  }
})

Answer 1

首先，把事情弄清楚。这是两个不同且不相关的概念:

Vue 的组件注册让您可以将组件添加到您的应用程序实例，以供您的代码的各个部分在运行时使用，而无需每次都显式加载它们。 Vue 应用程序不必使用 typescript 。

Typescript 的类型在设计和“编译”时起作用，当 typescript 编译为 javascript 时，此信息会被忽略，并且在运行时没有任何影响。无论您编写的是 Vue 还是其他应用程序，Typescript 声明和类型导入/导出规则都适用。

您可以在 typescript 中声明全局类型和接口(interface)。如果你想从一个模块(比如你用来声明你的 Vue 组件的文件单元)做到这一点，你可以使用 declare global syntax :

declare global {
  interface SomeGlobalInterface {
    ...
  }
}

在您的 Typescript 项目中(在 tsconfig.json 文件中配置)，这些类型将全局可用。

通常建议避免全局类型声明，它可能导致冲突和类型缺失(例如，当您尝试在不同的 tsconfig 环境中导入使用全局类型的模块时，这在单元测试中经常发生，例如).

对于每个逻辑代码单元来说，声明和导出其类型以便从需要它们的任何地方导入通常会更好，即使这会使代码更加冗长。您可以将相关类型分组到一个模块中，并且只导入它的类型。

当您只需要键入而不需要值时，请使用 typescript 的 import type 语法(请参阅 modules docs )。这有助于避免在运行时加载不必要的模块并防止模块循环引用。