Electron+Vue3 进程间通信 报错 ：Property ‘OwlAPI‘ does not exist on type ‘Window & typeof globalThis‘

问题描述

1.electron 的预加载脚本中定义了一个方法

import { ipcRenderer,contextBridge } from 'electron';

//  暴露接口给 renderer进程
contextBridge.exposeInMainWorld('aaabbbccc', {
	// 声明一个通信的方法
   showMessage : () => { 
       	xxxxx
    },
})

2.vue3 的页面中通过 window 对象调用该方法

   window.aaabbbccc.showMessage ()

3.报错了，提示 window 对象中找不到该方法！

Property 'aaabbbccc' does not exist on type 'Window & typeof globalThis'

问题原因

很简单，就是 浏览器的 全局的那个 window 对象 中找不到  ‘aaabbbcc’ 这个属性，
然后就报错了。

解决方案

核心 ： 给全局的 window 对象添加一个 aaabbbccc 属性即可。

操作 ： 在 vue3 项目的 main.ts 文件中添加如下内容即可：

/**
 * 扩展window对象，添加aaabbbccc
 */
declare global {
  interface Window {
      aaabbbccc?: any;
  }
}

添加完成之后，在去调用即可成功，不会再报错了。