quasar+electron+webpack+vue3+ts

解决Electron应用中IPC通信的TypeScript错误

最新推荐文章于 2024-01-08 14:39:59 发布

原创最新推荐文章于 2024-01-08 14:39:59 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron

quasar 专栏收录该内容

3 篇文章

订阅专栏

文章描述了在使用Electron进行IPC通信时遇到的TypeScript报错问题，主要是因为类型定义不正确。作者提供了详细的解决方案，包括创建自定义的renderer.d.ts文件来定义`IElectronAPI`接口，并将其添加到全局`Window`接口中，从而解决了在Vue文件中调用`mainSizeWinApi`时的类型错误。

记录我在使用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就可以啦