vue+ts中引入组件自动提示 declare module

Posted 2022-12-07 奥特曼　

在我们引入vant UI 组件库时 只要我们输入一个<van- 就会出来很多提示，只要你记得组件的单词或者字母，就可以直接使用，非常的方便。

它是如何实现的呢？

我们随便双击一个vant组件进入到index.d.ts中

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

可以发现 用到了ts中的 declare module  意为声明模块，可以让vue知道这是一个组件，当然我们自己定义的组件，使用相同的语法同样可以实现

例如 types/components.d.ts

import CpNavBar from '@/components/CpNavBar.vue'

declare module 'vue' 
  interface GlobalComponents 
    CpNavBar: typeof CpNavBar
    // 可以写入多个
  

使用：