chore: type check JS in docs (#38423)

* build(deps): update @electron/lint-roller

* chore: type check JS in docs

* docs: add @ts-check and @ts-expect-error to code blocks

* chore: fix type check errors in docs

* chore: add ts-type to blocks

docs/api/app.md

@@ -971,7 +971,7 @@ app.setJumpList([
         title: 'Tool A',
         program: process.execPath,
         args: '--run-tool-a',
-        icon: process.execPath,
+        iconPath: process.execPath,
         iconIndex: 0,
         description: 'Runs Tool A'
       },
@@ -980,7 +980,7 @@ app.setJumpList([
         title: 'Tool B',
         program: process.execPath,
         args: '--run-tool-b',
-        icon: process.execPath,
+        iconPath: process.execPath,
         iconIndex: 0,
         description: 'Runs Tool B'
       }
@@ -1418,8 +1418,8 @@ const fs = require('fs')
 let filepath
 let bookmark
 
-dialog.showOpenDialog(null, { securityScopedBookmarks: true }, (filepaths, bookmarks) => {
-  filepath = filepaths[0]
+dialog.showOpenDialog(null, { securityScopedBookmarks: true }).then(({ filePaths, bookmarks }) => {
+  filepath = filePaths[0]
   bookmark = bookmarks[0]
   fs.readFileSync(filepath)
 })

docs/api/browser-window.md

@@ -104,6 +104,7 @@ window, you have to set both `parent` and `modal` options:
 ```javascript
 const { BrowserWindow } = require('electron')
 
+const top = new BrowserWindow()
 const child = new BrowserWindow({ parent: top, modal: true, show: false })
 child.loadURL('https://github.com')
 child.once('ready-to-show', () => {
@@ -597,7 +598,7 @@ On Linux the setter is a no-op, although the getter returns `true`.
 
 A `boolean` property that determines whether the window is excluded from the application’s Windows menu. `false` by default.
 
-```js
+```js @ts-expect-error=[11]
 const win = new BrowserWindow({ height: 600, width: 600 })
 
 const template = [
@@ -1200,6 +1201,9 @@ Node's [`url.format`](https://nodejs.org/api/url.html#url_url_format_urlobject)
 method:
 
 ```javascript
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow()
+
 const url = require('url').format({
   protocol: 'file',
   slashes: true,
@@ -1213,6 +1217,9 @@ You can load a URL using a `POST` request with URL-encoded data by doing
 the following:
 
 ```javascript
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow()
+
 win.loadURL('http://localhost:8000/post', {
   postData: [{
     type: 'rawData',

docs/api/client-request.md

@@ -104,7 +104,7 @@ The `callback` function is expected to be called back with user credentials:
 * `username` string
 * `password` string
 
-```javascript
+```javascript @ts-type={request:Electron.ClientRequest}
 request.on('login', (authInfo, callback) => {
   callback('username', 'password')
 })
@@ -113,7 +113,7 @@ request.on('login', (authInfo, callback) => {
 Providing empty credentials will cancel the request and report an authentication
 error on the response object:
 
-```javascript
+```javascript @ts-type={request:Electron.ClientRequest}
 request.on('response', (response) => {
   console.log(`STATUS: ${response.statusCode}`)
   response.on('error', (error) => {

docs/api/clipboard.md

@@ -148,10 +148,7 @@ clipboard.
 ```js
 const { clipboard } = require('electron')
 
-clipboard.writeBookmark({
-  text: 'https://electronjs.org',
-  bookmark: 'Electron Homepage'
-})
+clipboard.writeBookmark('Electron Homepage', 'https://electronjs.org')
 ```
 
 ### `clipboard.readFindText()` _macOS_

docs/api/context-bridge.md

@@ -18,7 +18,7 @@ contextBridge.exposeInMainWorld(
 )
 ```
 
-```javascript
+```javascript @ts-nocheck
 // Renderer (Main World)
 
 window.electron.doThing()
@@ -104,7 +104,7 @@ contextBridge.exposeInIsolatedWorld(
 )
 ```
 
-```javascript
+```javascript @ts-nocheck
 // Renderer (In isolated world id1004)
 
 window.electron.doThing()

docs/api/desktop-capturer.md

@@ -10,7 +10,9 @@ title is `Electron`:
 
 ```javascript
 // In the main process.
-const { desktopCapturer } = require('electron')
+const { BrowserWindow, desktopCapturer } = require('electron')
+
+const mainWindow = new BrowserWindow()
 
 desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
   for (const source of sources) {
@@ -22,7 +24,7 @@ desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources =
 })
 ```
 
-```javascript
+```javascript @ts-nocheck
 // In the preload script.
 const { ipcRenderer } = require('electron')
 

docs/api/dialog.md

@@ -72,7 +72,7 @@ and a directory selector, so if you set `properties` to
 `['openFile', 'openDirectory']` on these platforms, a directory selector will be
 shown.
 
-```js
+```js @ts-type={mainWindow:Electron.BrowserWindow}
 dialog.showOpenDialogSync(mainWindow, {
   properties: ['openFile', 'openDirectory']
 })
@@ -139,7 +139,7 @@ and a directory selector, so if you set `properties` to
 `['openFile', 'openDirectory']` on these platforms, a directory selector will be
 shown.
 
-```js
+```js @ts-type={mainWindow:Electron.BrowserWindow}
 dialog.showOpenDialog(mainWindow, {
   properties: ['openFile', 'openDirectory']
 }).then(result => {

docs/api/incoming-message.md

@@ -89,7 +89,7 @@ tuples. So, the even-numbered offsets are key values, and the odd-numbered
 offsets are the associated values. Header names are not lowercased, and
 duplicates are not merged.
 
-```javascript
+```javascript @ts-type={response:Electron.IncomingMessage}
 // Prints something like:
 //
 // [ 'user-agent',
@@ -100,5 +100,5 @@ duplicates are not merged.
 //   '127.0.0.1:8000',
 //   'ACCEPT',
 //   '*/*' ]
-console.log(request.rawHeaders)
+console.log(response.rawHeaders)
 ```

docs/api/ipc-main.md

@@ -83,14 +83,14 @@ If `listener` returns a Promise, the eventual result of the promise will be
 returned as a reply to the remote caller. Otherwise, the return value of the
 listener will be used as the value of the reply.
 
-```js title='Main Process'
+```js title='Main Process' @ts-type={somePromise:(...args:unknown[])=>Promise<unknown>}
 ipcMain.handle('my-invokable-ipc', async (event, ...args) => {
   const result = await somePromise(...args)
   return result
 })
 ```
 
-```js title='Renderer Process'
+```js title='Renderer Process' @ts-type={arg1:unknown} @ts-type={arg2:unknown}
 async () => {
   const result = await ipcRenderer.invoke('my-invokable-ipc', arg1, arg2)
   // ...

docs/api/ipc-renderer.md

@@ -101,7 +101,7 @@ The main process should listen for `channel` with
 
 For example:
 
-```javascript
+```javascript @ts-type={someArgument:unknown} @ts-type={doSomeWork:(arg:unknown)=>Promise<unknown>}
 // Renderer process
 ipcRenderer.invoke('some-name', someArgument).then((result) => {
   // ...

docs/api/menu.md

@@ -147,7 +147,7 @@ can have a submenu.
 
 An example of creating the application menu with the simple template API:
 
-```javascript
+```javascript @ts-expect-error=[107]
 const { app, Menu } = require('electron')
 
 const isMac = process.platform === 'darwin'
@@ -267,7 +267,7 @@ menu on behalf of the renderer.
 
 Below is an example of showing a menu when the user right clicks the page:
 
-```js
+```js @ts-expect-error=[21]
 // renderer
 window.addEventListener('contextmenu', (e) => {
   e.preventDefault()
@@ -289,7 +289,7 @@ ipcMain.on('show-context-menu', (event) => {
     { label: 'Menu Item 2', type: 'checkbox', checked: true }
   ]
   const menu = Menu.buildFromTemplate(template)
-  menu.popup(BrowserWindow.fromWebContents(event.sender))
+  menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
 })
 ```
 

docs/api/message-channel-main.md

@@ -17,7 +17,8 @@ Example:
 
 ```js
 // Main process
-const { MessageChannelMain } = require('electron')
+const { BrowserWindow, MessageChannelMain } = require('electron')
+const w = new BrowserWindow()
 const { port1, port2 } = new MessageChannelMain()
 w.webContents.postMessage('port', null, [port2])
 port1.postMessage({ some: 'message' })
@@ -26,9 +27,9 @@ port1.postMessage({ some: 'message' })
 const { ipcRenderer } = require('electron')
 ipcRenderer.on('port', (e) => {
   // e.ports is a list of ports sent along with this message
-  e.ports[0].on('message', (messageEvent) => {
+  e.ports[0].onmessage = (messageEvent) => {
     console.log(messageEvent.data)
-  })
+  }
 })
 ```
 

docs/api/net-log.md

@@ -5,7 +5,7 @@
 Process: [Main](../glossary.md#main-process)
 
 ```javascript
-const { netLog } = require('electron')
+const { app, netLog } = require('electron')
 
 app.whenReady().then(async () => {
   await netLog.startLogging('/path/to/net-log')

docs/api/protocol.md

@@ -32,7 +32,7 @@ To have your custom protocol work in combination with a custom session, you need
 to register it to that session explicitly.
 
 ```javascript
-const { session, app, protocol } = require('electron')
+const { app, BrowserWindow, net, protocol, session } = require('electron')
 const path = require('path')
 const url = require('url')
 
@@ -41,11 +41,11 @@ app.whenReady().then(() => {
   const ses = session.fromPartition(partition)
 
   ses.protocol.handle('atom', (request) => {
-    const path = request.url.slice('atom://'.length)
-    return net.fetch(url.pathToFileURL(path.join(__dirname, path)))
+    const filePath = request.url.slice('atom://'.length)
+    return net.fetch(url.pathToFileURL(path.join(__dirname, filePath)).toString())
   })
 
-  mainWindow = new BrowserWindow({ webPreferences: { partition } })
+  const mainWindow = new BrowserWindow({ webPreferences: { partition } })
 })
 ```
 
@@ -121,17 +121,17 @@ Either a `Response` or a `Promise<Response>` can be returned.
 Example:
 
 ```js
-import { app, protocol } from 'electron'
-import { join } from 'path'
-import { pathToFileURL } from 'url'
+const { app, net, protocol } = require('electron')
+const { join } = require('path')
+const { pathToFileURL } = require('url')
 
 protocol.registerSchemesAsPrivileged([
   {
     scheme: 'app',
     privileges: {
       standard: true,
       secure: true,
-      supportsFetchAPI: true
+      supportFetchAPI: true
     }
   }
 ])
@@ -147,7 +147,7 @@ app.whenReady().then(() => {
       }
       // NB, this does not check for paths that escape the bundle, e.g.
       // app://bundle/../../secret_file.txt
-      return net.fetch(pathToFileURL(join(__dirname, pathname)))
+      return net.fetch(pathToFileURL(join(__dirname, pathname)).toString())
     } else if (host === 'api') {
       return net.fetch('https://api.my-server.com/' + pathname, {
         method: req.method,