Browse Source

docs: document type-specific module aliases (#39685)

Erick Zhao 1 year ago
parent
commit
a0ae691a9c
2 changed files with 31 additions and 2 deletions
  1. 17 0
      docs/tutorial/process-model.md
  2. 14 2
      docs/tutorial/tutorial-2-first-app.md

+ 17 - 0
docs/tutorial/process-model.md

@@ -228,6 +228,23 @@ channel with a renderer process using [`MessagePort`][]s. An Electron app can
 always prefer the [UtilityProcess][] API over Node.js [`child_process.fork`][] API when
 there is need to fork a child process from the main process.
 
+## Process-specific module aliases (TypeScript)
+
+Electron's npm package also exports subpaths that contain a subset of
+Electron's TypeScript type definitions.
+
+- `electron/main` includes types for all main process modules.
+- `electron/renderer` includes types for all renderer process modules.
+- `electron/common` includes types for modules that can run in main and renderer processes.
+
+These aliases have no impact on runtime, but can be used for typechecking
+and autocomplete.
+
+```js title="Usage example"
+const { app } = require('electron/main')
+const { shell } = require('electron/common')
+```
+
 [window-mdn]: https://developer.mozilla.org/en-US/docs/Web/API/Window
 [`MessagePort`]: https://developer.mozilla.org/en-US/docs/Web/API/MessagePort
 [`child_process.fork`]: https://nodejs.org/dist/latest-v16.x/docs/api/child_process.html#child_processforkmodulepath-args-options

+ 14 - 2
docs/tutorial/tutorial-2-first-app.md

@@ -222,14 +222,26 @@ with CommonJS module syntax:
 - [app][app], which controls your application's event lifecycle.
 - [BrowserWindow][browser-window], which creates and manages app windows.
 
-:::info Capitalization conventions
+<details><summary>Module capitalization conventions</summary>
 
 You might have noticed the capitalization difference between the **a**pp
 and **B**rowser**W**indow modules. Electron follows typical JavaScript conventions here,
 where PascalCase modules are instantiable class constructors (e.g. BrowserWindow, Tray,
 Notification) whereas camelCase modules are not instantiable (e.g. app, ipcRenderer, webContents).
 
-:::
+</details>
+
+<details><summary>Typed import aliases</summary>
+
+For better type checking when writing TypeScript code, you can choose to import
+main process modules from <code>electron/main</code>.
+
+```js
+const { app, BrowserWindow } = require('electron/main')
+```
+
+For more information, see the [Process Model docs](../tutorial/process-model.md#process-specific-module-aliases-typescript).
+</details>
 
 :::warning ES Modules in Electron