电子应用程序中带有Typescript的contextBridge.exposeInMainWorld和IPC :无法读取未定义的属性“”send“”_无法读取带有typescript的本机react导航中未定义的属性 - 腾讯云开发者社区

基础概念

contextBridge.exposeInMainWorld 是 Electron 框架中的一个 API，用于在主进程（Main Process）和渲染进程（Renderer Process）之间安全地暴露 API。IPC（Inter-Process Communication）是 Electron 中用于进程间通信的机制。

问题描述

你遇到的问题是：在电子应用程序中，使用 TypeScript 和 contextBridge.exposeInMainWorld 时，出现了“无法读取未定义的属性 'send'”的错误。

原因分析

这个错误通常是由于以下几种原因之一引起的：

未正确初始化 IPC 通道：在主进程中没有正确设置 IPC 通道，导致渲染进程无法访问 send 方法。
拼写错误：在调用 send 方法时，拼写错误或者路径不正确。
类型定义问题：TypeScript 类型定义不正确，导致编译器无法识别 send 方法。

解决方法

1. 确保正确初始化 IPC 通道

在主进程中，确保你已经正确设置了 IPC 通道。例如：

// main.ts
import { app, BrowserWindow, ipcMain } from 'electron';

const mainWindow = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,
    preload: path.join(__dirname, 'preload.js')
  }
});

ipcMain.on('message-from-renderer', (event, arg) => {
  console.log(arg);
  event.sender.send('message-from-main', 'Hello from main process!');
});

2. 确保正确使用 `contextBridge.exposeInMainWorld`

在 preload.js 文件中，确保你正确使用了 contextBridge.exposeInMainWorld：

// preload.js
import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('api', {
  send: (channel, data) => {
    // 允许的白名单通道
    const validChannels = ['message-from-renderer'];
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  receive: (channel, func) => {
    const validChannels = ['message-from-main'];
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, (event, ...args) => func(...args));
    }
  }
});

3. 确保类型定义正确

确保你的 TypeScript 类型定义正确。例如：

// types.ts
declare global {
  interface Window {
    api: {
      send: (channel: string, data: any) => void;
      receive: (channel: string, func: (...args: any[]) => void) => void;
    };
  }
}

然后在你的渲染进程中使用这些 API：

// renderer.ts
window.api.send('message-from-renderer', 'Hello from renderer process!');

window.api.receive('message-from-main', (message) => {
  console.log(message);
});