在应用 Vue3.0 试验我的项目中 对我的项目中试验的应用 highlightjs 并以自定义指令的模式来写

其中遇到 用 Typescript 写 Vue3.0 的 Vue.use() 的问题

已在 npm i highlight.js 的状况下

  1. 先定义 Vue 的内部插件highlight.ts
  import Vue from 'vue';import Hljs from 'highlight.js';import 'highlight.js/styles/monokai-sublime.css'interface Highlightjs {[x:string]:any}let Highlight:Highlightjs = {};// let Highlight:any = {};Highlight.install = function (Vue:any,options:any) {    Vue.directive('highlightA',{        inserted:function(el:any){            let blocks = el.querySelectorAll('per code');            for (let i = 0; i < blocks.length; i++) {                const item = blocks[i]                Hljs.highlightBlock(item)            }        }    })    Vue.directive('highlightB',{        componentUpdated:function(el:any){            let blocks = el.querySelectorAll('per code');            for (let i = 0; i < blocks.length; i++) {                const item = blocks[i]                Hljs.highlightBlock(item)            }        }    })}export default Highlight
  1. 在 main.ts 引入
import { createApp } from 'vue'import App from './App.vue'import './index.css'import router from './router';import Highlight from './lib/typescript/highlight';const app = createApp(App)app.use(router)app.use(Highlight)app.mount('#app')

error

大略的意思是 Vue.use() 中短少 我定义的 Highlightjs
而它申请的是 {install:PluginInstallFunction} 的对象
所以间接给它一个对象
    interface Highlightjs {    [x:string]:any    }    //let Highlight:Highlightjs = {};    let Highlight:any = {};