docs: update context isolation doc

docs/tutorial/context-isolation.md

@@ -4,66 +4,102 @@
 
 Context Isolation is a feature that ensures that both your `preload` scripts and Electron's internal logic run in a separate context to the website you load in a [`webContents`](../api/web-contents.md).  This is important for security purposes as it helps prevent the website from accessing Electron internals or the powerful APIs your preload script has access to.
 
-This means that the `window` object that your preload script has access to is actually a **different** object than the website would have access to.  For example, if you set `window.hello = 'wave'` in your preload script and context isolation is enabled `window.hello` will be undefined if the website tries to access it.
+This means that the `window` object that your preload script has access to is actually a **different** object than the website would have access to.  For example, if you set `window.hello = 'wave'` in your preload script and context isolation is enabled, `window.hello` will be undefined if the website tries to access it.
 
-Every single application should have context isolation enabled and from Electron 12 it will be enabled by default.
-
-## How do I enable it?
-
-From Electron 12, it will be enabled by default. For lower versions it is an option in the `webPreferences` option when constructing `new BrowserWindow`'s.
-
-```javascript
-const mainWindow = new BrowserWindow({
-  webPreferences: {
-    contextIsolation: true
-  }
-})
-```
+Context isolation has been enabled by default since Electron 12, and it is a recommended security setting for _all applications_.
 
 ## Migration
 
-> I used to provide APIs from my preload script using `window.X = apiObject` now what?
+> Without context isolation, I used to provide APIs from my preload script using `window.X = apiObject`. Now what?
 
-Exposing APIs from your preload script to the loaded website is a common usecase and there is a dedicated module in Electron to help you do this in a painless way.
+### Before: context isolation disabled
 
-**Before: With context isolation disabled**
+Exposing APIs from your preload script to a loaded website in the renderer process is a common use-case. With context isolation disabled, your preload script would share a common global `window` object with the renderer. You could then attach arbitrary properties to a preload script:
 
-```javascript
+```javascript title='preload.js'
+// preload with contextIsolation disabled
 window.myAPI = {
   doAThing: () => {}
 }
 ```
 
-**After: With context isolation enabled**
+The `doAThing()` function could then be used directly in the renderer process:
+
+```javascript title='renderer.js'
+// use the exposed API in the renderer
+window.myAPI.doAThing()
+```
 
-```javascript
+### After: context isolation enabled
+
+There is a dedicated module in Electron to help you do this in a painless way. The [`contextBridge`](../api/context-bridge.md) module can be used to **safely** expose APIs from your preload script's isolated context to the context the website is running in. The API will also be accessible from the website on `window.myAPI` just like it was before.
+
+```javascript title='preload.js'
+// preload with contextIsolation enabled
 const { contextBridge } = require('electron')
 
 contextBridge.exposeInMainWorld('myAPI', {
   doAThing: () => {}
 })
 ```
 
-The [`contextBridge`](../api/context-bridge.md) module can be used to **safely** expose APIs from the isolated context your preload script runs in to the context the website is running in. The API will also be accessible from the website on `window.myAPI` just like it was before.
+```javascript title='renderer.js'
+// use the exposed API in the renderer
+window.myAPI.doAThing()
+```
 
-You should read the `contextBridge` documentation linked above to fully understand its limitations.  For instance you can't send custom prototypes or symbols over the bridge.
+Please read the `contextBridge` documentation linked above to fully understand its limitations. For instance, you can't send custom prototypes or symbols over the bridge.
 
-## Security Considerations
+## Security considerations
 
-Just enabling `contextIsolation` and using `contextBridge` does not automatically mean that everything you do is safe.  For instance this code is **unsafe**.
+Just enabling `contextIsolation` and using `contextBridge` does not automatically mean that everything you do is safe. For instance, this code is **unsafe**.
 
-```javascript
+```javascript title='preload.js'
 // ❌ Bad code
 contextBridge.exposeInMainWorld('myAPI', {
   send: ipcRenderer.send
 })
 ```
 
-It directly exposes a powerful API without any kind of argument filtering. This would allow any website to send arbitrary IPC messages which you do not want to be possible. The correct way to expose IPC-based APIs would instead be to provide one method per IPC message.
+It directly exposes a powerful API without any kind of argument filtering. This would allow any website to send arbitrary IPC messages, which you do not want to be possible. The correct way to expose IPC-based APIs would instead be to provide one method per IPC message.
 
-```javascript
+```javascript title='preload.js'
 // ✅ Good code
 contextBridge.exposeInMainWorld('myAPI', {
   loadPreferences: () => ipcRenderer.invoke('load-prefs')
 })
 ```
+
+## Usage with TypeScript
+
+If you're building your Electron app with TypeScript, you'll want to add types to your APIs exposed over the context bridge. The renderer's `window` object won't have the correct typings unless you extend the types with a [declaration file].
+
+For example, given this `preload.ts` script:
+
+```typescript title='preload.ts'
+contextBridge.exposeInMainWorld('electronAPI', {
+  loadPreferences: () => ipcRenderer.invoke('load-prefs')
+})
+```
+
+You can create a `renderer.d.ts` declaration file and globally augment the `Window` interface:
+
+```typescript title='renderer.d.ts'
+export interface IElectronAPI {
+  loadPreferences: () => Promise<void>,
+}
+
+declare global {
+  interface Window {
+    electronAPI: IElectronAPI
+  }
+}
+```
+
+Doing so will ensure that the TypeScript compiler will know about the `electronAPI` property on your global `window` object when writing scripts in your renderer process:
+
+```typescript title='renderer.ts'
+window.electronAPI.loadPreferences()
+```
+
+[declaration file]: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html