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

Posted 2023-03-16

【中文标题】如何将类型从 Vue3 组件导出到全局范围？

【英文标题】：How to export types from Vue3 component to global scope?

【发布时间】：2021-06-24 14:45:24

【问题描述】：

我有两个全局注册的组件 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')

子组件（摘录）

export type ChildComponentEvent = 
  message: string


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

父组件（摘录）

import  ChildComponentEvent  from './ChildComponent'

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

【参考方案1】：

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

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

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

您可以在 typescript 中声明全局类型和接口。如果您想从模块中执行此操作（例如用于声明 Vue 组件的文件单元），您可以使用 declare global syntax:

declare global 
  interface SomeGlobalInterface 
    ...
  

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

通常建议避免使用全局类型声明，这可能会导致冲突和丢失类型（例如，当您尝试在不同的 tsconfig 环境中导入使用全局类型的模块时，这在单元测试中经常出现，例如)。

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

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