Property does not exist on type Window & typeof globalThis

Question

In a Electron-React-Typescript app I'm getting this error: Property 'api' does not exist on type 'Window & typeof globalThis'. window.api.send('open-type-A-window', '');

But in a file index.d.ts I declared interface Window in this way:

declare global {
  namespace NodeJS {
    declare interface Window {
      "electron": {
          openNewWindow(): void;
      },
      "api": {
          send: (channel, data) => {
              ipcRenderer.invoke(channel, data).catch(e => console.log(e))
          },
          receive: (channel, func) => {
            console.log("preload-receive called. args: ");
            ipcRenderer.on(channel, (event, ...args) => func(...args));
          },
          electronIpcSendTo: (window_id: string, channel: string, ...arg: any) => {
            ipcRenderer.sendTo(window_id, channel, arg);
          },
          electronIpcSend: (channel: string, ...arg: any) => {
            ipcRenderer.send(channel, arg);
          },
          electronIpcSendSync: (channel: string, ...arg: any) => {
            return ipcRenderer.sendSync(channel, arg);
          },
          electronIpcOn: (channel: string, listener: (event: any, ...arg: any) => void) => {
            ipcRenderer.on(channel, listener);
          },
          electronIpcOnce: (channel: string, listener: (event: any, ...arg: any) => void) =>
 {
            ipcRenderer.once(channel, listener);
          },
          electronIpcRemoveListener:  (channel: string, listener: (event: any, ...arg: any) 
=> void) => {
            ipcRenderer.removeListener(channel, listener);
          },
          electronIpcRemoveAllListeners: (channel: string) => {
            ipcRenderer.removeAllListeners(channel);
          }
      }
    }
  }
}

I've read this thread: https://github.com/Microsoft/TypeScript/issues/19816 but I didn't get the proper solution.

What should I add / modify in order to avoid this error Property 'api' does not exist on type 'Window & typeof globalThis' ?

• node: v14.5.0
• electron: v11.2.3
• typescript: v4.1.3
• OS: Ubuntu 18.04.4 Desktop

Answer 1

I'm not familiar with React.js but I had the same issue with an Electron-Angular application. By adding the following declaration to my app.module.ts file it allows TypeScript to recognize the api object in window.

You should be able to do the same by adding to your main module in your TS project.

declare global {
  interface Window {
    api?: any;
  }
}

After you should be able to simple execute your code anywhere in your project.

if(window.api) {
  window.api.send('ipcChannel', data);
}