前端开发小技巧 - 【TS + Vue3】- 给组件添加类型

前言

• 添加组件类型的方式有两种：
  • 局部组件；
  • 全局组件、自动注册组件：

一、局部组件

• 显性 的 导入组件 ，会 自动推导 出 组件类型；
• 就是使用 import xxx from 'xxx'; 这种方式导入组件，就会有类型提示；
• 但是如果我们使用组件的 自动注册插件 的话，是 没有类型提示 的；

二、全局组件、自动注册组件

• 没有显性导入组件，需要 添加全局组件类型；

2.1 声明 类型声明文件

• 文件位置 ：
  • src/types/components.d.ts；

2.2 固定语法

// 1.导入组件
import xxx from 'xxx';

// 2.固定写法
// 用来扩展Vue模块下的类型
declare module 'vue' {
  // 如果想扩展一个全局组件类型的话，就必须在 GlobalComponents 下面扩展（固定写法）；
  interface GlobalComponents {
    // 添加组件类型
    // 导入的组件是个对象，可以使用 typeof 操作符得到组件具体的类型，再将类型给 组件 去使用
    // typeof 在 TypeScript 中用于获取 变量 活 对象 的类型，因此操作符后面跟的始终是一个变量
    组件名称: typeof 组件名称;
  }
}

2.3 示例展示

import CpNavBar form '@/component/CpNavBar/index.vue';

declare module 'vue' {
  interface GlobalComponents {
    CpNavBar: typeof CpNavBar;
  }
}