类型 “Window & typeof globalThis” 上不存在属性“electronAPI”

1. electron 主进程和渲染进程互相通信

// preload.s

// 可以在 vue 文件中使用的 window 全局方法，需要在 electron-api.ts 文件中去声明 方法
import { ipcRenderer } from 'electron';
contextBridge.exposeInMainWorld('electronAPI', {
  getFilePath: () => ipcRenderer.invoke('get-file-path')
})

// main.ts

import { app, BrowserWindow, ipcMain } from 'electron';
ipcMain.handle('get-file-path', async () => {
  const path = join(__dirname, '../../src/utils/test.js');
  console.log('-----------------', path );
  return path;
});

然后在vue文件中去使用

// App.vue

const exportFile = async () => {
  const res = await window.electronAPI.getFilePath();
  console.log(res);
};

window上未找到类型

2. 解决方案

查看 electron 官网进程通信在ts中使用，可以全局申明文件（render.d.ts），我这里项目搭建时已经存在 electron-env.d.ts,
添加如下代码即可。

// electron-env.d.ts
export interface IElectronAPI {
	// getFilePath 方法时preload.ts中使用的方法，后面添加方法，此处也要同步申明
  getFilePath: () => Promise<void>;
}

declare global {
  interface Window {
    electronAPI: IElectronAPI;
  }
}

添加完成后，需要在tsconfig.json中配置 ts 路径

// tsconfig.json

"include": [
    ...,
    "electron/electron-env.d.ts", // 相对 tsconfig.json 的路径
  ],

这样就解决了 window 上的属性问题（属性丢失）