Closed2023/10/11にクローズ3

Electron で exposeInMainWorld で生やした Api に型をつけたい

Electron Forge で作成した Webpack + TypeScript の Electron の project で遊んでいる。

preload.ts で exposeInMainWorld() を利用して renderer の window に api を生やしても型の情報は自動的に付与されるわけではないため、自前で用意する必要がある。そのやり方メモ。

公式 Doc に記載があるので参考にして進める。

.d.ts file を作成し、Window interface を拡張する

シンプルに global の Window interface に型を追加すればOK

preload.ts

contextBridge.exposeInMainWorld('electronAPI', {
  loadPreferences: () => ipcRenderer.invoke('load-prefs')
})

loadPreferences を生やした場合は、以下のようにすればOK

renderer.d.ts

export interface IElectronAPI {
  loadPreferences: () => Promise<void>,
}

declare global {
  interface Window {
    electronAPI: IElectronAPI
  }
}

このスクラップは2023/10/11にクローズされました