diff --git a/build-system/common/update-packages.js b/build-system/common/update-packages.js
index fe06b890695b..e45f3b53e689 100644
--- a/build-system/common/update-packages.js
+++ b/build-system/common/update-packages.js
@@ -179,14 +179,6 @@ function patchShadowDom() {
 
   writeIfUpdated(patchedName, file);
 }
-/**
- * Adds a missing export statement to the preact module.
- */
-function patchPreact() {
-  fs.ensureDirSync('node_modules/preact/dom');
-  const file = `export { render, hydrate } from 'preact';`;
-  writeIfUpdated('node_modules/preact/dom/index.js', file);
-}
 
 /**
  * Deletes the map file for rrule, which breaks closure compiler.
@@ -235,7 +227,6 @@ function updatePackages() {
   patchIntersectionObserver();
   patchResizeObserver();
   patchShadowDom();
-  patchPreact();
   removeRruleSourcemap();
   if (isCiBuild()) {
     runNpmChecks();
diff --git a/build-system/tasks/build-story-localization.js b/build-system/tasks/build-story-localization.js
index a171ed6e8a56..e6dfcd39a4ba 100755
--- a/build-system/tasks/build-story-localization.js
+++ b/build-system/tasks/build-story-localization.js
@@ -23,6 +23,8 @@ function getLanguageCodeFallbacks(languageCode) {
   if (!languageCode) {
     return [FALLBACK_LANGUAGE_CODE];
   }
+
+  /** @type {string[]} */
   const matches = languageCode.match(LANGUAGE_CODE_CHUNK_REGEX) || [];
   return matches.reduce(
     (fallbackLanguageCodeList, _, index) => {
diff --git a/build-system/tasks/e2e/amp-driver.js b/build-system/tasks/e2e/amp-driver.js
index 4ddf1dc2954a..c393b28fafee 100644
--- a/build-system/tasks/e2e/amp-driver.js
+++ b/build-system/tasks/e2e/amp-driver.js
@@ -119,7 +119,7 @@ const EnvironmentBehaviorMap = {
 
 /**
  * @param {string} url
- * @param {{isEmail: boolean}=} opts
+ * @param {{isEmail: boolean}} opts
  * @return {string}
  */
 function getViewerUrl(url, {isEmail} = {isEmail: false}) {
diff --git a/package-lock.json b/package-lock.json
index ee4be1ccc252..4d71326ea35b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "jss-preset-default": "10.8.2",
         "moment": "2.29.4",
         "obj-str": "1.1.0",
-        "preact": "10.5.15",
+        "preact": "10.16.0",
         "react-day-picker": "8.0.0-beta.37",
         "react-jss": "10.8.2",
         "resize-observer-polyfill": "1.5.1",
@@ -175,7 +175,7 @@
         "tempy": "1.0.1",
         "terser": "5.14.2",
         "traverse": "0.6.6",
-        "typescript": "4.5.4",
+        "typescript": "4.9.5",
         "util": "0.12.4"
       }
     },
@@ -21043,9 +21043,9 @@
       }
     },
     "node_modules/preact": {
-      "version": "10.5.15",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.15.tgz",
-      "integrity": "sha512-5chK29n6QcJc3m1lVrKQSQ+V7K1Gb8HeQY6FViQ5AxCAEGu3DaHffWNDkC9+miZgsLvbvU9rxbV1qinGHMHzqA==",
+      "version": "10.16.0",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.16.0.tgz",
+      "integrity": "sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -23550,9 +23550,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
-      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -39466,9 +39466,9 @@
       }
     },
     "preact": {
-      "version": "10.5.15",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.15.tgz",
-      "integrity": "sha512-5chK29n6QcJc3m1lVrKQSQ+V7K1Gb8HeQY6FViQ5AxCAEGu3DaHffWNDkC9+miZgsLvbvU9rxbV1qinGHMHzqA=="
+      "version": "10.16.0",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.16.0.tgz",
+      "integrity": "sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA=="
     },
     "prelude-ls": {
       "version": "1.1.2",
@@ -41268,9 +41268,9 @@
       }
     },
     "typescript": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
-      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true
     },
     "ua-parser-js": {
diff --git a/package.json b/package.json
index 5c013e917bf6..78f5131c6559 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "jss-preset-default": "10.8.2",
     "moment": "2.29.4",
     "obj-str": "1.1.0",
-    "preact": "10.5.15",
+    "preact": "10.16.0",
     "react-day-picker": "8.0.0-beta.37",
     "react-jss": "10.8.2",
     "resize-observer-polyfill": "1.5.1",
@@ -180,7 +180,7 @@
     "tempy": "1.0.1",
     "terser": "5.14.2",
     "traverse": "0.6.6",
-    "typescript": "4.5.4",
+    "typescript": "4.9.5",
     "util": "0.12.4"
   }
 }
diff --git a/src/core/dom/globals.d.ts b/src/core/dom/globals.d.ts
index 963e51bb55f0..c90c6450ed94 100644
--- a/src/core/dom/globals.d.ts
+++ b/src/core/dom/globals.d.ts
@@ -18,17 +18,11 @@ declare global {
   }
 
   interface ShadowRoot {
-    adoptedStyleSheets?: CSSStyleSheet[];
+    adoptedStyleSheets: CSSStyleSheet[];
   }
 
   interface CSSStyleSheet {
-    replaceSync?: (text: string) => void;
-  }
-
-  interface Event {
-    // We assign an `Object` at times, though Typescript's dom lib supports
-    // string or null, so here we allow all three (plus unedfined).
-    data?: Object | string | null;
+    replaceSync: (text: string) => void;
   }
 
   // Fullscreen proprties
diff --git a/src/core/dom/index.js b/src/core/dom/index.js
index 4a8d946204c4..a7618ccf5d9e 100644
--- a/src/core/dom/index.js
+++ b/src/core/dom/index.js
@@ -507,11 +507,9 @@ export function dispatchCustomEvent(node, name, opt_data, opt_options) {
   const data = opt_data || {};
   // Constructors of events need to come from the correct window. Sigh.
   devAssert(node.ownerDocument);
-  const event = node.ownerDocument.createEvent('Event');
-  event.data = data;
 
   const {bubbles, cancelable} = opt_options || DEFAULT_CUSTOM_EVENT_OPTIONS;
-  event.initEvent(name, bubbles, cancelable);
+  const event = new MessageEvent(name, {data, bubbles, cancelable});
   node.dispatchEvent(event);
 }
 
diff --git a/src/preact/bento-ce.js b/src/preact/bento-ce.js
index 6e3b12b9757b..fc75aafc1e96 100644
--- a/src/preact/bento-ce.js
+++ b/src/preact/bento-ce.js
@@ -82,7 +82,10 @@ let win;
  * @param {typeof import('./base-element').PreactBaseElement} BaseElement
  * @param {typeof globalThis} _win
  * @return {typeof HTMLElement}
- */
+ * @template {{
+ *   readyState?: string | undefined;
+ *   pause?: (() => void) | undefined;
+ * }} T */
 function createBentoElementClass(BaseElement, _win = self) {
   if (!ExtendableHTMLElement || win !== _win) {
     win = _win;
@@ -96,7 +99,6 @@ function createBentoElementClass(BaseElement, _win = self) {
 
       /**
        * @type {import('./base-element').PreactBaseElement<T>}
-       * @template T
        */
       this.implementation = new BaseElement(
         /** @type {AmpElement} */ (/** @type {?} */ (this))
diff --git a/src/preact/component/3p-frame.js b/src/preact/component/3p-frame.js
index 270621d4d696..a36af067119b 100644
--- a/src/preact/component/3p-frame.js
+++ b/src/preact/component/3p-frame.js
@@ -64,7 +64,10 @@ function ProxyIframeEmbedWithRef(
     );
   }
 
+  /** @type {import('preact/hooks').MutableRef<any>} */
   const contentRef = useRef(null);
+  // TODO: this should be IFrameEmbedApi, but it causes some minor type issues.
+  /** @type {import('preact/hooks').MutableRef<any>} */
   const iframeRef = useRef(null);
   const count = useMemo(() => {
     if (!countGenerators[type]) {
@@ -75,6 +78,7 @@ function ProxyIframeEmbedWithRef(
 
   const [nameAndSrc, setNameAndSrc] = useState({name: nameProp, src: srcProp});
   const {name, src} = nameAndSrc;
+  /** @type {import('preact/hooks').MutableRef<string?>} */
   const sentinelRef = useRef(null);
 
   useLayoutEffect(() => {
diff --git a/src/preact/component/iframe.js b/src/preact/component/iframe.js
index 9c0ae1d98f90..f2cd70791cd9 100644
--- a/src/preact/component/iframe.js
+++ b/src/preact/component/iframe.js
@@ -71,6 +71,7 @@ export function IframeEmbedWithRef(
     [onReadyStateRef]
   );
 
+  /** @type {import('preact/hooks').MutableRef<HTMLIFrameElement?>} */
   const iframeRef = useRef(null);
 
   // Component API: IframeEmbedDef.Api.
@@ -112,7 +113,7 @@ export function IframeEmbedWithRef(
         iframe.src = iframe.src;
       } else {
         const parent = iframe.parentNode;
-        parent.insertBefore(iframe, iframe.nextSibling);
+        parent?.insertBefore(iframe, iframe.nextSibling);
       }
     }
   }, [playable]);
@@ -137,8 +138,8 @@ export function IframeEmbedWithRef(
     };
 
     const {defaultView} = iframe.ownerDocument;
-    defaultView.addEventListener('message', handler);
-    return () => defaultView.removeEventListener('message', handler);
+    defaultView?.addEventListener('message', handler);
+    return () => defaultView?.removeEventListener('message', handler);
   }, [matchesMessagingOrigin, messageHandler, mount, ready]);
 
   return (
diff --git a/src/preact/component/intersection-observer.js b/src/preact/component/intersection-observer.js
index bb536fd272a5..739aff284399 100644
--- a/src/preact/component/intersection-observer.js
+++ b/src/preact/component/intersection-observer.js
@@ -10,6 +10,7 @@ import {useCallback, useEffect, useRef, useState} from '#preact';
  * @return {function(Element):void}
  */
 export function useIntersectionObserver(callback, ioOptions) {
+  /** @type {import('preact/hooks').MutableRef<import('#core/types/function/types').UnlistenCallback?>} */
   const unobserveRef = useRef(null);
   const refCb = useCallback(
     /** @param {Element} node */
diff --git a/src/preact/preact-dom.d.ts b/src/preact/preact-dom.d.ts
deleted file mode 100644
index 2d104fc35159..000000000000
--- a/src/preact/preact-dom.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Provides type information for a Preact subdirectory.
- *
- * We render/hydrate from 'preact/dom' instead of 'preact' in order to make it more consistent with
- * React. This makes remapping the imports for React builds simple (preact/dom --> react-dom).
- *
- * @fileoverview
- */
-declare module 'preact/dom' {
-  export const hydrate: typeof import('preact').hydrate;
-  export const render: typeof import('preact').render;
-}
diff --git a/src/preact/preact-dom.ts b/src/preact/preact-dom.ts
new file mode 100644
index 000000000000..1bdd1208fad6
--- /dev/null
+++ b/src/preact/preact-dom.ts
@@ -0,0 +1,8 @@
+/**
+ * Re-export the `render`/`hydrate` functions from 'preact' as 'preact/dom' (via
+ * ../../tsconfig.base.json) to make it more consistent with React. This makes
+ * remapping the imports for React builds simple (preact/dom --> react-dom).
+ *
+ * @fileoverview
+ */
+export {hydrate, render} from 'preact';
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 7bac2b4a3da8..21a0f9d0c694 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -39,7 +39,9 @@
       "#test/*": ["./test/*"],
       "#testing/*": ["./testing/*"],
 
-      "#third_party/*": ["./third_party/*"]
+      "#third_party/*": ["./third_party/*"],
+
+      "preact/dom": ["./src/preact/preact-dom.ts"]
     }
   },