Expose on the globalThis

Note that the filename of the .d.ts has to be different from any existing file!
https://stackoverflow.com/questions/59728371/typescript-d-ts-file-not-recognized

web/packages/next/electron.ts

@@ -1,10 +1,22 @@
-import type { ElectronAPIsType } from "./types/ipc";
+import type { Electron } from "./types/ipc";
 
+// type ElectronAPIsType =
 // TODO (MR):
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ElectronAPIs = (globalThis as unknown as any)[
     // eslint-disable-next-line @typescript-eslint/dot-notation, @typescript-eslint/no-unsafe-member-access
     "ElectronAPIs"
-] as ElectronAPIsType;
+] as Electron;
+
+// /**
+//  * Extend the global object's (`globalThis`) interface to state that it can
+//  * potentially hold a property called `electron`. It will be injected by our
+//  * preload.js script when we're running in the context of our desktop app.
+//  */
+// declare global {
+//     const electron: Electron | undefined;
+// }
+
+// export const globalElectron = globalThis.electron;
 
 export default ElectronAPIs;

web/packages/next/global-electron.d.ts

@@ -0,0 +1,18 @@
+import type { Electron } from "./types/ipc";
+
+/**
+ * Extend the global object's (`globalThis`) interface to state that it can
+ * potentially hold a property called `electron`. It will be injected by our
+ * preload.js script when we're running in the context of our desktop app.
+ */
+declare global {
+    /**
+     * Extra, desktop specific, APIs provided by our Node.js layer.
+     *
+     * This property will defined only when we're running inside our desktop
+     * (Electron) app. It will expose a bunch of functions (see
+     * {@link Electron}) that allow us to communicate with the Node.js layer of
+     * our desktop app.
+     */
+    const electron: Electron | undefined;
+}

web/packages/next/tsconfig.json

@@ -5,5 +5,5 @@
         "lib": ["ESnext", "DOM", "DOM.Iterable", "WebWorker"]
     },
     /* Typecheck all files with the given extensions (here or in subfolders) */
-    "include": ["**/*.ts", "**/*.tsx"]
+    "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts", "global-electron.d.ts"]
 }

web/packages/next/types/ipc.ts

@@ -27,17 +27,19 @@ export enum PICKED_UPLOAD_TYPE {
 }
 
 /**
- * Extra APIs provided by the Node.js layer when our code is running in Electron
+ * Extra APIs provided by our Node.js layer when our code is running inside our
+ * desktop (Electron) app.
  *
  * This list is manually kept in sync with `desktop/src/preload.ts`. In case of
  * a mismatch, the types may lie. See also: [Note: types.ts <-> preload.ts <->
  * ipc.ts]
  *
  * These extra objects and functions will only be available when our code is
- * running as the renderer process in Electron. So something in the code path
- * should check for `isElectron() == true` before invoking these.
+ * running as the renderer process in Electron. These can be accessed by using
+ * the `electron` property of the window (See @{link globalElectron} for a
+ * systematic way of getting at that).
  */
-export interface ElectronAPIsType {
+export interface Electron {
     // - General
 
     /** Return the version of the desktop app. */