quasar+electron+webpack+vue3+ts

记录我在使用ipc通信时遇到的ts问题

node：16.15.0

npm：8.5.5

electron：24.1.2

预加载脚本 src-electron\electron-preload.ts

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("mainSizeWinApi", {
  handleDialog: (callback) => ipcRenderer.on('win-close-tips', callback)
});

vue文件中使用

onMounted(() => {
  mainSizeWinApi.handleDialog((e, value) => {
    //获取窗口状态
    const isMac = value.isMac;
    if (isMac) {
      //TODO 当是mac或者勾选了不再提示时向主进程发送消息
      e.sender.send("win-close");
    } else {
      dialogVisible.value = true;
    }
  });
});

 

 就算是挂载到window上还是会报错

类型“Window & typeof globalThis”上不存在属性“mainSizeWinApi”。

以下是解决办法：

Context Isolation | Electron 

在根目录或者 像我一样把类型声明文件都放在types  新建一个renderer.d.ts

quasar\src\types\renderer.d.ts

export interface IElectronAPI {
  handleDialog: (callback) => Promise<void>;
}

declare global {
  interface Window {
    mainSizeWinApi: IElectronAPI;
  }
}

在window下调用mainSizeWinApi就可以啦

 

 

如果对您有所帮助点赞走一波~~~

如需转载请注明出处！