Electron 中 ipcRenderer 与 ipcMain 通讯的Typescript实现

在Electron应用程序中，可以使用ipcRenderer和ipcMain模块进行进程间通信。官方文档中也给出了javascript的版本，下面是Typescipt的实现步骤，以及过程中遇到的问题。

在主进程中监听消息

在主进程中，使用ipcMain来设置IPC监听器：

import { ipcMain } from 'electron';

ipcMain.on('setTitle', (event, title) => {
  const webContents = event.sender;
  const win = BrowserWindow.fromWebContents(webContents)
  win?.setTitle(title);
});

ipcMain.handle('ping', (event, value) => {
  return `${value} pong`;
});

通过preload.ts暴露ipcRenderer相关API

默认情况下，前端不直接访问Electron模块，不直接使用ipcRenderer，而是通过preload

import { contextBridge, ipcRenderer } from "electron";

//通过contextBridge 向渲染进程暴露一个全局的window.electronAPI
contextBridge.exposeInMainWorld('electronAPI', {
  modifyTitle: (newTitle: string) => { ipcRenderer.send('setTitle', newTitle) },
  ping: async (data: string) => {
    const result = await ipcRenderer.invoke('ping', data);
    return result;
  }
});

renderer.ts 渲染器使用 preload.ts里的接口

在渲染进程中使用window.electronAPI中的函数

window.electronAPI?.modifyTitle(newTitle);
const result = await window.electronAPI?.ping("ping");

以上是 ipcMain - preload - renderer 三者的示例， 下面是Typescript实现的步骤：

最终的文件目录结构

|-- src
	|-- main.ts
	|-- preload.ts
	|-- renderer.ts
|-- index.html
|-- package.json
|-- tsconfig.json

1. Typescript项目初始化

# 安装typescript
yarn global add typescript
# 查看是否有 tsc 命令
tsc -v 
# init
tsc --init

# 得到一个tsconfig.json的模板，需要修改两处
{
  "compilerOptions": {
    "rootDir": "./src",
		"outDir": "./dist",
  }
}

1. main.ts 里 引入前端入口页面，以及 预加载文件 preload.ts

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, "preload.js"),
  },
});
mainWindow.loadFile(path.join(__dirname, "../index.html"));

1. preload.ts 做为桥梁，暴露ipcRenderer 给前端

// 声明 window.electronAPI, 不然前端会访问不到 electronAPI
declare global {
  interface Window {
    electronAPI: any;
  }
}

contextBridge.exposeInMainWorld('electronAPI', {
});

1. index.html 里 引入 renderer.ts, 注意路径

<!-- 注意路径 -->
<script src="./dist/renderer.js"></script>

1. package.json里运行script, 也是要注意路径

scripts: {
	"start": "tsc && electron ./dist/main.js"
}

完整源码在 https://github.com/vuerust/electron-typescript-starter

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！