Vue3 组件二次封装 添加-类型声明

解释：给组件添加类型，让写属性和事件可以有提示

提问：

• vant 的组件为啥有提示？

• 可以使用键盘ctrl+鼠标左键 查看 vant 的组件类型声明文件

发现：

// 核心代码
// 1. 导入组件实例
import NavBar from './NavBar.vue'
// 2. 声明 vue 类型模块
declare module 'vue' {
    // 3. 给 vue  添加全局组件类型，interface 和之前的合并
    interface GlobalComponents {
        // 4. 定义具体组件类型，typeof 获取到组件实例类型
        // typeof 作用是得到对应的TS类型
        VanNavBar: typeof NavBar;
    }
}

给自己封装的 组件添加类型：

types/components.d.ts

// 引入我们的组件
import CpNavBar from '@/components/CpNavBar.vue'

declare module 'vue' {
  interface GlobalComponents {
    // 使用 typeof 拿到组件的类型，给到封装的组件
    CpNavBar: typeof CpNavBar
  }
}

对vant组件进行二次封装

使用我们封装的组件时，也会有提示，没有传title属性也会有提示

验证❓：

1. 看看属性提示，事件提示，鼠标放上去有没有类型。

2. 代码提示不需要组件双闭合，单标签页可以

小结：

• 怎么给全局的组件提供类型？

• 写一个类型声明文件，declare module 'vue' 声明一个 vue 类型模块

• 然后 interface GlobalComponents 书写全局组件的类型

• key组件名称支持大驼峰，value是组件类型,通过 typeof 组件实例得到