components.d.ts声明组件类型的作用

zyf136714935062025-08-31 16:21

全局注册组件的代码，index.ts

c 复制代码

import LayoutBasicPage from './layout/basic-page'const components = [
 
  LayoutBasicPage,

]const install = (app: App) => {
  for (const component of components) {
    // 注意全局组件必须要有name属性
    app.component(component.name, component)
  }
}

这时跟index.ts新建一个同个级别的components.d.ts

c 复制代码

import '@vue/runtime-core'

declare module '@vue/runtime-core' {
  // GlobalComponents for Volar
  export interface GlobalComponents {
    LayoutBasicPage: typeof import('./layout/basic-page')['default']
  }
}

因为这两段代码作用完全不同，且互不替代的

文件	运行时用？	给谁用？	目的
index.ts	会打包进最终 JS	Vue 运行时	真正注册全局组件，让浏览器能渲染
components.d.ts	编译阶段就被删除	TypeScript / Volar	告诉 TS「模板里写时是合法组件，并提供类型提示」

总结：运行时注册 ≠ 编译时类型

你在 index.ts 里用 app.component(component.name, component) 把组件注册到 Vue 运行时------浏览器里可以正常渲染。

例如：

c 复制代码

<LayoutBasicPage title="xxx" />

TypeScript 在编译阶段并不知道你运行过这段代码，因此当你在模板里写时，它会报错：

❗ Cannot find name 'LayoutBasicPage'.

也无法提示 title 是什么类型。