DEV Community

vuerust
vuerust

Posted on

ipcRenderer communicate with ipcMain by Typescript in Electron

In Electron applications, you can use the ipcRenderer and ipcMain modules for inter-process communication. The official documentation provides a version in JavaScript. Below are the steps to implement it in TypeScript, along with the problems encountered during the process.

Listen for messages in the main process

Use ipcMain in the main process to set up IPC listeners:

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`;
});
Enter fullscreen mode Exit fullscreen mode

Expose ipcRenderer APIs through preload.ts

By default, the front-end does not directly access the Electron module or use ipcRenderer. Instead, it does so through preload.ts.

import { contextBridge, ipcRenderer } from "electron";

//expose global window.electronAPI for font-end by contextBridge 
contextBridge.exposeInMainWorld('electronAPI', {
  modifyTitle: (newTitle: string) => { ipcRenderer.send('setTitle', newTitle) },
  ping: async (data: string) => {
    const result = await ipcRenderer.invoke('ping', data);
    return result;
  }
});
Enter fullscreen mode Exit fullscreen mode

renderer.ts uses the interface in preload.ts

In the rendering process, use the functions by window.electronAPI.

window.electronAPI?.modifyTitle(newTitle);
const result = await window.electronAPI?.ping("ping");
Enter fullscreen mode Exit fullscreen mode

Above are examples of ipcMain - preload - renderer. Below are the steps to implement in Typescript:

final directory structure of the files:

|-- src
    |-- main.ts
    |-- preload.ts
    |-- renderer.ts
|-- index.html
|-- package.json
|-- tsconfig.json
Enter fullscreen mode Exit fullscreen mode

1, Typescript project initialization

# install typescript
yarn global add typescript
# check tsc command
tsc -v 
# init
tsc --init

# generate the tsconfig.json，and modify two places
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
  }
}
Enter fullscreen mode Exit fullscreen mode

2, Import the front-end entry page and the preload.ts in main.ts.

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

3, preload.ts serves as a bridge to expose ipcRenderer to the frontend.

// declare the window.electronAPI, nor the font-end can't access electronAPI
declare global {
  interface Window {
    electronAPI: any;
  }
}

contextBridge.exposeInMainWorld('electronAPI', {});
Enter fullscreen mode Exit fullscreen mode

4, Import renderer.ts in index.html. Pay attention to the path: dist

<!-- attention the path -->
<script src="./dist/renderer.js"></script>
Enter fullscreen mode Exit fullscreen mode

5, the start scripts in package.json, also need to pay attention to the path: dist

scripts: {
    "start": "tsc && electron ./dist/main.js"
}
Enter fullscreen mode Exit fullscreen mode

Full source code is available at https://github.com/vuerust/electron-typescript-starter

If you find my article helpful, please feel free to give a tip. Your support will encourage me to keep creating!

Top comments (0)