From 875ad8c68afe158412219a72780c89026c17a7e2 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@t3.gg>
Date: Wed, 6 Sep 2023 13:05:10 -0700
Subject: [PATCH] Add TypeScript

This reverts commit 9f3aad7772ba8ef4080538e4e5fb175a8ad550f1.
---
 .eslintrc                                     |  23 ++
 .eslintrc.js                                  |  42 ---
 package.json                                  |  18 +-
 playwright.config.js                          |  29 --
 playwright.config.ts                          |  28 ++
 rollup.config.js                              |   8 +-
 src/core/{bardo.js => bardo.ts}               |  32 +-
 src/core/{cache.js => cache.ts}               |  13 +-
 .../{error_renderer.js => error_renderer.ts}  |   7 +-
 ...{form_submission.js => form_submission.ts} | 110 +++---
 .../{head_snapshot.js => head_snapshot.ts}    |  64 ++--
 src/core/drive/{history.js => history.ts}     |  37 ++-
 src/core/drive/{navigator.js => navigator.ts} |  48 ++-
 .../{page_renderer.js => page_renderer.ts}    |  16 +-
 .../{page_snapshot.js => page_snapshot.ts}    |  16 +-
 src/core/drive/{page_view.js => page_view.ts} |  25 +-
 src/core/drive/{preloader.js => preloader.ts} |  19 +-
 .../{progress_bar.js => progress_bar.ts}      |   8 +-
 .../{snapshot_cache.js => snapshot_cache.ts}  |  20 +-
 src/core/drive/view_transitioner.js           |  21 --
 src/core/drive/view_transitioner.ts           |  31 ++
 src/core/drive/{visit.js => visit.ts}         | 145 +++++---
 src/core/{errors.js => errors.ts}             |   0
 ...rame_controller.js => frame_controller.ts} | 291 ++++++++--------
 src/core/frames/frame_redirector.js           |  85 -----
 src/core/frames/frame_redirector.ts           |  86 +++++
 .../{frame_renderer.js => frame_renderer.ts}  |  27 +-
 src/core/frames/frame_view.js                 |  12 -
 src/core/frames/frame_view.ts                 |  15 +
 ...ink_interceptor.js => link_interceptor.ts} |  25 +-
 src/core/{index.js => index.ts}               |  41 ++-
 src/core/native/adapter.ts                    |  18 +
 ...{browser_adapter.js => browser_adapter.ts} |  54 +--
 src/core/renderer.js                          |  86 -----
 src/core/renderer.ts                          | 100 ++++++
 src/core/{session.js => session.ts}           | 213 +++++++-----
 src/core/{snapshot.js => snapshot.ts}         |  22 +-
 .../{stream_actions.js => stream_actions.ts}  |   9 +-
 .../{stream_message.js => stream_message.ts}  |  12 +-
 ...renderer.js => stream_message_renderer.ts} |  20 +-
 src/core/types.ts                             |  16 +
 src/core/{url.js => url.ts}                   |  30 +-
 src/core/{view.js => view.ts}                 |  66 ++--
 .../{frame_element.js => frame_element.ts}    |  51 ++-
 src/elements/{index.js => index.ts}           |   0
 .../{stream_element.js => stream_element.ts}  |  32 +-
 ...ce_element.js => stream_source_element.ts} |   5 +-
 src/globals.d.ts                              |  13 +
 src/http/fetch_request.js                     | 146 --------
 src/http/fetch_request.ts                     | 194 +++++++++++
 .../{fetch_response.js => fetch_response.ts}  |  12 +-
 src/http/index.js                             |   2 -
 src/http/index.ts                             |   5 +
 src/{index.js => index.ts}                    |   0
 ...nce_observer.js => appearance_observer.ts} |  13 +-
 .../{cache_observer.js => cache_observer.ts}  |  10 +-
 ...bserver.js => form_link_click_observer.ts} |  20 +-
 ...it_observer.js => form_submit_observer.ts} |  17 +-
 ...ick_observer.js => link_click_observer.ts} |  23 +-
 .../{page_observer.js => page_observer.ts}    |  19 +-
 ...{scroll_observer.js => scroll_observer.ts} |  11 +-
 ...{stream_observer.js => stream_observer.ts} |  43 ++-
 src/polyfills/custom-elements-native-shim.ts  |  50 +++
 src/polyfills/form-request-submit-polyfill.js |  17 +-
 src/polyfills/{index.js => index.ts}          |   1 +
 .../{submit-event.js => submit-event.ts}      |  16 +-
 src/{script_warning.js => script_warning.ts}  |   2 +-
 src/tests/fixtures/test.js                    | 105 +++---
 ..._script_tests.js => async_script_tests.ts} |   0
 ...{autofocus_tests.js => autofocus_tests.ts} |   4 +-
 ...erver_tests.js => cache_observer_tests.ts} |   0
 ...abled_tests.js => drive_disabled_tests.ts} |   2 +-
 .../{drive_tests.js => drive_tests.ts}        |   0
 ...ests.js => drive_view_transition_tests.ts} |   0
 ...{form_mode_tests.js => form_mode_tests.ts} |   6 +-
 ...sion_tests.js => form_submission_tests.ts} |  24 +-
 ...ion_tests.js => frame_navigation_tests.ts} |   0
 .../{frame_tests.js => frame_tests.ts}        | 109 +++---
 .../{import_tests.js => import_tests.ts}      |   0
 .../{loading_tests.js => loading_tests.ts}    |  10 +-
 ...avigation_tests.js => navigation_tests.ts} |  12 +-
 ...g_tests.js => pausable_rendering_tests.ts} |   0
 ...ts_tests.js => pausable_requests_tests.ts} |   0
 ...{preloader_tests.js => preloader_tests.ts} |   0
 ...{rendering_tests.js => rendering_tests.ts} |  65 ++--
 ...n_tests.js => scroll_restoration_tests.ts} |   0
 .../{stream_tests.js => stream_tests.ts}      |  12 +-
 .../{visit_tests.js => visit_tests.ts}        |  22 +-
 .../{dom_test_case.js => dom_test_case.ts}    |   6 +-
 src/tests/helpers/page.js                     | 288 ----------------
 src/tests/helpers/page.ts                     | 313 ++++++++++++++++++
 .../{ujs_tests.js => ujs_tests.ts}            |   4 +-
 src/tests/{server.mjs => server.ts}           |  26 +-
 .../unit/deprecated_adapter_support_tests.js  |  58 ----
 .../unit/deprecated_adapter_support_tests.ts  |  61 ++++
 .../unit/{export_tests.js => export_tests.ts} |  30 ++
 ...ement_tests.js => stream_element_tests.ts} |   6 +-
 src/{util.js => util.ts}                      |  60 ++--
 tsconfig.json                                 |  17 +
 web-test-runner.config.mjs                    |   2 +-
 yarn.lock                                     | 160 +++++++++
 101 files changed, 2472 insertions(+), 1620 deletions(-)
 create mode 100644 .eslintrc
 delete mode 100644 .eslintrc.js
 delete mode 100644 playwright.config.js
 create mode 100644 playwright.config.ts
 rename src/core/{bardo.js => bardo.ts} (59%)
 rename src/core/{cache.js => cache.ts} (54%)
 rename src/core/drive/{error_renderer.js => error_renderer.ts} (81%)
 rename src/core/drive/{form_submission.js => form_submission.ts} (67%)
 rename src/core/drive/{head_snapshot.js => head_snapshot.ts} (59%)
 rename src/core/drive/{history.js => history.ts} (68%)
 rename src/core/drive/{navigator.js => navigator.ts} (67%)
 rename src/core/drive/{page_renderer.js => page_renderer.ts} (88%)
 rename src/core/drive/{page_snapshot.js => page_snapshot.ts} (80%)
 rename src/core/drive/{page_view.js => page_view.ts} (62%)
 rename src/core/drive/{preloader.js => preloader.ts} (64%)
 rename src/core/drive/{progress_bar.js => progress_bar.ts} (93%)
 rename src/core/drive/{snapshot_cache.js => snapshot_cache.ts} (67%)
 delete mode 100644 src/core/drive/view_transitioner.js
 create mode 100644 src/core/drive/view_transitioner.ts
 rename src/core/drive/{visit.js => visit.ts} (74%)
 rename src/core/{errors.js => errors.ts} (100%)
 rename src/core/frames/{frame_controller.js => frame_controller.ts} (54%)
 delete mode 100644 src/core/frames/frame_redirector.js
 create mode 100644 src/core/frames/frame_redirector.ts
 rename src/core/frames/{frame_renderer.js => frame_renderer.ts} (70%)
 delete mode 100644 src/core/frames/frame_view.js
 create mode 100644 src/core/frames/frame_view.ts
 rename src/core/frames/{link_interceptor.js => link_interceptor.ts} (65%)
 rename src/core/{index.js => index.ts} (67%)
 create mode 100644 src/core/native/adapter.ts
 rename src/core/native/{browser_adapter.js => browser_adapter.ts} (64%)
 delete mode 100644 src/core/renderer.js
 create mode 100644 src/core/renderer.ts
 rename src/core/{session.js => session.ts} (54%)
 rename src/core/{snapshot.js => snapshot.ts} (70%)
 rename src/core/streams/{stream_actions.js => stream_actions.ts} (76%)
 rename src/core/streams/{stream_message.js => stream_message.ts} (59%)
 rename src/core/streams/{stream_message_renderer.js => stream_message_renderer.ts} (51%)
 create mode 100644 src/core/types.ts
 rename src/core/{url.js => url.ts} (61%)
 rename src/core/{view.js => view.ts} (51%)
 rename src/elements/{frame_element.js => frame_element.ts} (67%)
 rename src/elements/{index.js => index.ts} (100%)
 rename src/elements/{stream_element.js => stream_element.ts} (84%)
 rename src/elements/{stream_source_element.js => stream_source_element.ts} (81%)
 create mode 100644 src/globals.d.ts
 delete mode 100644 src/http/fetch_request.js
 create mode 100644 src/http/fetch_request.ts
 rename src/http/{fetch_response.js => fetch_response.ts} (82%)
 delete mode 100644 src/http/index.js
 create mode 100644 src/http/index.ts
 rename src/{index.js => index.ts} (100%)
 rename src/observers/{appearance_observer.js => appearance_observer.ts} (57%)
 rename src/observers/{cache_observer.js => cache_observer.ts} (77%)
 rename src/observers/{form_link_click_observer.js => form_link_click_observer.ts} (70%)
 rename src/observers/{form_submit_observer.js => form_submit_observer.ts} (71%)
 rename src/observers/{link_click_observer.js => link_click_observer.ts} (67%)
 rename src/observers/{page_observer.js => page_observer.ts} (82%)
 rename src/observers/{scroll_observer.js => scroll_observer.ts} (66%)
 rename src/observers/{stream_observer.js => stream_observer.ts} (57%)
 create mode 100644 src/polyfills/custom-elements-native-shim.ts
 rename src/polyfills/{index.js => index.ts} (62%)
 rename src/polyfills/{submit-event.js => submit-event.ts} (73%)
 rename src/{script_warning.js => script_warning.ts} (93%)
 rename src/tests/functional/{async_script_tests.js => async_script_tests.ts} (100%)
 rename src/tests/functional/{autofocus_tests.js => autofocus_tests.ts} (99%)
 rename src/tests/functional/{cache_observer_tests.js => cache_observer_tests.ts} (100%)
 rename src/tests/functional/{drive_disabled_tests.js => drive_disabled_tests.ts} (99%)
 rename src/tests/functional/{drive_tests.js => drive_tests.ts} (100%)
 rename src/tests/functional/{drive_view_transition_tests.js => drive_view_transition_tests.ts} (100%)
 rename src/tests/functional/{form_mode_tests.js => form_mode_tests.ts} (93%)
 rename src/tests/functional/{form_submission_tests.js => form_submission_tests.ts} (99%)
 rename src/tests/functional/{frame_navigation_tests.js => frame_navigation_tests.ts} (100%)
 rename src/tests/functional/{frame_tests.js => frame_tests.ts} (95%)
 rename src/tests/functional/{import_tests.js => import_tests.ts} (100%)
 rename src/tests/functional/{loading_tests.js => loading_tests.ts} (97%)
 rename src/tests/functional/{navigation_tests.js => navigation_tests.ts} (99%)
 rename src/tests/functional/{pausable_rendering_tests.js => pausable_rendering_tests.ts} (100%)
 rename src/tests/functional/{pausable_requests_tests.js => pausable_requests_tests.ts} (100%)
 rename src/tests/functional/{preloader_tests.js => preloader_tests.ts} (100%)
 rename src/tests/functional/{rendering_tests.js => rendering_tests.ts} (92%)
 rename src/tests/functional/{scroll_restoration_tests.js => scroll_restoration_tests.ts} (100%)
 rename src/tests/functional/{stream_tests.js => stream_tests.ts} (92%)
 rename src/tests/functional/{visit_tests.js => visit_tests.ts} (92%)
 rename src/tests/helpers/{dom_test_case.js => dom_test_case.ts} (86%)
 delete mode 100644 src/tests/helpers/page.js
 create mode 100644 src/tests/helpers/page.ts
 rename src/tests/integration/{ujs_tests.js => ujs_tests.ts} (90%)
 rename src/tests/{server.mjs => server.ts} (89%)
 delete mode 100644 src/tests/unit/deprecated_adapter_support_tests.js
 create mode 100644 src/tests/unit/deprecated_adapter_support_tests.ts
 rename src/tests/unit/{export_tests.js => export_tests.ts} (54%)
 rename src/tests/unit/{stream_element_tests.js => stream_element_tests.ts} (96%)
 rename src/{util.js => util.ts} (64%)
 create mode 100644 tsconfig.json

diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 000000000..ff5909ef3
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,23 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-namespace": ["error", { "allowDeclarations": true }],
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "no-unused-vars": "off",
+    "prettier/prettier": ["error"]
+  }
+}
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index ba8803d0b..000000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,42 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true
-  },
-  extends: ["eslint:recommended"],
-  overrides: [
-    {
-      env: {
-        node: true
-      },
-      files: [".eslintrc.{js,cjs}"],
-      parserOptions: {
-        sourceType: "script"
-      }
-    }
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module"
-  },
-  rules: {
-    "comma-dangle": "error",
-    "curly": ["error", "multi-line"],
-    "getter-return": "off",
-    "no-console": "off",
-    "no-duplicate-imports": ["error"],
-    "no-multi-spaces": ["error", { "exceptions": { "VariableDeclarator": true }}],
-    "no-multiple-empty-lines": ["error", { "max": 2 }],
-    "no-self-assign": ["error", { "props": false }],
-    "no-trailing-spaces": ["error"],
-    "no-unused-vars": ["error", { argsIgnorePattern: "_*" }],
-    "no-useless-escape": "off",
-    "no-var": ["error"],
-    "prefer-const": ["error"],
-    "semi": ["error", "never"]
-  },
-  globals: {
-    test: true,
-    setup: true
-  }
-}
diff --git a/package.json b/package.json
index f7a9c0bac..8ed7e21a3 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,9 @@
     "@playwright/test": "^1.28.0",
     "@rollup/plugin-node-resolve": "13.1.3",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@types/multer": "^1.4.5",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
     "@web/dev-server-esbuild": "^0.3.3",
     "@web/test-runner": "^0.15.0",
     "@web/test-runner-playwright": "^0.9.0",
@@ -47,23 +49,29 @@
     "body-parser": "^1.20.1",
     "chai": "~4.3.4",
     "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "express": "^4.18.2",
     "multer": "^1.4.2",
-    "rollup": "^2.35.1"
+    "prettier": "2.6.2",
+    "rollup": "^2.35.1",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "clean": "rm -fr dist",
     "clean:win": "rmdir /s /q dist",
-    "build": "rollup -c",
-    "build:win": "rollup -c",
+    "build": "tsc --noEmit false --declaration true --emitDeclarationOnly true --outDir dist/types && rollup -c",
+    "build:win": "tsc --noEmit false --declaration true --emitDeclarationOnly true --outDir dist/types & rollup -c",
     "watch": "rollup -wc",
-    "start": "node src/tests/server.mjs",
+    "start": "ts-node -O '{\"module\":\"commonjs\"}' src/tests/server.ts",
     "test": "yarn test:unit && yarn test:browser",
     "test:browser": "playwright test",
     "test:unit": "NODE_OPTIONS=--inspect web-test-runner",
     "test:unit:win": "SET NODE_OPTIONS=--inspect & web-test-runner",
     "release": "yarn build && npm publish",
-    "lint": "eslint . --ext .js"
+    "lint": "eslint . --ext .ts"
   },
   "engines": {
     "node": ">= 14"
diff --git a/playwright.config.js b/playwright.config.js
deleted file mode 100644
index a4ee43023..000000000
--- a/playwright.config.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { devices } from "@playwright/test"
-
-const config = {
-  projects: [
-    {
-      name: "chrome",
-      use: { ...devices["Desktop Chrome"] }
-    },
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] }
-    }
-  ],
-  retries: 2,
-  testDir: "./src/tests/",
-  testMatch: /(functional|integration)\/.*_tests\.js/,
-  webServer: {
-    command: "yarn start",
-    url: "http://localhost:9000/src/tests/fixtures/test.js",
-    timeout: 120 * 1000,
-    // eslint-disable-next-line no-undef
-    reuseExistingServer: !process.env.CI
-  },
-  use: {
-    baseURL: "http://localhost:9000/"
-  }
-}
-
-export default config
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 000000000..bef521f7c
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,28 @@
+import { type PlaywrightTestConfig, devices } from "@playwright/test"
+
+const config: PlaywrightTestConfig = {
+  projects: [
+    {
+      name: "chrome",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+  ],
+  retries: 2,
+  testDir: "./src/tests/",
+  testMatch: /(functional|integration)\/.*_tests\.ts/,
+  webServer: {
+    command: "yarn start",
+    url: "http://localhost:9000/src/tests/fixtures/test.js",
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    baseURL: "http://localhost:9000/",
+  },
+}
+
+export default config
diff --git a/rollup.config.js b/rollup.config.js
index 395c4d497..5073079dd 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,4 +1,5 @@
 import resolve from "@rollup/plugin-node-resolve"
+import typescript from "@rollup/plugin-typescript"
 
 import { version } from "./package.json"
 const year = new Date().getFullYear()
@@ -6,7 +7,7 @@ const banner = `/*!\nTurbo ${version}\nCopyright © ${year} 37signals LLC\n */`
 
 export default [
   {
-    input: "src/index.js",
+    input: "src/index.ts",
     output: [
       {
         name: "Turbo",
@@ -20,7 +21,10 @@ export default [
         banner
       }
     ],
-    plugins: [resolve()],
+    plugins: [
+      resolve(),
+      typescript()
+    ],
     watch: {
       include: "src/**"
     }
diff --git a/src/core/bardo.js b/src/core/bardo.ts
similarity index 59%
rename from src/core/bardo.js
rename to src/core/bardo.ts
index 01355fb03..bd6b191f0 100644
--- a/src/core/bardo.js
+++ b/src/core/bardo.ts
@@ -1,12 +1,26 @@
+import { PermanentElementMap } from "./snapshot"
+
+export interface BardoDelegate {
+  enteringBardo(currentPermanentElement: Element, newPermanentElement: Element): void
+  leavingBardo(currentPermanentElement: Element): void
+}
+
 export class Bardo {
-  static async preservingPermanentElements(delegate, permanentElementMap, callback) {
+  readonly permanentElementMap: PermanentElementMap
+  readonly delegate: BardoDelegate
+
+  static async preservingPermanentElements(
+    delegate: BardoDelegate,
+    permanentElementMap: PermanentElementMap,
+    callback: () => void
+  ) {
     const bardo = new this(delegate, permanentElementMap)
     bardo.enter()
     await callback()
     bardo.leave()
   }
 
-  constructor(delegate, permanentElementMap) {
+  constructor(delegate: BardoDelegate, permanentElementMap: PermanentElementMap) {
     this.delegate = delegate
     this.permanentElementMap = permanentElementMap
   }
@@ -28,31 +42,31 @@ export class Bardo {
     }
   }
 
-  replaceNewPermanentElementWithPlaceholder(permanentElement) {
+  replaceNewPermanentElementWithPlaceholder(permanentElement: Element) {
     const placeholder = createPlaceholderForPermanentElement(permanentElement)
     permanentElement.replaceWith(placeholder)
   }
 
-  replaceCurrentPermanentElementWithClone(permanentElement) {
+  replaceCurrentPermanentElementWithClone(permanentElement: Element) {
     const clone = permanentElement.cloneNode(true)
     permanentElement.replaceWith(clone)
   }
 
-  replacePlaceholderWithPermanentElement(permanentElement) {
+  replacePlaceholderWithPermanentElement(permanentElement: Element) {
     const placeholder = this.getPlaceholderById(permanentElement.id)
     placeholder?.replaceWith(permanentElement)
   }
 
-  getPlaceholderById(id) {
+  getPlaceholderById(id: string) {
     return this.placeholders.find((element) => element.content == id)
   }
 
-  get placeholders() {
-    return [...document.querySelectorAll("meta[name=turbo-permanent-placeholder][content]")]
+  get placeholders(): HTMLMetaElement[] {
+    return [...document.querySelectorAll<HTMLMetaElement>("meta[name=turbo-permanent-placeholder][content]")]
   }
 }
 
-function createPlaceholderForPermanentElement(permanentElement) {
+function createPlaceholderForPermanentElement(permanentElement: Element) {
   const element = document.createElement("meta")
   element.setAttribute("name", "turbo-permanent-placeholder")
   element.setAttribute("content", permanentElement.id)
diff --git a/src/core/cache.js b/src/core/cache.ts
similarity index 54%
rename from src/core/cache.js
rename to src/core/cache.ts
index 2c163e6f4..715b7d098 100644
--- a/src/core/cache.js
+++ b/src/core/cache.ts
@@ -1,7 +1,10 @@
+import { Session } from "./session"
 import { setMetaContent } from "../util"
 
 export class Cache {
-  constructor(session) {
+  readonly session: Session
+
+  constructor(session: Session) {
     this.session = session
   }
 
@@ -10,18 +13,18 @@ export class Cache {
   }
 
   resetCacheControl() {
-    this.#setCacheControl("")
+    this.setCacheControl("")
   }
 
   exemptPageFromCache() {
-    this.#setCacheControl("no-cache")
+    this.setCacheControl("no-cache")
   }
 
   exemptPageFromPreview() {
-    this.#setCacheControl("no-preview")
+    this.setCacheControl("no-preview")
   }
 
-  #setCacheControl(value) {
+  private setCacheControl(value: string) {
     setMetaContent("turbo-cache-control", value)
   }
 }
diff --git a/src/core/drive/error_renderer.js b/src/core/drive/error_renderer.ts
similarity index 81%
rename from src/core/drive/error_renderer.js
rename to src/core/drive/error_renderer.ts
index 0e5f2ce39..22deb43e7 100644
--- a/src/core/drive/error_renderer.js
+++ b/src/core/drive/error_renderer.ts
@@ -1,8 +1,9 @@
-import { activateScriptElement } from "../../util"
+import { PageSnapshot } from "./page_snapshot"
 import { Renderer } from "../renderer"
+import { activateScriptElement } from "../../util"
 
-export class ErrorRenderer extends Renderer {
-  static renderElement(currentElement, newElement) {
+export class ErrorRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
+  static renderElement(currentElement: HTMLBodyElement, newElement: HTMLBodyElement) {
     const { documentElement, body } = document
 
     documentElement.replaceChild(newElement, body)
diff --git a/src/core/drive/form_submission.js b/src/core/drive/form_submission.ts
similarity index 67%
rename from src/core/drive/form_submission.js
rename to src/core/drive/form_submission.ts
index 9b72131d4..efb75bc01 100644
--- a/src/core/drive/form_submission.js
+++ b/src/core/drive/form_submission.ts
@@ -1,24 +1,40 @@
 import { FetchRequest, FetchMethod, fetchMethodFromString } from "../../http/fetch_request"
+import { FetchResponse } from "../../http/fetch_response"
 import { expandURL } from "../url"
 import { dispatch, getAttribute, getMetaContent, hasAttribute } from "../../util"
 import { StreamMessage } from "../streams/stream_message"
 
-export const FormSubmissionState = {
-  initialized: "initialized",
-  requesting: "requesting",
-  waiting: "waiting",
-  receiving: "receiving",
-  stopping: "stopping",
-  stopped: "stopped"
+export interface FormSubmissionDelegate {
+  formSubmissionStarted(formSubmission: FormSubmission): void
+  formSubmissionSucceededWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse): void
+  formSubmissionFailedWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse): void
+  formSubmissionErrored(formSubmission: FormSubmission, error: Error): void
+  formSubmissionFinished(formSubmission: FormSubmission): void
 }
 
-export const FormEnctype = {
-  urlEncoded: "application/x-www-form-urlencoded",
-  multipart: "multipart/form-data",
-  plain: "text/plain"
+export type FormSubmissionResult = { success: boolean; fetchResponse: FetchResponse } | { success: false; error: Error }
+
+export enum FormSubmissionState {
+  initialized,
+  requesting,
+  waiting,
+  receiving,
+  stopping,
+  stopped,
+}
+
+enum FormEnctype {
+  urlEncoded = "application/x-www-form-urlencoded",
+  multipart = "multipart/form-data",
+  plain = "text/plain",
 }
 
-function formEnctypeFromString(encoding) {
+export type TurboSubmitStartEvent = CustomEvent<{ formSubmission: FormSubmission }>
+export type TurboSubmitEndEvent = CustomEvent<
+  { formSubmission: FormSubmission } & { [K in keyof FormSubmissionResult]?: FormSubmissionResult[K] }
+>
+
+function formEnctypeFromString(encoding: string): FormEnctype {
   switch (encoding.toLowerCase()) {
     case FormEnctype.multipart:
       return FormEnctype.multipart
@@ -30,13 +46,31 @@ function formEnctypeFromString(encoding) {
 }
 
 export class FormSubmission {
+  readonly delegate: FormSubmissionDelegate
+  readonly formElement: HTMLFormElement
+  readonly submitter?: HTMLElement
+  readonly formData: FormData
+  readonly location: URL
+  readonly fetchRequest: FetchRequest
+  readonly mustRedirect: boolean
   state = FormSubmissionState.initialized
-
-  static confirmMethod(message, _element, _submitter) {
+  result?: FormSubmissionResult
+  originalSubmitText?: string
+
+  static confirmMethod(
+    message: string,
+    _element: HTMLFormElement,
+    _submitter: HTMLElement | undefined
+  ): Promise<boolean> {
     return Promise.resolve(confirm(message))
   }
 
-  constructor(delegate, formElement, submitter, mustRedirect = false) {
+  constructor(
+    delegate: FormSubmissionDelegate,
+    formElement: HTMLFormElement,
+    submitter?: HTMLElement,
+    mustRedirect = false
+  ) {
     this.delegate = delegate
     this.formElement = formElement
     this.submitter = submitter
@@ -49,12 +83,12 @@ export class FormSubmission {
     this.mustRedirect = mustRedirect
   }
 
-  get method() {
+  get method(): FetchMethod {
     const method = this.submitter?.getAttribute("formmethod") || this.formElement.getAttribute("method") || ""
     return fetchMethodFromString(method.toLowerCase()) || FetchMethod.get
   }
 
-  get action() {
+  get action(): string {
     const formElementAction = typeof this.formElement.action === "string" ? this.formElement.action : null
 
     if (this.submitter?.hasAttribute("formaction")) {
@@ -72,7 +106,7 @@ export class FormSubmission {
     }
   }
 
-  get enctype() {
+  get enctype(): FormEnctype {
     return formEnctypeFromString(this.submitter?.getAttribute("formenctype") || this.formElement.enctype)
   }
 
@@ -83,7 +117,7 @@ export class FormSubmission {
   get stringFormData() {
     return [...this.formData].reduce((entries, [name, value]) => {
       return entries.concat(typeof value == "string" ? [[name, value]] : [])
-    }, [])
+    }, [] as [string, string][])
   }
 
   // The submission process
@@ -116,7 +150,7 @@ export class FormSubmission {
 
   // Fetch request delegate
 
-  prepareRequest(request) {
+  prepareRequest(request: FetchRequest) {
     if (!request.isSafe) {
       const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token")
       if (token) {
@@ -129,22 +163,22 @@ export class FormSubmission {
     }
   }
 
-  requestStarted(_request) {
+  requestStarted(_request: FetchRequest) {
     this.state = FormSubmissionState.waiting
     this.submitter?.setAttribute("disabled", "")
     this.setSubmitsWith()
-    dispatch("turbo:submit-start", {
+    dispatch<TurboSubmitStartEvent>("turbo:submit-start", {
       target: this.formElement,
-      detail: { formSubmission: this }
+      detail: { formSubmission: this },
     })
     this.delegate.formSubmissionStarted(this)
   }
 
-  requestPreventedHandlingResponse(request, response) {
+  requestPreventedHandlingResponse(request: FetchRequest, response: FetchResponse) {
     this.result = { success: response.succeeded, fetchResponse: response }
   }
 
-  requestSucceededWithResponse(request, response) {
+  requestSucceededWithResponse(request: FetchRequest, response: FetchResponse) {
     if (response.clientError || response.serverError) {
       this.delegate.formSubmissionFailedWithResponse(this, response)
     } else if (this.requestMustRedirect(request) && responseSucceededWithoutRedirect(response)) {
@@ -157,23 +191,23 @@ export class FormSubmission {
     }
   }
 
-  requestFailedWithResponse(request, response) {
+  requestFailedWithResponse(request: FetchRequest, response: FetchResponse) {
     this.result = { success: false, fetchResponse: response }
     this.delegate.formSubmissionFailedWithResponse(this, response)
   }
 
-  requestErrored(request, error) {
+  requestErrored(request: FetchRequest, error: Error) {
     this.result = { success: false, error }
     this.delegate.formSubmissionErrored(this, error)
   }
 
-  requestFinished(_request) {
+  requestFinished(_request: FetchRequest) {
     this.state = FormSubmissionState.stopped
     this.submitter?.removeAttribute("disabled")
     this.resetSubmitterText()
-    dispatch("turbo:submit-end", {
+    dispatch<TurboSubmitEndEvent>("turbo:submit-end", {
       target: this.formElement,
-      detail: { formSubmission: this, ...this.result }
+      detail: { formSubmission: this, ...this.result },
     })
     this.delegate.formSubmissionFinished(this)
   }
@@ -187,7 +221,7 @@ export class FormSubmission {
       this.originalSubmitText = this.submitter.innerHTML
       this.submitter.innerHTML = this.submitsWith
     } else if (this.submitter.matches("input")) {
-      const input = this.submitter
+      const input = this.submitter as HTMLInputElement
       this.originalSubmitText = input.value
       input.value = this.submitsWith
     }
@@ -199,16 +233,16 @@ export class FormSubmission {
     if (this.submitter.matches("button")) {
       this.submitter.innerHTML = this.originalSubmitText
     } else if (this.submitter.matches("input")) {
-      const input = this.submitter
+      const input = this.submitter as HTMLInputElement
       input.value = this.originalSubmitText
     }
   }
 
-  requestMustRedirect(request) {
+  requestMustRedirect(request: FetchRequest) {
     return !request.isSafe && this.mustRedirect
   }
 
-  requestAcceptsTurboStreamResponse(request) {
+  requestAcceptsTurboStreamResponse(request: FetchRequest) {
     return !request.isSafe || hasAttribute("data-turbo-stream", this.submitter, this.formElement)
   }
 
@@ -217,7 +251,7 @@ export class FormSubmission {
   }
 }
 
-function buildFormData(formElement, submitter) {
+function buildFormData(formElement: HTMLFormElement, submitter?: HTMLElement): FormData {
   const formData = new FormData(formElement)
   const name = submitter?.getAttribute("name")
   const value = submitter?.getAttribute("value")
@@ -229,7 +263,7 @@ function buildFormData(formElement, submitter) {
   return formData
 }
 
-function getCookieValue(cookieName) {
+function getCookieValue(cookieName: string | null) {
   if (cookieName != null) {
     const cookies = document.cookie ? document.cookie.split("; ") : []
     const cookie = cookies.find((cookie) => cookie.startsWith(cookieName))
@@ -240,11 +274,11 @@ function getCookieValue(cookieName) {
   }
 }
 
-function responseSucceededWithoutRedirect(response) {
+function responseSucceededWithoutRedirect(response: FetchResponse) {
   return response.statusCode == 200 && !response.redirected
 }
 
-function mergeFormDataEntries(url, entries) {
+function mergeFormDataEntries(url: URL, entries: [string, FormDataEntryValue][]): URL {
   const searchParams = new URLSearchParams()
 
   for (const [name, value] of entries) {
diff --git a/src/core/drive/head_snapshot.js b/src/core/drive/head_snapshot.ts
similarity index 59%
rename from src/core/drive/head_snapshot.js
rename to src/core/drive/head_snapshot.ts
index a015bbc28..3892332c1 100644
--- a/src/core/drive/head_snapshot.js
+++ b/src/core/drive/head_snapshot.ts
@@ -1,51 +1,61 @@
 import { Snapshot } from "../snapshot"
 
-export class HeadSnapshot extends Snapshot {
-  detailsByOuterHTML = this.children
+type ElementDetailMap = { [outerHTML: string]: ElementDetails }
+
+type ElementDetails = {
+  type?: ElementType
+  tracked: boolean
+  elements: Element[]
+}
+
+type ElementType = "script" | "stylesheet"
+
+export class HeadSnapshot extends Snapshot<HTMLHeadElement> {
+  readonly detailsByOuterHTML = this.children
     .filter((element) => !elementIsNoscript(element))
     .map((element) => elementWithoutNonce(element))
     .reduce((result, element) => {
       const { outerHTML } = element
-      const details =
+      const details: ElementDetails =
         outerHTML in result
           ? result[outerHTML]
           : {
               type: elementType(element),
               tracked: elementIsTracked(element),
-              elements: []
+              elements: [],
             }
       return {
         ...result,
         [outerHTML]: {
           ...details,
-          elements: [...details.elements, element]
-        }
+          elements: [...details.elements, element],
+        },
       }
-    }, {})
+    }, {} as ElementDetailMap)
 
-  get trackedElementSignature() {
+  get trackedElementSignature(): string {
     return Object.keys(this.detailsByOuterHTML)
       .filter((outerHTML) => this.detailsByOuterHTML[outerHTML].tracked)
       .join("")
   }
 
-  getScriptElementsNotInSnapshot(snapshot) {
-    return this.getElementsMatchingTypeNotInSnapshot("script", snapshot)
+  getScriptElementsNotInSnapshot(snapshot: HeadSnapshot) {
+    return this.getElementsMatchingTypeNotInSnapshot<HTMLScriptElement>("script", snapshot)
   }
 
-  getStylesheetElementsNotInSnapshot(snapshot) {
-    return this.getElementsMatchingTypeNotInSnapshot("stylesheet", snapshot)
+  getStylesheetElementsNotInSnapshot(snapshot: HeadSnapshot) {
+    return this.getElementsMatchingTypeNotInSnapshot<HTMLLinkElement>("stylesheet", snapshot)
   }
 
-  getElementsMatchingTypeNotInSnapshot(matchedType, snapshot) {
+  getElementsMatchingTypeNotInSnapshot<T extends Element>(matchedType: ElementType, snapshot: HeadSnapshot): T[] {
     return Object.keys(this.detailsByOuterHTML)
       .filter((outerHTML) => !(outerHTML in snapshot.detailsByOuterHTML))
       .map((outerHTML) => this.detailsByOuterHTML[outerHTML])
       .filter(({ type }) => type == matchedType)
-      .map(({ elements: [element] }) => element)
+      .map(({ elements: [element] }) => element) as T[]
   }
 
-  get provisionalElements() {
+  get provisionalElements(): Element[] {
     return Object.keys(this.detailsByOuterHTML).reduce((result, outerHTML) => {
       const { type, tracked, elements } = this.detailsByOuterHTML[outerHTML]
       if (type == null && !tracked) {
@@ -55,25 +65,25 @@ export class HeadSnapshot extends Snapshot {
       } else {
         return result
       }
-    }, [])
+    }, [] as Element[])
   }
 
-  getMetaValue(name) {
+  getMetaValue(name: string): string | null {
     const element = this.findMetaElementByName(name)
     return element ? element.getAttribute("content") : null
   }
 
-  findMetaElementByName(name) {
+  findMetaElementByName(name: string) {
     return Object.keys(this.detailsByOuterHTML).reduce((result, outerHTML) => {
       const {
-        elements: [element]
+        elements: [element],
       } = this.detailsByOuterHTML[outerHTML]
       return elementIsMetaElementWithName(element, name) ? element : result
-    }, undefined | undefined)
+    }, undefined as Element | undefined)
   }
 }
 
-function elementType(element) {
+function elementType(element: Element) {
   if (elementIsScript(element)) {
     return "script"
   } else if (elementIsStylesheet(element)) {
@@ -81,31 +91,31 @@ function elementType(element) {
   }
 }
 
-function elementIsTracked(element) {
+function elementIsTracked(element: Element) {
   return element.getAttribute("data-turbo-track") == "reload"
 }
 
-function elementIsScript(element) {
+function elementIsScript(element: Element) {
   const tagName = element.localName
   return tagName == "script"
 }
 
-function elementIsNoscript(element) {
+function elementIsNoscript(element: Element) {
   const tagName = element.localName
   return tagName == "noscript"
 }
 
-function elementIsStylesheet(element) {
+function elementIsStylesheet(element: Element) {
   const tagName = element.localName
   return tagName == "style" || (tagName == "link" && element.getAttribute("rel") == "stylesheet")
 }
 
-function elementIsMetaElementWithName(element, name) {
+function elementIsMetaElementWithName(element: Element, name: string) {
   const tagName = element.localName
   return tagName == "meta" && element.getAttribute("name") == name
 }
 
-function elementWithoutNonce(element) {
+function elementWithoutNonce(element: Element) {
   if (element.hasAttribute("nonce")) {
     element.setAttribute("nonce", "")
   }
diff --git a/src/core/drive/history.js b/src/core/drive/history.ts
similarity index 68%
rename from src/core/drive/history.js
rename to src/core/drive/history.ts
index 215f56eca..7143adb1b 100644
--- a/src/core/drive/history.js
+++ b/src/core/drive/history.ts
@@ -1,13 +1,28 @@
+import { Position } from "../types"
 import { nextMicrotask, uuid } from "../../util"
 
+export interface HistoryDelegate {
+  historyPoppedToLocationWithRestorationIdentifier(location: URL, restorationIdentifier: string): void
+}
+
+type HistoryMethod = (this: typeof history, state: any, title: string, url?: string | null | undefined) => void
+
+export type RestorationData = { scrollPosition?: Position }
+
+export type RestorationDataMap = {
+  [restorationIdentifier: string]: RestorationData
+}
+
 export class History {
-  location
+  readonly delegate: HistoryDelegate
+  location!: URL
   restorationIdentifier = uuid()
-  restorationData = {}
+  restorationData: RestorationDataMap = {}
   started = false
   pageLoaded = false
+  previousScrollRestoration?: ScrollRestoration
 
-  constructor(delegate) {
+  constructor(delegate: HistoryDelegate) {
     this.delegate = delegate
   }
 
@@ -28,15 +43,15 @@ export class History {
     }
   }
 
-  push(location, restorationIdentifier) {
+  push(location: URL, restorationIdentifier?: string) {
     this.update(history.pushState, location, restorationIdentifier)
   }
 
-  replace(location, restorationIdentifier) {
+  replace(location: URL, restorationIdentifier?: string) {
     this.update(history.replaceState, location, restorationIdentifier)
   }
 
-  update(method, location, restorationIdentifier = uuid()) {
+  update(method: HistoryMethod, location: URL, restorationIdentifier = uuid()) {
     const state = { turbo: { restorationIdentifier } }
     method.call(history, state, "", location.href)
     this.location = location
@@ -45,16 +60,16 @@ export class History {
 
   // Restoration data
 
-  getRestorationDataForIdentifier(restorationIdentifier) {
+  getRestorationDataForIdentifier(restorationIdentifier: string): RestorationData {
     return this.restorationData[restorationIdentifier] || {}
   }
 
-  updateRestorationData(additionalData) {
+  updateRestorationData(additionalData: Partial<RestorationData>) {
     const { restorationIdentifier } = this
     const restorationData = this.restorationData[restorationIdentifier]
     this.restorationData[restorationIdentifier] = {
       ...restorationData,
-      ...additionalData
+      ...additionalData,
     }
   }
 
@@ -76,7 +91,7 @@ export class History {
 
   // Event handlers
 
-  onPopState = (event) => {
+  onPopState = (event: PopStateEvent) => {
     if (this.shouldHandlePopState()) {
       const { turbo } = event.state || {}
       if (turbo) {
@@ -88,7 +103,7 @@ export class History {
     }
   }
 
-  onPageLoad = async (_event) => {
+  onPageLoad = async (_event: Event) => {
     await nextMicrotask()
     this.pageLoaded = true
   }
diff --git a/src/core/drive/navigator.js b/src/core/drive/navigator.ts
similarity index 67%
rename from src/core/drive/navigator.js
rename to src/core/drive/navigator.ts
index be81794fd..7579913f1 100644
--- a/src/core/drive/navigator.js
+++ b/src/core/drive/navigator.ts
@@ -1,15 +1,27 @@
+import { Action } from "../types"
 import { getVisitAction } from "../../util"
+import { FetchResponse } from "../../http/fetch_response"
 import { FormSubmission } from "./form_submission"
-import { expandURL, getAnchor, getRequestURL, locationIsVisitable } from "../url"
-import { Visit } from "./visit"
+import { expandURL, getAnchor, getRequestURL, Locatable, locationIsVisitable } from "../url"
+import { Visit, VisitDelegate, VisitOptions } from "./visit"
 import { PageSnapshot } from "./page_snapshot"
 
+export type NavigatorDelegate = VisitDelegate & {
+  allowsVisitingLocationWithAction(location: URL, action?: Action): boolean
+  visitProposedToLocation(location: URL, options: Partial<VisitOptions>): void
+  notifyApplicationAfterVisitingSamePageLocation(oldURL: URL, newURL: URL): void
+}
+
 export class Navigator {
-  constructor(delegate) {
+  readonly delegate: NavigatorDelegate
+  formSubmission?: FormSubmission
+  currentVisit?: Visit
+
+  constructor(delegate: NavigatorDelegate) {
     this.delegate = delegate
   }
 
-  proposeVisit(location, options = {}) {
+  proposeVisit(location: URL, options: Partial<VisitOptions> = {}) {
     if (this.delegate.allowsVisitingLocationWithAction(location, options.action)) {
       if (locationIsVisitable(location, this.view.snapshot.rootLocation)) {
         this.delegate.visitProposedToLocation(location, options)
@@ -19,16 +31,16 @@ export class Navigator {
     }
   }
 
-  startVisit(locatable, restorationIdentifier, options = {}) {
+  startVisit(locatable: Locatable, restorationIdentifier: string, options: Partial<VisitOptions> = {}) {
     this.stop()
     this.currentVisit = new Visit(this, expandURL(locatable), restorationIdentifier, {
       referrer: this.location,
-      ...options
+      ...options,
     })
     this.currentVisit.start()
   }
 
-  submitForm(form, submitter) {
+  submitForm(form: HTMLFormElement, submitter?: HTMLElement) {
     this.stop()
     this.formSubmission = new FormSubmission(this, form, submitter, true)
 
@@ -61,14 +73,14 @@ export class Navigator {
 
   // Form submission delegate
 
-  formSubmissionStarted(formSubmission) {
+  formSubmissionStarted(formSubmission: FormSubmission) {
     // Not all adapters implement formSubmissionStarted
     if (typeof this.adapter.formSubmissionStarted === "function") {
       this.adapter.formSubmissionStarted(formSubmission)
     }
   }
 
-  async formSubmissionSucceededWithResponse(formSubmission, fetchResponse) {
+  async formSubmissionSucceededWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse) {
     if (formSubmission == this.formSubmission) {
       const responseHTML = await fetchResponse.responseHTML
       if (responseHTML) {
@@ -82,14 +94,14 @@ export class Navigator {
         const visitOptions = {
           action,
           shouldCacheSnapshot,
-          response: { statusCode, responseHTML, redirected }
+          response: { statusCode, responseHTML, redirected },
         }
         this.proposeVisit(fetchResponse.location, visitOptions)
       }
     }
   }
 
-  async formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
+  async formSubmissionFailedWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse) {
     const responseHTML = await fetchResponse.responseHTML
 
     if (responseHTML) {
@@ -104,11 +116,11 @@ export class Navigator {
     }
   }
 
-  formSubmissionErrored(formSubmission, error) {
+  formSubmissionErrored(formSubmission: FormSubmission, error: Error) {
     console.error(error)
   }
 
-  formSubmissionFinished(formSubmission) {
+  formSubmissionFinished(formSubmission: FormSubmission) {
     // Not all adapters implement formSubmissionFinished
     if (typeof this.adapter.formSubmissionFinished === "function") {
       this.adapter.formSubmissionFinished(formSubmission)
@@ -117,15 +129,15 @@ export class Navigator {
 
   // Visit delegate
 
-  visitStarted(visit) {
+  visitStarted(visit: Visit) {
     this.delegate.visitStarted(visit)
   }
 
-  visitCompleted(visit) {
+  visitCompleted(visit: Visit) {
     this.delegate.visitCompleted(visit)
   }
 
-  locationWithActionIsSamePage(location, action) {
+  locationWithActionIsSamePage(location: URL, action?: Action): boolean {
     const anchor = getAnchor(location)
     const currentAnchor = getAnchor(this.view.lastRenderedLocation)
     const isRestorationToTop = action === "restore" && typeof anchor === "undefined"
@@ -137,7 +149,7 @@ export class Navigator {
     )
   }
 
-  visitScrolledToSamePageLocation(oldURL, newURL) {
+  visitScrolledToSamePageLocation(oldURL: URL, newURL: URL) {
     this.delegate.visitScrolledToSamePageLocation(oldURL, newURL)
   }
 
@@ -151,7 +163,7 @@ export class Navigator {
     return this.history.restorationIdentifier
   }
 
-  getActionForFormSubmission({ submitter, formElement }) {
+  getActionForFormSubmission({ submitter, formElement }: FormSubmission): Action {
     return getVisitAction(submitter, formElement) || "advance"
   }
 }
diff --git a/src/core/drive/page_renderer.js b/src/core/drive/page_renderer.ts
similarity index 88%
rename from src/core/drive/page_renderer.js
rename to src/core/drive/page_renderer.ts
index 0c1a222e6..bb401414a 100644
--- a/src/core/drive/page_renderer.js
+++ b/src/core/drive/page_renderer.ts
@@ -1,8 +1,10 @@
 import { Renderer } from "../renderer"
+import { PageSnapshot } from "./page_snapshot"
+import { ReloadReason } from "../native/browser_adapter"
 import { activateScriptElement, waitForLoad } from "../../util"
 
-export class PageRenderer extends Renderer {
-  static renderElement(currentElement, newElement) {
+export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
+  static renderElement(currentElement: HTMLBodyElement, newElement: HTMLBodyElement) {
     if (document.body && newElement instanceof HTMLBodyElement) {
       document.body.replaceWith(newElement)
     } else {
@@ -14,16 +16,16 @@ export class PageRenderer extends Renderer {
     return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical
   }
 
-  get reloadReason() {
+  get reloadReason(): ReloadReason {
     if (!this.newSnapshot.isVisitable) {
       return {
-        reason: "turbo_visit_control_is_reload"
+        reason: "turbo_visit_control_is_reload",
       }
     }
 
     if (!this.trackedElementsAreIdentical) {
       return {
-        reason: "tracked_element_mismatch"
+        reason: "tracked_element_mismatch",
       }
     }
   }
@@ -80,7 +82,7 @@ export class PageRenderer extends Renderer {
     const loadingElements = []
 
     for (const element of this.newHeadStylesheetElements) {
-      loadingElements.push(waitForLoad(element))
+      loadingElements.push(waitForLoad(element as HTMLLinkElement))
 
       document.head.appendChild(element)
     }
@@ -108,7 +110,7 @@ export class PageRenderer extends Renderer {
     }
   }
 
-  isCurrentElementInElementList(element, elementList) {
+  isCurrentElementInElementList(element: Element, elementList: Element[]) {
     for (const [index, newElement] of elementList.entries()) {
       // if title element...
       if (element.tagName == "TITLE") {
diff --git a/src/core/drive/page_snapshot.js b/src/core/drive/page_snapshot.ts
similarity index 80%
rename from src/core/drive/page_snapshot.js
rename to src/core/drive/page_snapshot.ts
index 575cb25eb..e8b7041a1 100644
--- a/src/core/drive/page_snapshot.js
+++ b/src/core/drive/page_snapshot.ts
@@ -3,20 +3,22 @@ import { Snapshot } from "../snapshot"
 import { expandURL } from "../url"
 import { HeadSnapshot } from "./head_snapshot"
 
-export class PageSnapshot extends Snapshot {
+export class PageSnapshot extends Snapshot<HTMLBodyElement> {
   static fromHTMLString(html = "") {
     return this.fromDocument(parseHTMLDocument(html))
   }
 
-  static fromElement(element) {
+  static fromElement(element: Element) {
     return this.fromDocument(element.ownerDocument)
   }
 
-  static fromDocument({ head, body }) {
-    return new this(body, new HeadSnapshot(head))
+  static fromDocument({ head, body }: Document) {
+    return new this(body as HTMLBodyElement, new HeadSnapshot(head))
   }
 
-  constructor(element, headSnapshot) {
+  readonly headSnapshot: HeadSnapshot
+
+  constructor(element: HTMLBodyElement, headSnapshot: HeadSnapshot) {
     super(element)
     this.headSnapshot = headSnapshot
   }
@@ -33,7 +35,7 @@ export class PageSnapshot extends Snapshot {
       for (const option of source.selectedOptions) clone.options[option.index].selected = true
     }
 
-    for (const clonedPasswordInput of clonedElement.querySelectorAll('input[type="password"]')) {
+    for (const clonedPasswordInput of clonedElement.querySelectorAll<HTMLInputElement>('input[type="password"]')) {
       clonedPasswordInput.value = ""
     }
 
@@ -71,7 +73,7 @@ export class PageSnapshot extends Snapshot {
 
   // Private
 
-  getSetting(name) {
+  getSetting(name: string) {
     return this.headSnapshot.getMetaValue(`turbo-${name}`)
   }
 }
diff --git a/src/core/drive/page_view.js b/src/core/drive/page_view.ts
similarity index 62%
rename from src/core/drive/page_view.js
rename to src/core/drive/page_view.ts
index 1b95bb1d1..dba0defbb 100644
--- a/src/core/drive/page_view.js
+++ b/src/core/drive/page_view.ts
@@ -1,20 +1,29 @@
 import { nextEventLoopTick } from "../../util"
-import { View } from "../view"
+import { View, ViewDelegate, ViewRenderOptions } from "../view"
 import { ErrorRenderer } from "./error_renderer"
 import { PageRenderer } from "./page_renderer"
 import { PageSnapshot } from "./page_snapshot"
 import { SnapshotCache } from "./snapshot_cache"
+import { Visit } from "./visit"
 
-export class PageView extends View {
-  snapshotCache = new SnapshotCache(10)
+export type PageViewRenderOptions = ViewRenderOptions<HTMLBodyElement>
+
+export interface PageViewDelegate extends ViewDelegate<HTMLBodyElement, PageSnapshot> {
+  viewWillCacheSnapshot(): void
+}
+
+type PageViewRenderer = PageRenderer | ErrorRenderer
+
+export class PageView extends View<HTMLBodyElement, PageSnapshot, PageViewRenderer, PageViewDelegate> {
+  readonly snapshotCache = new SnapshotCache(10)
   lastRenderedLocation = new URL(location.href)
   forceReloaded = false
 
-  shouldTransitionTo(newSnapshot) {
+  shouldTransitionTo(newSnapshot: PageSnapshot) {
     return this.snapshot.prefersViewTransitions && newSnapshot.prefersViewTransitions
   }
 
-  renderPage(snapshot, isPreview = false, willRender = true, visit) {
+  renderPage(snapshot: PageSnapshot, isPreview = false, willRender = true, visit?: Visit) {
     const renderer = new PageRenderer(this.snapshot, snapshot, PageRenderer.renderElement, isPreview, willRender)
 
     if (!renderer.shouldRender) {
@@ -26,7 +35,7 @@ export class PageView extends View {
     return this.render(renderer)
   }
 
-  renderError(snapshot, visit) {
+  renderError(snapshot: PageSnapshot, visit?: Visit) {
     visit?.changeHistory()
     const renderer = new ErrorRenderer(this.snapshot, snapshot, ErrorRenderer.renderElement, false)
     return this.render(renderer)
@@ -36,7 +45,7 @@ export class PageView extends View {
     this.snapshotCache.clear()
   }
 
-  async cacheSnapshot(snapshot = this.snapshot) {
+  async cacheSnapshot(snapshot: PageSnapshot = this.snapshot) {
     if (snapshot.isCacheable) {
       this.delegate.viewWillCacheSnapshot()
       const { lastRenderedLocation: location } = this
@@ -47,7 +56,7 @@ export class PageView extends View {
     }
   }
 
-  getCachedSnapshotForLocation(location) {
+  getCachedSnapshotForLocation(location: URL) {
     return this.snapshotCache.get(location)
   }
 
diff --git a/src/core/drive/preloader.js b/src/core/drive/preloader.ts
similarity index 64%
rename from src/core/drive/preloader.js
rename to src/core/drive/preloader.ts
index 23871a530..6aaf0b43b 100644
--- a/src/core/drive/preloader.js
+++ b/src/core/drive/preloader.ts
@@ -1,13 +1,20 @@
+import { Navigator } from "./navigator"
 import { PageSnapshot } from "./page_snapshot"
+import { SnapshotCache } from "./snapshot_cache"
+
+export interface PreloaderDelegate {
+  readonly navigator: Navigator
+}
 
 export class Preloader {
-  selector = "a[data-turbo-preload]"
+  readonly delegate: PreloaderDelegate
+  readonly selector: string = "a[data-turbo-preload]"
 
-  constructor(delegate) {
+  constructor(delegate: PreloaderDelegate) {
     this.delegate = delegate
   }
 
-  get snapshotCache() {
+  get snapshotCache(): SnapshotCache {
     return this.delegate.navigator.view.snapshotCache
   }
 
@@ -21,13 +28,13 @@ export class Preloader {
     }
   }
 
-  preloadOnLoadLinksForView(element) {
-    for (const link of element.querySelectorAll(this.selector)) {
+  preloadOnLoadLinksForView(element: Element) {
+    for (const link of element.querySelectorAll<HTMLAnchorElement>(this.selector)) {
       this.preloadURL(link)
     }
   }
 
-  async preloadURL(link) {
+  async preloadURL(link: HTMLAnchorElement) {
     const location = new URL(link.href)
 
     if (this.snapshotCache.has(location)) {
diff --git a/src/core/drive/progress_bar.js b/src/core/drive/progress_bar.ts
similarity index 93%
rename from src/core/drive/progress_bar.js
rename to src/core/drive/progress_bar.ts
index caff5f5da..9a189be92 100644
--- a/src/core/drive/progress_bar.js
+++ b/src/core/drive/progress_bar.ts
@@ -21,7 +21,11 @@ export class ProgressBar {
     `
   }
 
+  readonly stylesheetElement: HTMLStyleElement
+  readonly progressElement: HTMLDivElement
+
   hiding = false
+  trickleInterval?: number
   value = 0
   visible = false
 
@@ -52,7 +56,7 @@ export class ProgressBar {
     }
   }
 
-  setValue(value) {
+  setValue(value: number) {
     this.value = value
     this.refresh()
   }
@@ -70,7 +74,7 @@ export class ProgressBar {
     this.refresh()
   }
 
-  fadeProgressElement(callback) {
+  fadeProgressElement(callback: () => void) {
     this.progressElement.style.opacity = "0"
     setTimeout(callback, ProgressBar.animationDuration * 1.5)
   }
diff --git a/src/core/drive/snapshot_cache.js b/src/core/drive/snapshot_cache.ts
similarity index 67%
rename from src/core/drive/snapshot_cache.js
rename to src/core/drive/snapshot_cache.ts
index 6ed37e8fd..a93a1bde2 100644
--- a/src/core/drive/snapshot_cache.js
+++ b/src/core/drive/snapshot_cache.ts
@@ -1,18 +1,20 @@
 import { toCacheKey } from "../url"
+import { PageSnapshot } from "./page_snapshot"
 
 export class SnapshotCache {
-  keys = []
-  snapshots = {}
+  readonly keys: string[] = []
+  readonly size: number
+  snapshots: { [url: string]: PageSnapshot } = {}
 
-  constructor(size) {
+  constructor(size: number) {
     this.size = size
   }
 
-  has(location) {
+  has(location: URL) {
     return toCacheKey(location) in this.snapshots
   }
 
-  get(location) {
+  get(location: URL): PageSnapshot | undefined {
     if (this.has(location)) {
       const snapshot = this.read(location)
       this.touch(location)
@@ -20,7 +22,7 @@ export class SnapshotCache {
     }
   }
 
-  put(location, snapshot) {
+  put(location: URL, snapshot: PageSnapshot) {
     this.write(location, snapshot)
     this.touch(location)
     return snapshot
@@ -32,15 +34,15 @@ export class SnapshotCache {
 
   // Private
 
-  read(location) {
+  read(location: URL) {
     return this.snapshots[toCacheKey(location)]
   }
 
-  write(location, snapshot) {
+  write(location: URL, snapshot: PageSnapshot) {
     this.snapshots[toCacheKey(location)] = snapshot
   }
 
-  touch(location) {
+  touch(location: URL) {
     const key = toCacheKey(location)
     const index = this.keys.indexOf(key)
     if (index > -1) this.keys.splice(index, 1)
diff --git a/src/core/drive/view_transitioner.js b/src/core/drive/view_transitioner.js
deleted file mode 100644
index f8663dbac..000000000
--- a/src/core/drive/view_transitioner.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export class ViewTransitioner {
-  #viewTransitionStarted = false
-  #lastOperation = Promise.resolve()
-
-  renderChange(useViewTransition, render) {
-    if (useViewTransition && this.viewTransitionsAvailable && !this.#viewTransitionStarted) {
-      this.#viewTransitionStarted = true
-      this.#lastOperation = this.#lastOperation.then(async () => {
-        await document.startViewTransition(render).finished
-      })
-    } else {
-      this.#lastOperation = this.#lastOperation.then(render)
-    }
-
-    return this.#lastOperation
-  }
-
-  get viewTransitionsAvailable() {
-    return document.startViewTransition
-  }
-}
diff --git a/src/core/drive/view_transitioner.ts b/src/core/drive/view_transitioner.ts
new file mode 100644
index 000000000..b0ec16cce
--- /dev/null
+++ b/src/core/drive/view_transitioner.ts
@@ -0,0 +1,31 @@
+declare global {
+  type ViewTransition = {
+    finished: Promise<void>
+  }
+
+  interface Document {
+    startViewTransition?(callback: () => Promise<void>): ViewTransition
+  }
+}
+
+export class ViewTransitioner {
+  private viewTransitionStarted = false
+  private lastOperation = Promise.resolve()
+
+  renderChange(useViewTransition: boolean, render: () => Promise<void>) {
+    if (useViewTransition && this.viewTransitionsAvailable && !this.viewTransitionStarted) {
+      this.viewTransitionStarted = true
+      this.lastOperation = this.lastOperation.then(async () => {
+        await document.startViewTransition!(render).finished
+      })
+    } else {
+      this.lastOperation = this.lastOperation.then(render)
+    }
+
+    return this.lastOperation
+  }
+
+  private get viewTransitionsAvailable() {
+    return document.startViewTransition
+  }
+}
diff --git a/src/core/drive/visit.js b/src/core/drive/visit.ts
similarity index 74%
rename from src/core/drive/visit.js
rename to src/core/drive/visit.ts
index 7fc494c19..1a311b640 100644
--- a/src/core/drive/visit.js
+++ b/src/core/drive/visit.ts
@@ -1,55 +1,116 @@
-import { FetchMethod, FetchRequest } from "../../http/fetch_request"
+import { Adapter } from "../native/adapter"
+import { FetchMethod, FetchRequest, FetchRequestDelegate } from "../../http/fetch_request"
+import { FetchResponse } from "../../http/fetch_response"
+import { History } from "./history"
 import { getAnchor } from "../url"
+import { Snapshot } from "../snapshot"
 import { PageSnapshot } from "./page_snapshot"
+import { Action } from "../types"
 import { getHistoryMethodForAction, uuid } from "../../util"
+import { PageView } from "./page_view"
 import { StreamMessage } from "../streams/stream_message"
 import { ViewTransitioner } from "./view_transitioner"
 
-const defaultOptions = {
+export interface VisitDelegate {
+  readonly adapter: Adapter
+  readonly history: History
+  readonly view: PageView
+
+  visitStarted(visit: Visit): void
+  visitCompleted(visit: Visit): void
+  locationWithActionIsSamePage(location: URL, action: Action): boolean
+  visitScrolledToSamePageLocation(oldURL: URL, newURL: URL): void
+}
+
+export enum TimingMetric {
+  visitStart = "visitStart",
+  requestStart = "requestStart",
+  requestEnd = "requestEnd",
+  visitEnd = "visitEnd",
+}
+
+export type TimingMetrics = Partial<{ [metric in TimingMetric]: any }>
+
+export enum VisitState {
+  initialized = "initialized",
+  started = "started",
+  canceled = "canceled",
+  failed = "failed",
+  completed = "completed",
+}
+
+export type VisitOptions = {
+  action: Action
+  historyChanged: boolean
+  referrer?: URL
+  snapshot?: PageSnapshot
+  snapshotHTML?: string
+  response?: VisitResponse
+  visitCachedSnapshot(snapshot: Snapshot): void
+  willRender: boolean
+  updateHistory: boolean
+  restorationIdentifier?: string
+  shouldCacheSnapshot: boolean
+  frame?: string
+  acceptsStreamResponse: boolean
+}
+
+const defaultOptions: VisitOptions = {
   action: "advance",
   historyChanged: false,
   visitCachedSnapshot: () => {},
   willRender: true,
   updateHistory: true,
   shouldCacheSnapshot: true,
-  acceptsStreamResponse: false
-}
-
-export const TimingMetric = {
-  visitStart: "visitStart",
-  requestStart: "requestStart",
-  requestEnd: "requestEnd",
-  visitEnd: "visitEnd"
+  acceptsStreamResponse: false,
 }
 
-export const VisitState = {
-  initialized: "initialized",
-  started: "started",
-  canceled: "canceled",
-  failed: "failed",
-  completed: "completed"
+export type VisitResponse = {
+  statusCode: number
+  redirected: boolean
+  responseHTML?: string
 }
 
-export const SystemStatusCode = {
-  networkFailure: 0,
-  timeoutFailure: -1,
-  contentTypeMismatch: -2
+export enum SystemStatusCode {
+  networkFailure = 0,
+  timeoutFailure = -1,
+  contentTypeMismatch = -2,
 }
 
-export class Visit {
-  identifier = uuid() // Required by turbo-ios
-  timingMetrics = {}
+export class Visit implements FetchRequestDelegate {
+  readonly delegate: VisitDelegate
+  readonly identifier = uuid() // Required by turbo-ios
+  readonly restorationIdentifier: string
+  readonly action: Action
+  readonly referrer?: URL
+  readonly timingMetrics: TimingMetrics = {}
+  readonly visitCachedSnapshot: (snapshot: Snapshot) => void
+  readonly willRender: boolean
+  readonly updateHistory: boolean
 
   followedRedirect = false
+  frame?: number
   historyChanged = false
+  location: URL
+  isSamePage: boolean
+  redirectedToLocation?: URL
+  request?: FetchRequest
+  response?: VisitResponse
   scrolled = false
   shouldCacheSnapshot = true
   acceptsStreamResponse = false
+  snapshotHTML?: string
   snapshotCached = false
   state = VisitState.initialized
+  snapshot?: PageSnapshot
   viewTransitioner = new ViewTransitioner()
 
-  constructor(delegate, location, restorationIdentifier, options = {}) {
+  constructor(
+    delegate: VisitDelegate,
+    location: URL,
+    restorationIdentifier: string | undefined,
+    options: Partial<VisitOptions> = {}
+  ) {
     this.delegate = delegate
     this.location = location
     this.restorationIdentifier = restorationIdentifier || uuid()
@@ -65,10 +126,10 @@ export class Visit {
       willRender,
       updateHistory,
       shouldCacheSnapshot,
-      acceptsStreamResponse
+      acceptsStreamResponse,
     } = {
       ...defaultOptions,
-      ...options
+      ...options,
     }
     this.action = action
     this.historyChanged = historyChanged
@@ -263,7 +324,7 @@ export class Visit {
         action: "replace",
         response: this.response,
         shouldCacheSnapshot: false,
-        willRender: false
+        willRender: false,
       })
       this.followedRedirect = true
     }
@@ -282,7 +343,7 @@ export class Visit {
 
   // Fetch request delegate
 
-  prepareRequest(request) {
+  prepareRequest(request: FetchRequest) {
     if (this.acceptsStreamResponse) {
       request.acceptResponseType(StreamMessage.contentType)
     }
@@ -292,15 +353,15 @@ export class Visit {
     this.startRequest()
   }
 
-  requestPreventedHandlingResponse(_request, _response) {}
+  requestPreventedHandlingResponse(_request: FetchRequest, _response: FetchResponse) {}
 
-  async requestSucceededWithResponse(request, response) {
+  async requestSucceededWithResponse(request: FetchRequest, response: FetchResponse) {
     const responseHTML = await response.responseHTML
     const { redirected, statusCode } = response
     if (responseHTML == undefined) {
       this.recordResponse({
         statusCode: SystemStatusCode.contentTypeMismatch,
-        redirected
+        redirected,
       })
     } else {
       this.redirectedToLocation = response.redirected ? response.location : undefined
@@ -308,23 +369,23 @@ export class Visit {
     }
   }
 
-  async requestFailedWithResponse(request, response) {
+  async requestFailedWithResponse(request: FetchRequest, response: FetchResponse) {
     const responseHTML = await response.responseHTML
     const { redirected, statusCode } = response
     if (responseHTML == undefined) {
       this.recordResponse({
         statusCode: SystemStatusCode.contentTypeMismatch,
-        redirected
+        redirected,
       })
     } else {
       this.recordResponse({ statusCode: statusCode, responseHTML, redirected })
     }
   }
 
-  requestErrored(_request, _error) {
+  requestErrored(_request: FetchRequest, _error: Error) {
     this.recordResponse({
       statusCode: SystemStatusCode.networkFailure,
-      redirected: false
+      redirected: false,
     })
   }
 
@@ -367,17 +428,17 @@ export class Visit {
 
   // Instrumentation
 
-  recordTimingMetric(metric) {
+  recordTimingMetric(metric: TimingMetric) {
     this.timingMetrics[metric] = new Date().getTime()
   }
 
-  getTimingMetrics() {
+  getTimingMetrics(): TimingMetrics {
     return { ...this.timingMetrics }
   }
 
   // Private
 
-  getHistoryMethodForAction(action) {
+  getHistoryMethodForAction(action: Action) {
     switch (action) {
       case "replace":
         return history.replaceState
@@ -408,16 +469,16 @@ export class Visit {
     }
   }
 
-  async render(callback) {
+  async render(callback: () => Promise<void>) {
     this.cancelRender()
-    await new Promise((resolve) => {
+    await new Promise<void>((resolve) => {
       this.frame = requestAnimationFrame(() => resolve())
     })
     await callback()
     delete this.frame
   }
 
-  async renderPageSnapshot(snapshot, isPreview) {
+  async renderPageSnapshot(snapshot: PageSnapshot, isPreview: boolean) {
     await this.viewTransitioner.renderChange(this.view.shouldTransitionTo(snapshot), async () => {
       await this.view.renderPage(snapshot, isPreview, this.willRender, this)
       this.performScroll()
@@ -432,6 +493,6 @@ export class Visit {
   }
 }
 
-function isSuccessful(statusCode) {
+function isSuccessful(statusCode: number) {
   return statusCode >= 200 && statusCode < 300
 }
diff --git a/src/core/errors.js b/src/core/errors.ts
similarity index 100%
rename from src/core/errors.js
rename to src/core/errors.ts
diff --git a/src/core/frames/frame_controller.js b/src/core/frames/frame_controller.ts
similarity index 54%
rename from src/core/frames/frame_controller.js
rename to src/core/frames/frame_controller.ts
index 6fe1dcbe0..9282a597c 100644
--- a/src/core/frames/frame_controller.js
+++ b/src/core/frames/frame_controller.ts
@@ -1,7 +1,12 @@
-import { FrameElement, FrameLoadingStyle } from "../../elements/frame_element"
-import { FetchMethod, FetchRequest } from "../../http/fetch_request"
+import {
+  FrameElement,
+  FrameElementDelegate,
+  FrameLoadingStyle,
+  FrameElementObservedAttribute,
+} from "../../elements/frame_element"
+import { FetchMethod, FetchRequest, FetchRequestDelegate } from "../../http/fetch_request"
 import { FetchResponse } from "../../http/fetch_response"
-import { AppearanceObserver } from "../../observers/appearance_observer"
+import { AppearanceObserver, AppearanceObserverDelegate } from "../../observers/appearance_observer"
 import {
   clearBusyState,
   dispatch,
@@ -10,31 +15,58 @@ import {
   markAsBusy,
   uuid,
   getHistoryMethodForAction,
-  getVisitAction
+  getVisitAction,
 } from "../../util"
-import { FormSubmission } from "../drive/form_submission"
+import { FormSubmission, FormSubmissionDelegate } from "../drive/form_submission"
 import { Snapshot } from "../snapshot"
-import { getAction, expandURL, urlsAreEqual, locationIsVisitable } from "../url"
-import { FormSubmitObserver } from "../../observers/form_submit_observer"
+import { ViewDelegate, ViewRenderOptions } from "../view"
+import { Locatable, getAction, expandURL, urlsAreEqual, locationIsVisitable } from "../url"
+import { FormSubmitObserver, FormSubmitObserverDelegate } from "../../observers/form_submit_observer"
 import { FrameView } from "./frame_view"
-import { LinkInterceptor } from "./link_interceptor"
-import { FormLinkClickObserver } from "../../observers/form_link_click_observer"
+import { LinkInterceptor, LinkInterceptorDelegate } from "./link_interceptor"
+import { FormLinkClickObserver, FormLinkClickObserverDelegate } from "../../observers/form_link_click_observer"
 import { FrameRenderer } from "./frame_renderer"
 import { session } from "../index"
+import { Action } from "../types"
+import { VisitOptions } from "../drive/visit"
+import { TurboBeforeFrameRenderEvent } from "../session"
 import { StreamMessage } from "../streams/stream_message"
 import { PageSnapshot } from "../drive/page_snapshot"
 import { TurboFrameMissingError } from "../errors"
 
-export class FrameController {
-  fetchResponseLoaded = (_fetchResponse) => {}
-  #currentFetchRequest = null
-  #resolveVisitPromise = () => {}
-  #connected = false
-  #hasBeenLoaded = false
-  #ignoredAttributes = new Set()
-  action = null
-
-  constructor(element) {
+type VisitFallback = (location: Response | Locatable, options: Partial<VisitOptions>) => Promise<void>
+export type TurboFrameMissingEvent = CustomEvent<{ response: Response; visit: VisitFallback }>
+
+export class FrameController
+  implements
+    AppearanceObserverDelegate<FrameElement>,
+    FetchRequestDelegate,
+    FormSubmitObserverDelegate,
+    FormSubmissionDelegate,
+    FrameElementDelegate,
+    FormLinkClickObserverDelegate,
+    LinkInterceptorDelegate,
+    ViewDelegate<FrameElement, Snapshot<FrameElement>>
+{
+  readonly element: FrameElement
+  readonly view: FrameView
+  readonly appearanceObserver: AppearanceObserver<FrameElement>
+  readonly formLinkClickObserver: FormLinkClickObserver
+  readonly linkInterceptor: LinkInterceptor
+  readonly formSubmitObserver: FormSubmitObserver
+  formSubmission?: FormSubmission
+  fetchResponseLoaded = (_fetchResponse: FetchResponse) => {}
+  private currentFetchRequest: FetchRequest | null = null
+  private resolveVisitPromise = () => {}
+  private connected = false
+  private hasBeenLoaded = false
+  private ignoredAttributes: Set<FrameElementObservedAttribute> = new Set()
+  private action: Action | null = null
+  readonly restorationIdentifier: string
+  private previousFrameElement?: FrameElement
+  private currentNavigationElement?: Element
+
+  constructor(element: FrameElement) {
     this.element = element
     this.view = new FrameView(this, this.element)
     this.appearanceObserver = new AppearanceObserver(this, this.element)
@@ -44,15 +76,13 @@ export class FrameController {
     this.formSubmitObserver = new FormSubmitObserver(this, this.element)
   }
 
-  // Frame delegate
-
   connect() {
-    if (!this.#connected) {
-      this.#connected = true
+    if (!this.connected) {
+      this.connected = true
       if (this.loadingStyle == FrameLoadingStyle.lazy) {
         this.appearanceObserver.start()
       } else {
-        this.#loadSourceURL()
+        this.loadSourceURL()
       }
       this.formLinkClickObserver.start()
       this.linkInterceptor.start()
@@ -61,8 +91,8 @@ export class FrameController {
   }
 
   disconnect() {
-    if (this.#connected) {
-      this.#connected = false
+    if (this.connected) {
+      this.connected = false
       this.appearanceObserver.stop()
       this.formLinkClickObserver.stop()
       this.linkInterceptor.stop()
@@ -72,25 +102,25 @@ export class FrameController {
 
   disabledChanged() {
     if (this.loadingStyle == FrameLoadingStyle.eager) {
-      this.#loadSourceURL()
+      this.loadSourceURL()
     }
   }
 
   sourceURLChanged() {
-    if (this.#isIgnoringChangesTo("src")) return
+    if (this.isIgnoringChangesTo("src")) return
 
     if (this.element.isConnected) {
       this.complete = false
     }
 
-    if (this.loadingStyle == FrameLoadingStyle.eager || this.#hasBeenLoaded) {
-      this.#loadSourceURL()
+    if (this.loadingStyle == FrameLoadingStyle.eager || this.hasBeenLoaded) {
+      this.loadSourceURL()
     }
   }
 
   sourceURLReloaded() {
     const { src } = this.element
-    this.#ignoringChangesToAttribute("complete", () => {
+    this.ignoringChangesToAttribute("complete", () => {
       this.element.removeAttribute("complete")
     })
     this.element.src = null
@@ -99,9 +129,9 @@ export class FrameController {
   }
 
   completeChanged() {
-    if (this.#isIgnoringChangesTo("complete")) return
+    if (this.isIgnoringChangesTo("complete")) return
 
-    this.#loadSourceURL()
+    this.loadSourceURL()
   }
 
   loadingStyleChanged() {
@@ -109,20 +139,20 @@ export class FrameController {
       this.appearanceObserver.start()
     } else {
       this.appearanceObserver.stop()
-      this.#loadSourceURL()
+      this.loadSourceURL()
     }
   }
 
-  async #loadSourceURL() {
+  private async loadSourceURL() {
     if (this.enabled && this.isActive && !this.complete && this.sourceURL) {
-      this.element.loaded = this.#visit(expandURL(this.sourceURL))
+      this.element.loaded = this.visit(expandURL(this.sourceURL))
       this.appearanceObserver.stop()
       await this.element.loaded
-      this.#hasBeenLoaded = true
+      this.hasBeenLoaded = true
     }
   }
 
-  async loadResponse(fetchResponse) {
+  async loadResponse(fetchResponse: FetchResponse) {
     if (fetchResponse.redirected || (fetchResponse.succeeded && fetchResponse.isHTML)) {
       this.sourceURL = fetchResponse.response.url
     }
@@ -134,9 +164,9 @@ export class FrameController {
         const pageSnapshot = PageSnapshot.fromDocument(document)
 
         if (pageSnapshot.isVisitable) {
-          await this.#loadFrameResponse(fetchResponse, document)
+          await this.loadFrameResponse(fetchResponse, document)
         } else {
-          await this.#handleUnvisitableFrameResponse(fetchResponse)
+          await this.handleUnvisitableFrameResponse(fetchResponse)
         }
       }
     } finally {
@@ -146,39 +176,39 @@ export class FrameController {
 
   // Appearance observer delegate
 
-  elementAppearedInViewport(element) {
+  elementAppearedInViewport(element: FrameElement) {
     this.proposeVisitIfNavigatedWithAction(element, element)
-    this.#loadSourceURL()
+    this.loadSourceURL()
   }
 
   // Form link click observer delegate
 
-  willSubmitFormLinkToLocation(link) {
-    return this.#shouldInterceptNavigation(link)
+  willSubmitFormLinkToLocation(link: Element): boolean {
+    return this.shouldInterceptNavigation(link)
   }
 
-  submittedFormLinkToLocation(link, _location, form) {
-    const frame = this.#findFrameElement(link)
+  submittedFormLinkToLocation(link: Element, _location: URL, form: HTMLFormElement): void {
+    const frame = this.findFrameElement(link)
     if (frame) form.setAttribute("data-turbo-frame", frame.id)
   }
 
   // Link interceptor delegate
 
-  shouldInterceptLinkClick(element, _location, _event) {
-    return this.#shouldInterceptNavigation(element)
+  shouldInterceptLinkClick(element: Element, _location: string, _event: MouseEvent) {
+    return this.shouldInterceptNavigation(element)
   }
 
-  linkClickIntercepted(element, location) {
-    this.#navigateFrame(element, location)
+  linkClickIntercepted(element: Element, location: string) {
+    this.navigateFrame(element, location)
   }
 
   // Form submit observer delegate
 
-  willSubmitForm(element, submitter) {
-    return element.closest("turbo-frame") == this.element && this.#shouldInterceptNavigation(element, submitter)
+  willSubmitForm(element: HTMLFormElement, submitter?: HTMLElement) {
+    return element.closest("turbo-frame") == this.element && this.shouldInterceptNavigation(element, submitter)
   }
 
-  formSubmitted(element, submitter) {
+  formSubmitted(element: HTMLFormElement, submitter?: HTMLElement) {
     if (this.formSubmission) {
       this.formSubmission.stop()
     }
@@ -191,7 +221,7 @@ export class FrameController {
 
   // Fetch request delegate
 
-  prepareRequest(request) {
+  prepareRequest(request: FetchRequest) {
     request.headers["Turbo-Frame"] = this.id
 
     if (this.currentNavigationElement?.hasAttribute("data-turbo-stream")) {
@@ -199,41 +229,41 @@ export class FrameController {
     }
   }
 
-  requestStarted(_request) {
+  requestStarted(_request: FetchRequest) {
     markAsBusy(this.element)
   }
 
-  requestPreventedHandlingResponse(_request, _response) {
-    this.#resolveVisitPromise()
+  requestPreventedHandlingResponse(_request: FetchRequest, _response: FetchResponse) {
+    this.resolveVisitPromise()
   }
 
-  async requestSucceededWithResponse(request, response) {
+  async requestSucceededWithResponse(request: FetchRequest, response: FetchResponse) {
     await this.loadResponse(response)
-    this.#resolveVisitPromise()
+    this.resolveVisitPromise()
   }
 
-  async requestFailedWithResponse(request, response) {
+  async requestFailedWithResponse(request: FetchRequest, response: FetchResponse) {
     await this.loadResponse(response)
-    this.#resolveVisitPromise()
+    this.resolveVisitPromise()
   }
 
-  requestErrored(request, error) {
+  requestErrored(request: FetchRequest, error: Error) {
     console.error(error)
-    this.#resolveVisitPromise()
+    this.resolveVisitPromise()
   }
 
-  requestFinished(_request) {
+  requestFinished(_request: FetchRequest) {
     clearBusyState(this.element)
   }
 
   // Form submission delegate
 
-  formSubmissionStarted({ formElement }) {
-    markAsBusy(formElement, this.#findFrameElement(formElement))
+  formSubmissionStarted({ formElement }: FormSubmission) {
+    markAsBusy(formElement, this.findFrameElement(formElement))
   }
 
-  formSubmissionSucceededWithResponse(formSubmission, response) {
-    const frame = this.#findFrameElement(formSubmission.formElement, formSubmission.submitter)
+  formSubmissionSucceededWithResponse(formSubmission: FormSubmission, response: FetchResponse) {
+    const frame = this.findFrameElement(formSubmission.formElement, formSubmission.submitter)
 
     frame.delegate.proposeVisitIfNavigatedWithAction(frame, formSubmission.formElement, formSubmission.submitter)
     frame.delegate.loadResponse(response)
@@ -243,30 +273,34 @@ export class FrameController {
     }
   }
 
-  formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
+  formSubmissionFailedWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse) {
     this.element.delegate.loadResponse(fetchResponse)
     session.clearCache()
   }
 
-  formSubmissionErrored(formSubmission, error) {
+  formSubmissionErrored(formSubmission: FormSubmission, error: Error) {
     console.error(error)
   }
 
-  formSubmissionFinished({ formElement }) {
-    clearBusyState(formElement, this.#findFrameElement(formElement))
+  formSubmissionFinished({ formElement }: FormSubmission) {
+    clearBusyState(formElement, this.findFrameElement(formElement))
   }
 
   // View delegate
 
-  allowsImmediateRender({ element: newFrame }, _isPreview, options) {
-    const event = dispatch("turbo:before-frame-render", {
+  allowsImmediateRender(
+    { element: newFrame }: Snapshot<FrameElement>,
+    _isPreview: boolean,
+    options: ViewRenderOptions<FrameElement>
+  ) {
+    const event = dispatch<TurboBeforeFrameRenderEvent>("turbo:before-frame-render", {
       target: this.element,
       detail: { newFrame, ...options },
-      cancelable: true
+      cancelable: true,
     })
     const {
       defaultPrevented,
-      detail: { render }
+      detail: { render },
     } = event
 
     if (this.view.renderer && render) {
@@ -276,21 +310,20 @@ export class FrameController {
     return !defaultPrevented
   }
 
-  viewRenderedSnapshot(_snapshot, _isPreview) {}
+  viewRenderedSnapshot(_snapshot: Snapshot, _isPreview: boolean) {}
 
-  preloadOnLoadLinksForView(element) {
+  preloadOnLoadLinksForView(element: Element) {
     session.preloadOnLoadLinksForView(element)
   }
 
   viewInvalidated() {}
 
   // Frame renderer delegate
-
-  willRenderFrame(currentElement, _newElement) {
+  willRenderFrame(currentElement: FrameElement, _newElement: FrameElement) {
     this.previousFrameElement = currentElement.cloneNode(true)
   }
 
-  visitCachedSnapshot = ({ element }) => {
+  visitCachedSnapshot = ({ element }: Snapshot) => {
     const frame = element.querySelector("#" + this.element.id)
 
     if (frame && this.previousFrameElement) {
@@ -302,7 +335,7 @@ export class FrameController {
 
   // Private
 
-  async #loadFrameResponse(fetchResponse, document) {
+  private async loadFrameResponse(fetchResponse: FetchResponse, document: Document) {
     const newFrameElement = await this.extractForeignFrameElement(document.body)
 
     if (newFrameElement) {
@@ -316,56 +349,56 @@ export class FrameController {
       session.frameRendered(fetchResponse, this.element)
       session.frameLoaded(this.element)
       this.fetchResponseLoaded(fetchResponse)
-    } else if (this.#willHandleFrameMissingFromResponse(fetchResponse)) {
-      this.#handleFrameMissingFromResponse(fetchResponse)
+    } else if (this.willHandleFrameMissingFromResponse(fetchResponse)) {
+      this.handleFrameMissingFromResponse(fetchResponse)
     }
   }
 
-  async #visit(url) {
+  private async visit(url: URL) {
     const request = new FetchRequest(this, FetchMethod.get, url, new URLSearchParams(), this.element)
 
-    this.#currentFetchRequest?.cancel()
-    this.#currentFetchRequest = request
+    this.currentFetchRequest?.cancel()
+    this.currentFetchRequest = request
 
-    return new Promise((resolve) => {
-      this.#resolveVisitPromise = () => {
-        this.#resolveVisitPromise = () => {}
-        this.#currentFetchRequest = null
+    return new Promise<void>((resolve) => {
+      this.resolveVisitPromise = () => {
+        this.resolveVisitPromise = () => {}
+        this.currentFetchRequest = null
         resolve()
       }
       request.perform()
     })
   }
 
-  #navigateFrame(element, url, submitter) {
-    const frame = this.#findFrameElement(element, submitter)
+  private navigateFrame(element: Element, url: string, submitter?: HTMLElement) {
+    const frame = this.findFrameElement(element, submitter)
 
     frame.delegate.proposeVisitIfNavigatedWithAction(frame, element, submitter)
 
-    this.#withCurrentNavigationElement(element, () => {
+    this.withCurrentNavigationElement(element, () => {
       frame.src = url
     })
   }
 
-  proposeVisitIfNavigatedWithAction(frame, element, submitter) {
+  proposeVisitIfNavigatedWithAction(frame: FrameElement, element: Element, submitter?: HTMLElement) {
     this.action = getVisitAction(submitter, element, frame)
 
     if (this.action) {
       const pageSnapshot = PageSnapshot.fromElement(frame).clone()
       const { visitCachedSnapshot } = frame.delegate
 
-      frame.delegate.fetchResponseLoaded = (fetchResponse) => {
+      frame.delegate.fetchResponseLoaded = (fetchResponse: FetchResponse) => {
         if (frame.src) {
           const { statusCode, redirected } = fetchResponse
           const responseHTML = frame.ownerDocument.documentElement.outerHTML
           const response = { statusCode, redirected, responseHTML }
-          const options = {
+          const options: Partial<VisitOptions> = {
             response,
             visitCachedSnapshot,
             willRender: false,
             updateHistory: false,
             restorationIdentifier: this.restorationIdentifier,
-            snapshot: pageSnapshot
+            snapshot: pageSnapshot,
           }
 
           if (this.action) options.action = this.action
@@ -383,46 +416,46 @@ export class FrameController {
     }
   }
 
-  async #handleUnvisitableFrameResponse(fetchResponse) {
+  private async handleUnvisitableFrameResponse(fetchResponse: FetchResponse) {
     console.warn(
       `The response (${fetchResponse.statusCode}) from <turbo-frame id="${this.element.id}"> is performing a full page visit due to turbo-visit-control.`
     )
 
-    await this.#visitResponse(fetchResponse.response)
+    await this.visitResponse(fetchResponse.response)
   }
 
-  #willHandleFrameMissingFromResponse(fetchResponse) {
+  private willHandleFrameMissingFromResponse(fetchResponse: FetchResponse): boolean {
     this.element.setAttribute("complete", "")
 
     const response = fetchResponse.response
-    const visit = async (url, options) => {
+    const visit = async (url: Locatable | Response, options: Partial<VisitOptions> = {}) => {
       if (url instanceof Response) {
-        this.#visitResponse(url)
+        this.visitResponse(url)
       } else {
         session.visit(url, options)
       }
     }
 
-    const event = dispatch("turbo:frame-missing", {
+    const event = dispatch<TurboFrameMissingEvent>("turbo:frame-missing", {
       target: this.element,
       detail: { response, visit },
-      cancelable: true
+      cancelable: true,
     })
 
     return !event.defaultPrevented
   }
 
-  #handleFrameMissingFromResponse(fetchResponse) {
+  private handleFrameMissingFromResponse(fetchResponse: FetchResponse) {
     this.view.missing()
-    this.#throwFrameMissingError(fetchResponse)
+    this.throwFrameMissingError(fetchResponse)
   }
 
-  #throwFrameMissingError(fetchResponse) {
+  private throwFrameMissingError(fetchResponse: FetchResponse) {
     const message = `The response (${fetchResponse.statusCode}) did not contain the expected <turbo-frame id="${this.element.id}"> and will be ignored. To perform a full page visit instead, set turbo-visit-control to reload.`
     throw new TurboFrameMissingError(message)
   }
 
-  async #visitResponse(response) {
+  private async visitResponse(response: Response): Promise<void> {
     const wrapped = new FetchResponse(response)
     const responseHTML = await wrapped.responseHTML
     const { location, redirected, statusCode } = wrapped
@@ -430,12 +463,12 @@ export class FrameController {
     return session.visit(location, { response: { redirected, statusCode, responseHTML } })
   }
 
-  #findFrameElement(element, submitter) {
+  private findFrameElement(element: Element, submitter?: HTMLElement) {
     const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target")
     return getFrameElementById(id) ?? this.element
   }
 
-  async extractForeignFrameElement(container) {
+  async extractForeignFrameElement(container: ParentNode): Promise<FrameElement | null> {
     let element
     const id = CSS.escape(this.id)
 
@@ -458,16 +491,16 @@ export class FrameController {
     return null
   }
 
-  #formActionIsVisitable(form, submitter) {
+  private formActionIsVisitable(form: HTMLFormElement, submitter?: HTMLElement) {
     const action = getAction(form, submitter)
 
     return locationIsVisitable(expandURL(action), this.rootLocation)
   }
 
-  #shouldInterceptNavigation(element, submitter) {
+  private shouldInterceptNavigation(element: Element, submitter?: HTMLElement) {
     const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target")
 
-    if (element instanceof HTMLFormElement && !this.#formActionIsVisitable(element, submitter)) {
+    if (element instanceof HTMLFormElement && !this.formActionIsVisitable(element, submitter)) {
       return false
     }
 
@@ -509,8 +542,8 @@ export class FrameController {
     }
   }
 
-  set sourceURL(sourceURL) {
-    this.#ignoringChangesToAttribute("src", () => {
+  set sourceURL(sourceURL: string | undefined) {
+    this.ignoringChangesToAttribute("src", () => {
       this.element.src = sourceURL ?? null
     })
   }
@@ -520,15 +553,15 @@ export class FrameController {
   }
 
   get isLoading() {
-    return this.formSubmission !== undefined || this.#resolveVisitPromise() !== undefined
+    return this.formSubmission !== undefined || this.resolveVisitPromise() !== undefined
   }
 
   get complete() {
     return this.element.hasAttribute("complete")
   }
 
-  set complete(value) {
-    this.#ignoringChangesToAttribute("complete", () => {
+  set complete(value: boolean) {
+    this.ignoringChangesToAttribute("complete", () => {
       if (value) {
         this.element.setAttribute("complete", "")
       } else {
@@ -538,33 +571,33 @@ export class FrameController {
   }
 
   get isActive() {
-    return this.element.isActive && this.#connected
+    return this.element.isActive && this.connected
   }
 
   get rootLocation() {
-    const meta = this.element.ownerDocument.querySelector(`meta[name="turbo-root"]`)
+    const meta = this.element.ownerDocument.querySelector<HTMLMetaElement>(`meta[name="turbo-root"]`)
     const root = meta?.content ?? "/"
     return expandURL(root)
   }
 
-  #isIgnoringChangesTo(attributeName) {
-    return this.#ignoredAttributes.has(attributeName)
+  private isIgnoringChangesTo(attributeName: FrameElementObservedAttribute): boolean {
+    return this.ignoredAttributes.has(attributeName)
   }
 
-  #ignoringChangesToAttribute(attributeName, callback) {
-    this.#ignoredAttributes.add(attributeName)
+  private ignoringChangesToAttribute(attributeName: FrameElementObservedAttribute, callback: () => void) {
+    this.ignoredAttributes.add(attributeName)
     callback()
-    this.#ignoredAttributes.delete(attributeName)
+    this.ignoredAttributes.delete(attributeName)
   }
 
-  #withCurrentNavigationElement(element, callback) {
+  private withCurrentNavigationElement(element: Element, callback: () => void) {
     this.currentNavigationElement = element
     callback()
     delete this.currentNavigationElement
   }
 }
 
-function getFrameElementById(id) {
+function getFrameElementById(id: string | null) {
   if (id != null) {
     const element = document.getElementById(id)
     if (element instanceof FrameElement) {
@@ -573,7 +606,7 @@ function getFrameElementById(id) {
   }
 }
 
-function activateElement(element, currentURL) {
+function activateElement(element: Element | null, currentURL?: string | null) {
   if (element) {
     const src = element.getAttribute("src")
     if (src != null && currentURL != null && urlsAreEqual(src, currentURL)) {
diff --git a/src/core/frames/frame_redirector.js b/src/core/frames/frame_redirector.js
deleted file mode 100644
index 10aeee6cc..000000000
--- a/src/core/frames/frame_redirector.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { FormSubmitObserver } from "../../observers/form_submit_observer"
-import { FrameElement } from "../../elements/frame_element"
-import { LinkInterceptor } from "./link_interceptor"
-import { expandURL, getAction, locationIsVisitable } from "../url"
-
-export class FrameRedirector {
-  constructor(session, element) {
-    this.session = session
-    this.element = element
-    this.linkInterceptor = new LinkInterceptor(this, element)
-    this.formSubmitObserver = new FormSubmitObserver(this, element)
-  }
-
-  start() {
-    this.linkInterceptor.start()
-    this.formSubmitObserver.start()
-  }
-
-  stop() {
-    this.linkInterceptor.stop()
-    this.formSubmitObserver.stop()
-  }
-
-  // Link interceptor delegate
-
-  shouldInterceptLinkClick(element, _location, _event) {
-    return this.#shouldRedirect(element)
-  }
-
-  linkClickIntercepted(element, url, event) {
-    const frame = this.#findFrameElement(element)
-    if (frame) {
-      frame.delegate.linkClickIntercepted(element, url, event)
-    }
-  }
-
-  // Form submit observer delegate
-
-  willSubmitForm(element, submitter) {
-    return (
-      element.closest("turbo-frame") == null &&
-      this.#shouldSubmit(element, submitter) &&
-      this.#shouldRedirect(element, submitter)
-    )
-  }
-
-  formSubmitted(element, submitter) {
-    const frame = this.#findFrameElement(element, submitter)
-    if (frame) {
-      frame.delegate.formSubmitted(element, submitter)
-    }
-  }
-
-  #shouldSubmit(form, submitter) {
-    const action = getAction(form, submitter)
-    const meta = this.element.ownerDocument.querySelector(`meta[name="turbo-root"]`)
-    const rootLocation = expandURL(meta?.content ?? "/")
-
-    return this.#shouldRedirect(form, submitter) && locationIsVisitable(action, rootLocation)
-  }
-
-  #shouldRedirect(element, submitter) {
-    const isNavigatable =
-      element instanceof HTMLFormElement
-        ? this.session.submissionIsNavigatable(element, submitter)
-        : this.session.elementIsNavigatable(element)
-
-    if (isNavigatable) {
-      const frame = this.#findFrameElement(element, submitter)
-      return frame ? frame != element.closest("turbo-frame") : false
-    } else {
-      return false
-    }
-  }
-
-  #findFrameElement(element, submitter) {
-    const id = submitter?.getAttribute("data-turbo-frame") || element.getAttribute("data-turbo-frame")
-    if (id && id != "_top") {
-      const frame = this.element.querySelector(`#${id}:not([disabled])`)
-      if (frame instanceof FrameElement) {
-        return frame
-      }
-    }
-  }
-}
diff --git a/src/core/frames/frame_redirector.ts b/src/core/frames/frame_redirector.ts
new file mode 100644
index 000000000..3175e9fe0
--- /dev/null
+++ b/src/core/frames/frame_redirector.ts
@@ -0,0 +1,86 @@
+import { FormSubmitObserver, FormSubmitObserverDelegate } from "../../observers/form_submit_observer"
+import { FrameElement } from "../../elements/frame_element"
+import { LinkInterceptor, LinkInterceptorDelegate } from "./link_interceptor"
+import { expandURL, getAction, locationIsVisitable } from "../url"
+import { Session } from "../session"
+export class FrameRedirector implements LinkInterceptorDelegate, FormSubmitObserverDelegate {
+  readonly session: Session
+  readonly element: Element
+  readonly linkInterceptor: LinkInterceptor
+  readonly formSubmitObserver: FormSubmitObserver
+
+  constructor(session: Session, element: Element) {
+    this.session = session
+    this.element = element
+    this.linkInterceptor = new LinkInterceptor(this, element)
+    this.formSubmitObserver = new FormSubmitObserver(this, element)
+  }
+
+  start() {
+    this.linkInterceptor.start()
+    this.formSubmitObserver.start()
+  }
+
+  stop() {
+    this.linkInterceptor.stop()
+    this.formSubmitObserver.stop()
+  }
+
+  shouldInterceptLinkClick(element: Element, _location: string, _event: MouseEvent) {
+    return this.shouldRedirect(element)
+  }
+
+  linkClickIntercepted(element: Element, url: string, event: MouseEvent) {
+    const frame = this.findFrameElement(element)
+    if (frame) {
+      frame.delegate.linkClickIntercepted(element, url, event)
+    }
+  }
+
+  willSubmitForm(element: HTMLFormElement, submitter?: HTMLElement) {
+    return (
+      element.closest("turbo-frame") == null &&
+      this.shouldSubmit(element, submitter) &&
+      this.shouldRedirect(element, submitter)
+    )
+  }
+
+  formSubmitted(element: HTMLFormElement, submitter?: HTMLElement) {
+    const frame = this.findFrameElement(element, submitter)
+    if (frame) {
+      frame.delegate.formSubmitted(element, submitter)
+    }
+  }
+
+  private shouldSubmit(form: HTMLFormElement, submitter?: HTMLElement) {
+    const action = getAction(form, submitter)
+    const meta = this.element.ownerDocument.querySelector<HTMLMetaElement>(`meta[name="turbo-root"]`)
+    const rootLocation = expandURL(meta?.content ?? "/")
+
+    return this.shouldRedirect(form, submitter) && locationIsVisitable(action, rootLocation)
+  }
+
+  private shouldRedirect(element: Element, submitter?: HTMLElement) {
+    const isNavigatable =
+      element instanceof HTMLFormElement
+        ? this.session.submissionIsNavigatable(element, submitter)
+        : this.session.elementIsNavigatable(element)
+
+    if (isNavigatable) {
+      const frame = this.findFrameElement(element, submitter)
+      return frame ? frame != element.closest("turbo-frame") : false
+    } else {
+      return false
+    }
+  }
+
+  private findFrameElement(element: Element, submitter?: HTMLElement) {
+    const id = submitter?.getAttribute("data-turbo-frame") || element.getAttribute("data-turbo-frame")
+    if (id && id != "_top") {
+      const frame = this.element.querySelector(`#${id}:not([disabled])`)
+      if (frame instanceof FrameElement) {
+        return frame
+      }
+    }
+  }
+}
diff --git a/src/core/frames/frame_renderer.js b/src/core/frames/frame_renderer.ts
similarity index 70%
rename from src/core/frames/frame_renderer.js
rename to src/core/frames/frame_renderer.ts
index 1384465d6..4f9a17253 100644
--- a/src/core/frames/frame_renderer.js
+++ b/src/core/frames/frame_renderer.ts
@@ -1,8 +1,16 @@
+import { FrameElement } from "../../elements/frame_element"
 import { activateScriptElement, nextAnimationFrame } from "../../util"
-import { Renderer } from "../renderer"
+import { Render, Renderer } from "../renderer"
+import { Snapshot } from "../snapshot"
 
-export class FrameRenderer extends Renderer {
-  static renderElement(currentElement, newElement) {
+export interface FrameRendererDelegate {
+  willRenderFrame(currentElement: FrameElement, newElement: FrameElement): void
+}
+
+export class FrameRenderer extends Renderer<FrameElement> {
+  private readonly delegate: FrameRendererDelegate
+
+  static renderElement(currentElement: FrameElement, newElement: FrameElement) {
     const destinationRange = document.createRange()
     destinationRange.selectNodeContents(currentElement)
     destinationRange.deleteContents()
@@ -15,7 +23,14 @@ export class FrameRenderer extends Renderer {
     }
   }
 
-  constructor(delegate, currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
+  constructor(
+    delegate: FrameRendererDelegate,
+    currentSnapshot: Snapshot<FrameElement>,
+    newSnapshot: Snapshot<FrameElement>,
+    renderElement: Render<FrameElement>,
+    isPreview: boolean,
+    willRender = true
+  ) {
     super(currentSnapshot, newSnapshot, renderElement, isPreview, willRender)
     this.delegate = delegate
   }
@@ -67,7 +82,7 @@ export class FrameRenderer extends Renderer {
   }
 }
 
-function readScrollLogicalPosition(value, defaultValue) {
+function readScrollLogicalPosition(value: string | null, defaultValue: ScrollLogicalPosition): ScrollLogicalPosition {
   if (value == "end" || value == "start" || value == "center" || value == "nearest") {
     return value
   } else {
@@ -75,7 +90,7 @@ function readScrollLogicalPosition(value, defaultValue) {
   }
 }
 
-function readScrollBehavior(value, defaultValue) {
+function readScrollBehavior(value: string | null, defaultValue: ScrollBehavior): ScrollBehavior {
   if (value == "auto" || value == "smooth") {
     return value
   } else {
diff --git a/src/core/frames/frame_view.js b/src/core/frames/frame_view.js
deleted file mode 100644
index e65f64a77..000000000
--- a/src/core/frames/frame_view.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Snapshot } from "../snapshot"
-import { View } from "../view"
-
-export class FrameView extends View {
-  missing() {
-    this.element.innerHTML = `<strong class="turbo-frame-error">Content missing</strong>`
-  }
-
-  get snapshot() {
-    return new Snapshot(this.element)
-  }
-}
diff --git a/src/core/frames/frame_view.ts b/src/core/frames/frame_view.ts
new file mode 100644
index 000000000..b19714f35
--- /dev/null
+++ b/src/core/frames/frame_view.ts
@@ -0,0 +1,15 @@
+import { FrameElement } from "../../elements"
+import { Snapshot } from "../snapshot"
+import { View, ViewRenderOptions } from "../view"
+
+export type FrameViewRenderOptions = ViewRenderOptions<FrameElement>
+
+export class FrameView extends View<FrameElement> {
+  missing() {
+    this.element.innerHTML = `<strong class="turbo-frame-error">Content missing</strong>`
+  }
+
+  get snapshot() {
+    return new Snapshot(this.element)
+  }
+}
diff --git a/src/core/frames/link_interceptor.js b/src/core/frames/link_interceptor.ts
similarity index 65%
rename from src/core/frames/link_interceptor.js
rename to src/core/frames/link_interceptor.ts
index 9b9249544..8f2e13f40 100644
--- a/src/core/frames/link_interceptor.js
+++ b/src/core/frames/link_interceptor.ts
@@ -1,5 +1,16 @@
+import { TurboClickEvent, TurboBeforeVisitEvent } from "../session"
+
+export interface LinkInterceptorDelegate {
+  shouldInterceptLinkClick(element: Element, url: string, originalEvent: MouseEvent): boolean
+  linkClickIntercepted(element: Element, url: string, originalEvent: MouseEvent): void
+}
+
 export class LinkInterceptor {
-  constructor(delegate, element) {
+  readonly delegate: LinkInterceptorDelegate
+  readonly element: Element
+  private clickEvent?: Event
+
+  constructor(delegate: LinkInterceptorDelegate, element: Element) {
     this.delegate = delegate
     this.element = element
   }
@@ -16,7 +27,7 @@ export class LinkInterceptor {
     document.removeEventListener("turbo:before-visit", this.willVisit)
   }
 
-  clickBubbled = (event) => {
+  clickBubbled = (event: Event) => {
     if (this.respondsToEventTarget(event.target)) {
       this.clickEvent = event
     } else {
@@ -24,7 +35,7 @@ export class LinkInterceptor {
     }
   }
 
-  linkClicked = (event) => {
+  linkClicked = <EventListener>((event: TurboClickEvent) => {
     if (this.clickEvent && this.respondsToEventTarget(event.target) && event.target instanceof Element) {
       if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url, event.detail.originalEvent)) {
         this.clickEvent.preventDefault()
@@ -33,13 +44,13 @@ export class LinkInterceptor {
       }
     }
     delete this.clickEvent
-  }
+  })
 
-  willVisit = (_event) => {
+  willVisit = <EventListener>((_event: TurboBeforeVisitEvent) => {
     delete this.clickEvent
-  }
+  })
 
-  respondsToEventTarget(target) {
+  respondsToEventTarget(target: EventTarget | null) {
     const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null
     return element && element.closest("turbo-frame, html") == this.element
   }
diff --git a/src/core/index.js b/src/core/index.ts
similarity index 67%
rename from src/core/index.js
rename to src/core/index.ts
index 2a3dd8fe5..7b7507c3f 100644
--- a/src/core/index.js
+++ b/src/core/index.ts
@@ -1,5 +1,10 @@
-import { Session } from "./session"
+import { Adapter } from "./native/adapter"
+import { FormMode, Session } from "./session"
 import { Cache } from "./cache"
+import { Locatable } from "./url"
+import { StreamMessage } from "./streams/stream_message"
+import { StreamSource } from "./types"
+import { VisitOptions } from "./drive/visit"
 import { PageRenderer } from "./drive/page_renderer"
 import { PageSnapshot } from "./drive/page_snapshot"
 import { FrameRenderer } from "./frames/frame_renderer"
@@ -9,8 +14,24 @@ const session = new Session()
 const cache = new Cache(session)
 const { navigator } = session
 export { navigator, session, cache, PageRenderer, PageSnapshot, FrameRenderer }
+export type {
+  TurboBeforeCacheEvent,
+  TurboBeforeRenderEvent,
+  TurboBeforeVisitEvent,
+  TurboClickEvent,
+  TurboBeforeFrameRenderEvent,
+  TurboFrameLoadEvent,
+  TurboFrameRenderEvent,
+  TurboLoadEvent,
+  TurboRenderEvent,
+  TurboVisitEvent,
+} from "./session"
+
+export type { TurboSubmitStartEvent, TurboSubmitEndEvent } from "./drive/form_submission"
+export type { TurboFrameMissingEvent } from "./frames/frame_controller"
 
 export { StreamActions } from "./streams/stream_actions"
+export type { TurboStreamAction, TurboStreamActions } from "./streams/stream_actions"
 
 /**
  * Starts the main session.
@@ -26,7 +47,7 @@ export function start() {
  *
  * @param adapter Adapter to register
  */
-export function registerAdapter(adapter) {
+export function registerAdapter(adapter: Adapter) {
   session.registerAdapter(adapter)
 }
 
@@ -44,7 +65,7 @@ export function registerAdapter(adapter) {
  * @param options.snapshotHTML Cached snapshot to render
  * @param options.response Response of the specified location
  */
-export function visit(location, options) {
+export function visit(location: Locatable, options?: Partial<VisitOptions>) {
   session.visit(location, options)
 }
 
@@ -53,7 +74,7 @@ export function visit(location, options) {
  *
  * @param source Stream source to connect
  */
-export function connectStreamSource(source) {
+export function connectStreamSource(source: StreamSource) {
   session.connectStreamSource(source)
 }
 
@@ -62,7 +83,7 @@ export function connectStreamSource(source) {
  *
  * @param source Stream source to disconnect
  */
-export function disconnectStreamSource(source) {
+export function disconnectStreamSource(source: StreamSource) {
   session.disconnectStreamSource(source)
 }
 
@@ -72,7 +93,7 @@ export function disconnectStreamSource(source) {
  *
  * @param message Message to render
  */
-export function renderStreamMessage(message) {
+export function renderStreamMessage(message: StreamMessage | string) {
   session.renderStreamMessage(message)
 }
 
@@ -99,14 +120,16 @@ export function clearCache() {
  *
  * @param delay Time to delay in milliseconds
  */
-export function setProgressBarDelay(delay) {
+export function setProgressBarDelay(delay: number) {
   session.setProgressBarDelay(delay)
 }
 
-export function setConfirmMethod(confirmMethod) {
+export function setConfirmMethod(
+  confirmMethod: (message: string, element: HTMLFormElement, submitter: HTMLElement | undefined) => Promise<boolean>
+) {
   FormSubmission.confirmMethod = confirmMethod
 }
 
-export function setFormMode(mode) {
+export function setFormMode(mode: FormMode) {
   session.setFormMode(mode)
 }
diff --git a/src/core/native/adapter.ts b/src/core/native/adapter.ts
new file mode 100644
index 000000000..3ecfd9b22
--- /dev/null
+++ b/src/core/native/adapter.ts
@@ -0,0 +1,18 @@
+import { Visit, VisitOptions } from "../drive/visit"
+import { FormSubmission } from "../drive/form_submission"
+import { ReloadReason } from "./browser_adapter"
+
+export interface Adapter {
+  visitProposedToLocation(location: URL, options?: Partial<VisitOptions>): void
+  visitStarted(visit: Visit): void
+  visitCompleted(visit: Visit): void
+  visitFailed(visit: Visit): void
+  visitRequestStarted(visit: Visit): void
+  visitRequestCompleted(visit: Visit): void
+  visitRequestFailedWithStatusCode(visit: Visit, statusCode: number): void
+  visitRequestFinished(visit: Visit): void
+  visitRendered(visit: Visit): void
+  formSubmissionStarted?(formSubmission: FormSubmission): void
+  formSubmissionFinished?(formSubmission: FormSubmission): void
+  pageInvalidated(reason: ReloadReason): void
+}
diff --git a/src/core/native/browser_adapter.js b/src/core/native/browser_adapter.ts
similarity index 64%
rename from src/core/native/browser_adapter.js
rename to src/core/native/browser_adapter.ts
index 7505d7f8f..ca268e341 100644
--- a/src/core/native/browser_adapter.js
+++ b/src/core/native/browser_adapter.ts
@@ -1,26 +1,40 @@
+import { Adapter } from "./adapter"
 import { ProgressBar } from "../drive/progress_bar"
-import { SystemStatusCode } from "../drive/visit"
+import { SystemStatusCode, Visit, VisitOptions } from "../drive/visit"
+import { FormSubmission } from "../drive/form_submission"
+import { Session } from "../session"
 import { uuid, dispatch } from "../../util"
 
-export class BrowserAdapter {
-  progressBar = new ProgressBar()
+export type ReloadReason = StructuredReason | undefined
+interface StructuredReason {
+  reason: string
+  context?: { [key: string]: any }
+}
+
+export class BrowserAdapter implements Adapter {
+  readonly session: Session
+  readonly progressBar = new ProgressBar()
 
-  constructor(session) {
+  visitProgressBarTimeout?: number
+  formProgressBarTimeout?: number
+  location?: URL
+
+  constructor(session: Session) {
     this.session = session
   }
 
-  visitProposedToLocation(location, options) {
+  visitProposedToLocation(location: URL, options?: Partial<VisitOptions>) {
     this.navigator.startVisit(location, options?.restorationIdentifier || uuid(), options)
   }
 
-  visitStarted(visit) {
+  visitStarted(visit: Visit) {
     this.location = visit.location
     visit.loadCachedSnapshot()
     visit.issueRequest()
     visit.goToSamePageAnchor()
   }
 
-  visitRequestStarted(visit) {
+  visitRequestStarted(visit: Visit) {
     this.progressBar.setValue(0)
     if (visit.hasCachedSnapshot() || visit.action != "restore") {
       this.showVisitProgressBarAfterDelay()
@@ -29,11 +43,11 @@ export class BrowserAdapter {
     }
   }
 
-  visitRequestCompleted(visit) {
+  visitRequestCompleted(visit: Visit) {
     visit.loadResponse()
   }
 
-  visitRequestFailedWithStatusCode(visit, statusCode) {
+  visitRequestFailedWithStatusCode(visit: Visit, statusCode: number) {
     switch (statusCode) {
       case SystemStatusCode.networkFailure:
       case SystemStatusCode.timeoutFailure:
@@ -41,37 +55,35 @@ export class BrowserAdapter {
         return this.reload({
           reason: "request_failed",
           context: {
-            statusCode
-          }
+            statusCode,
+          },
         })
       default:
         return visit.loadResponse()
     }
   }
 
-  visitRequestFinished(_visit) {
+  visitRequestFinished(_visit: Visit) {
     this.progressBar.setValue(1)
     this.hideVisitProgressBar()
   }
 
-  visitCompleted(_visit) {}
+  visitCompleted(_visit: Visit) {}
 
-  pageInvalidated(reason) {
+  pageInvalidated(reason: ReloadReason) {
     this.reload(reason)
   }
 
-  visitFailed(_visit) {}
-
-  visitRendered(_visit) {}
+  visitFailed(_visit: Visit) {}
 
-  // Form Submission Delegate
+  visitRendered(_visit: Visit) {}
 
-  formSubmissionStarted(_formSubmission) {
+  formSubmissionStarted(_formSubmission: FormSubmission) {
     this.progressBar.setValue(0)
     this.showFormProgressBarAfterDelay()
   }
 
-  formSubmissionFinished(_formSubmission) {
+  formSubmissionFinished(_formSubmission: FormSubmission) {
     this.progressBar.setValue(1)
     this.hideFormProgressBar()
   }
@@ -108,7 +120,7 @@ export class BrowserAdapter {
     this.progressBar.show()
   }
 
-  reload(reason) {
+  reload(reason: ReloadReason) {
     dispatch("turbo:reload", { detail: reason })
 
     window.location.href = this.location?.toString() || window.location.href
diff --git a/src/core/renderer.js b/src/core/renderer.js
deleted file mode 100644
index 12d87927e..000000000
--- a/src/core/renderer.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Bardo } from "./bardo"
-
-export class Renderer {
-  #activeElement = null
-
-  constructor(currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
-    this.currentSnapshot = currentSnapshot
-    this.newSnapshot = newSnapshot
-    this.isPreview = isPreview
-    this.willRender = willRender
-    this.renderElement = renderElement
-    this.promise = new Promise((resolve, reject) => (this.resolvingFunctions = { resolve, reject }))
-  }
-
-  get shouldRender() {
-    return true
-  }
-
-  get reloadReason() {
-    return
-  }
-
-  prepareToRender() {
-    return
-  }
-
-  render() {
-    // Abstract method
-  }
-
-  finishRendering() {
-    if (this.resolvingFunctions) {
-      this.resolvingFunctions.resolve()
-      delete this.resolvingFunctions
-    }
-  }
-
-  async preservingPermanentElements(callback) {
-    await Bardo.preservingPermanentElements(this, this.permanentElementMap, callback)
-  }
-
-  focusFirstAutofocusableElement() {
-    const element = this.connectedSnapshot.firstAutofocusableElement
-    if (elementIsFocusable(element)) {
-      element.focus()
-    }
-  }
-
-  // Bardo delegate
-
-  enteringBardo(currentPermanentElement) {
-    if (this.#activeElement) return
-
-    if (currentPermanentElement.contains(this.currentSnapshot.activeElement)) {
-      this.#activeElement = this.currentSnapshot.activeElement
-    }
-  }
-
-  leavingBardo(currentPermanentElement) {
-    if (currentPermanentElement.contains(this.#activeElement) && this.#activeElement instanceof HTMLElement) {
-      this.#activeElement.focus()
-
-      this.#activeElement = null
-    }
-  }
-
-  get connectedSnapshot() {
-    return this.newSnapshot.isConnected ? this.newSnapshot : this.currentSnapshot
-  }
-
-  get currentElement() {
-    return this.currentSnapshot.element
-  }
-
-  get newElement() {
-    return this.newSnapshot.element
-  }
-
-  get permanentElementMap() {
-    return this.currentSnapshot.getPermanentElementMapForSnapshot(this.newSnapshot)
-  }
-}
-
-function elementIsFocusable(element) {
-  return element && typeof element.focus == "function"
-}
diff --git a/src/core/renderer.ts b/src/core/renderer.ts
new file mode 100644
index 000000000..e77be9d34
--- /dev/null
+++ b/src/core/renderer.ts
@@ -0,0 +1,100 @@
+import { Bardo, BardoDelegate } from "./bardo"
+import { Snapshot } from "./snapshot"
+import { ReloadReason } from "./native/browser_adapter"
+
+type ResolvingFunctions<T = unknown> = {
+  resolve(value: T | PromiseLike<T>): void
+  reject(reason?: any): void
+}
+
+export type Render<E> = (currentElement: E, newElement: E) => void
+
+export abstract class Renderer<E extends Element, S extends Snapshot<E> = Snapshot<E>> implements BardoDelegate {
+  readonly currentSnapshot: S
+  readonly newSnapshot: S
+  readonly isPreview: boolean
+  readonly willRender: boolean
+  readonly promise: Promise<void>
+  renderElement: Render<E>
+  private resolvingFunctions?: ResolvingFunctions<void>
+  private activeElement: Element | null = null
+
+  constructor(currentSnapshot: S, newSnapshot: S, renderElement: Render<E>, isPreview: boolean, willRender = true) {
+    this.currentSnapshot = currentSnapshot
+    this.newSnapshot = newSnapshot
+    this.isPreview = isPreview
+    this.willRender = willRender
+    this.renderElement = renderElement
+    this.promise = new Promise((resolve, reject) => (this.resolvingFunctions = { resolve, reject }))
+  }
+
+  get shouldRender() {
+    return true
+  }
+
+  get reloadReason(): ReloadReason {
+    return
+  }
+
+  prepareToRender() {
+    return
+  }
+
+  abstract render(): Promise<void>
+
+  finishRendering() {
+    if (this.resolvingFunctions) {
+      this.resolvingFunctions.resolve()
+      delete this.resolvingFunctions
+    }
+  }
+
+  async preservingPermanentElements(callback: () => void) {
+    await Bardo.preservingPermanentElements(this, this.permanentElementMap, callback)
+  }
+
+  focusFirstAutofocusableElement() {
+    const element = this.connectedSnapshot.firstAutofocusableElement
+    if (elementIsFocusable(element)) {
+      element.focus()
+    }
+  }
+
+  // Bardo delegate
+
+  enteringBardo(currentPermanentElement: Element) {
+    if (this.activeElement) return
+
+    if (currentPermanentElement.contains(this.currentSnapshot.activeElement)) {
+      this.activeElement = this.currentSnapshot.activeElement
+    }
+  }
+
+  leavingBardo(currentPermanentElement: Element) {
+    if (currentPermanentElement.contains(this.activeElement) && this.activeElement instanceof HTMLElement) {
+      this.activeElement.focus()
+
+      this.activeElement = null
+    }
+  }
+
+  get connectedSnapshot() {
+    return this.newSnapshot.isConnected ? this.newSnapshot : this.currentSnapshot
+  }
+
+  get currentElement() {
+    return this.currentSnapshot.element
+  }
+
+  get newElement() {
+    return this.newSnapshot.element
+  }
+
+  get permanentElementMap() {
+    return this.currentSnapshot.getPermanentElementMapForSnapshot(this.newSnapshot)
+  }
+}
+
+function elementIsFocusable(element: any): element is { focus: () => void } {
+  return element && typeof element.focus == "function"
+}
diff --git a/src/core/session.js b/src/core/session.ts
similarity index 54%
rename from src/core/session.js
rename to src/core/session.ts
index 44edc7856..31eab98f4 100644
--- a/src/core/session.js
+++ b/src/core/session.ts
@@ -1,44 +1,75 @@
-import { BrowserAdapter } from "./native/browser_adapter"
+import { Adapter } from "./native/adapter"
+import { BrowserAdapter, ReloadReason } from "./native/browser_adapter"
 import { CacheObserver } from "../observers/cache_observer"
-import { FormSubmitObserver } from "../observers/form_submit_observer"
+import { FormSubmitObserver, FormSubmitObserverDelegate } from "../observers/form_submit_observer"
 import { FrameRedirector } from "./frames/frame_redirector"
-import { History } from "./drive/history"
-import { LinkClickObserver } from "../observers/link_click_observer"
-import { FormLinkClickObserver } from "../observers/form_link_click_observer"
-import { getAction, expandURL, locationIsVisitable } from "./url"
-import { Navigator } from "./drive/navigator"
-import { PageObserver } from "../observers/page_observer"
+import { History, HistoryDelegate } from "./drive/history"
+import { LinkClickObserver, LinkClickObserverDelegate } from "../observers/link_click_observer"
+import { FormLinkClickObserver, FormLinkClickObserverDelegate } from "../observers/form_link_click_observer"
+import { getAction, expandURL, locationIsVisitable, Locatable } from "./url"
+import { Navigator, NavigatorDelegate } from "./drive/navigator"
+import { PageObserver, PageObserverDelegate } from "../observers/page_observer"
 import { ScrollObserver } from "../observers/scroll_observer"
 import { StreamMessage } from "./streams/stream_message"
 import { StreamMessageRenderer } from "./streams/stream_message_renderer"
 import { StreamObserver } from "../observers/stream_observer"
+import { Action, Position, StreamSource } from "./types"
 import { clearBusyState, dispatch, findClosestRecursively, getVisitAction, markAsBusy } from "../util"
-import { PageView } from "./drive/page_view"
+import { PageView, PageViewDelegate, PageViewRenderOptions } from "./drive/page_view"
+import { Visit, VisitOptions } from "./drive/visit"
+import { PageSnapshot } from "./drive/page_snapshot"
 import { FrameElement } from "../elements/frame_element"
-import { Preloader } from "./drive/preloader"
-
-export class Session {
-  navigator = new Navigator(this)
-  history = new History(this)
-  preloader = new Preloader(this)
-  view = new PageView(this, document.documentElement)
-  adapter = new BrowserAdapter(this)
-
-  pageObserver = new PageObserver(this)
-  cacheObserver = new CacheObserver()
-  linkClickObserver = new LinkClickObserver(this, window)
-  formSubmitObserver = new FormSubmitObserver(this, document)
-  scrollObserver = new ScrollObserver(this)
-  streamObserver = new StreamObserver(this)
-  formLinkClickObserver = new FormLinkClickObserver(this, document.documentElement)
-  frameRedirector = new FrameRedirector(this, document.documentElement)
-  streamMessageRenderer = new StreamMessageRenderer()
+import { FrameViewRenderOptions } from "./frames/frame_view"
+import { FetchResponse } from "../http/fetch_response"
+import { Preloader, PreloaderDelegate } from "./drive/preloader"
+
+export type FormMode = "on" | "off" | "optin"
+export type TimingData = unknown
+export type TurboBeforeCacheEvent = CustomEvent
+export type TurboBeforeRenderEvent = CustomEvent<
+  { newBody: HTMLBodyElement; isPreview: boolean } & PageViewRenderOptions
+>
+export type TurboBeforeVisitEvent = CustomEvent<{ url: string }>
+export type TurboClickEvent = CustomEvent<{ url: string; originalEvent: MouseEvent }>
+export type TurboFrameLoadEvent = CustomEvent
+export type TurboBeforeFrameRenderEvent = CustomEvent<{ newFrame: FrameElement } & FrameViewRenderOptions>
+export type TurboFrameRenderEvent = CustomEvent<{ fetchResponse: FetchResponse }>
+export type TurboLoadEvent = CustomEvent<{ url: string; timing: TimingData }>
+export type TurboRenderEvent = CustomEvent<{ isPreview: boolean }>
+export type TurboVisitEvent = CustomEvent<{ url: string; action: Action }>
+
+export class Session
+  implements
+    FormSubmitObserverDelegate,
+    HistoryDelegate,
+    FormLinkClickObserverDelegate,
+    LinkClickObserverDelegate,
+    NavigatorDelegate,
+    PageObserverDelegate,
+    PageViewDelegate,
+    PreloaderDelegate
+{
+  readonly navigator = new Navigator(this)
+  readonly history = new History(this)
+  readonly preloader = new Preloader(this)
+  readonly view = new PageView(this, document.documentElement as HTMLBodyElement)
+  adapter: Adapter = new BrowserAdapter(this)
+
+  readonly pageObserver = new PageObserver(this)
+  readonly cacheObserver = new CacheObserver()
+  readonly linkClickObserver = new LinkClickObserver(this, window)
+  readonly formSubmitObserver = new FormSubmitObserver(this, document)
+  readonly scrollObserver = new ScrollObserver(this)
+  readonly streamObserver = new StreamObserver(this)
+  readonly formLinkClickObserver = new FormLinkClickObserver(this, document.documentElement)
+  readonly frameRedirector = new FrameRedirector(this, document.documentElement)
+  readonly streamMessageRenderer = new StreamMessageRenderer()
 
   drive = true
   enabled = true
   progressBarDelay = 500
   started = false
-  formMode = "on"
+  formMode: FormMode = "on"
 
   start() {
     if (!this.started) {
@@ -76,11 +107,11 @@ export class Session {
     }
   }
 
-  registerAdapter(adapter) {
+  registerAdapter(adapter: Adapter) {
     this.adapter = adapter
   }
 
-  visit(location, options = {}) {
+  visit(location: Locatable, options: Partial<VisitOptions> = {}) {
     const frameElement = options.frame ? document.getElementById(options.frame) : null
 
     if (frameElement instanceof FrameElement) {
@@ -91,15 +122,15 @@ export class Session {
     }
   }
 
-  connectStreamSource(source) {
+  connectStreamSource(source: StreamSource) {
     this.streamObserver.connectStreamSource(source)
   }
 
-  disconnectStreamSource(source) {
+  disconnectStreamSource(source: StreamSource) {
     this.streamObserver.disconnectStreamSource(source)
   }
 
-  renderStreamMessage(message) {
+  renderStreamMessage(message: StreamMessage | string) {
     this.streamMessageRenderer.render(StreamMessage.wrap(message))
   }
 
@@ -107,11 +138,11 @@ export class Session {
     this.view.clearSnapshotCache()
   }
 
-  setProgressBarDelay(delay) {
+  setProgressBarDelay(delay: number) {
     this.progressBarDelay = delay
   }
 
-  setFormMode(mode) {
+  setFormMode(mode: FormMode) {
     this.formMode = mode
   }
 
@@ -125,28 +156,28 @@ export class Session {
 
   // History delegate
 
-  historyPoppedToLocationWithRestorationIdentifier(location, restorationIdentifier) {
+  historyPoppedToLocationWithRestorationIdentifier(location: URL, restorationIdentifier: string) {
     if (this.enabled) {
       this.navigator.startVisit(location, restorationIdentifier, {
         action: "restore",
-        historyChanged: true
+        historyChanged: true,
       })
     } else {
       this.adapter.pageInvalidated({
-        reason: "turbo_disabled"
+        reason: "turbo_disabled",
       })
     }
   }
 
   // Scroll observer delegate
 
-  scrollPositionChanged(position) {
+  scrollPositionChanged(position: Position) {
     this.history.updateRestorationData({ scrollPosition: position })
   }
 
   // Form click observer delegate
 
-  willSubmitFormLinkToLocation(link, location) {
+  willSubmitFormLinkToLocation(link: Element, location: URL): boolean {
     return this.elementIsNavigatable(link) && locationIsVisitable(location, this.snapshot.rootLocation)
   }
 
@@ -154,7 +185,7 @@ export class Session {
 
   // Link click observer delegate
 
-  willFollowLinkToLocation(link, location, event) {
+  willFollowLinkToLocation(link: Element, location: URL, event: MouseEvent) {
     return (
       this.elementIsNavigatable(link) &&
       locationIsVisitable(location, this.snapshot.rootLocation) &&
@@ -162,7 +193,7 @@ export class Session {
     )
   }
 
-  followedLinkToLocation(link, location) {
+  followedLinkToLocation(link: Element, location: URL) {
     const action = this.getActionForLink(link)
     const acceptsStreamResponse = link.hasAttribute("data-turbo-stream")
 
@@ -171,18 +202,16 @@ export class Session {
 
   // Navigator delegate
 
-  allowsVisitingLocationWithAction(location, action) {
+  allowsVisitingLocationWithAction(location: URL, action?: Action) {
     return this.locationWithActionIsSamePage(location, action) || this.applicationAllowsVisitingLocation(location)
   }
 
-  visitProposedToLocation(location, options) {
+  visitProposedToLocation(location: URL, options: Partial<VisitOptions>) {
     extendURLWithDeprecatedProperties(location)
     this.adapter.visitProposedToLocation(location, options)
   }
 
-  // Visit delegate
-
-  visitStarted(visit) {
+  visitStarted(visit: Visit) {
     if (!visit.acceptsStreamResponse) {
       markAsBusy(document.documentElement)
     }
@@ -192,22 +221,22 @@ export class Session {
     }
   }
 
-  visitCompleted(visit) {
+  visitCompleted(visit: Visit) {
     clearBusyState(document.documentElement)
     this.notifyApplicationAfterPageLoad(visit.getTimingMetrics())
   }
 
-  locationWithActionIsSamePage(location, action) {
+  locationWithActionIsSamePage(location: URL, action?: Action): boolean {
     return this.navigator.locationWithActionIsSamePage(location, action)
   }
 
-  visitScrolledToSamePageLocation(oldURL, newURL) {
+  visitScrolledToSamePageLocation(oldURL: URL, newURL: URL) {
     this.notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL)
   }
 
   // Form submit observer delegate
 
-  willSubmitForm(form, submitter) {
+  willSubmitForm(form: HTMLFormElement, submitter?: HTMLElement): boolean {
     const action = getAction(form, submitter)
 
     return (
@@ -216,7 +245,7 @@ export class Session {
     )
   }
 
-  formSubmitted(form, submitter) {
+  formSubmitted(form: HTMLFormElement, submitter?: HTMLElement) {
     this.navigator.submitForm(form, submitter)
   }
 
@@ -237,7 +266,7 @@ export class Session {
 
   // Stream observer delegate
 
-  receivedMessageFromStream(message) {
+  receivedMessageFromStream(message: StreamMessage) {
     this.renderStreamMessage(message)
   }
 
@@ -249,11 +278,11 @@ export class Session {
     }
   }
 
-  allowsImmediateRender({ element }, isPreview, options) {
+  allowsImmediateRender({ element }: PageSnapshot, isPreview: boolean, options: PageViewRenderOptions) {
     const event = this.notifyApplicationBeforeRender(element, isPreview, options)
     const {
       defaultPrevented,
-      detail: { render }
+      detail: { render },
     } = event
 
     if (this.view.renderer && render) {
@@ -263,105 +292,105 @@ export class Session {
     return !defaultPrevented
   }
 
-  viewRenderedSnapshot(_snapshot, isPreview) {
+  viewRenderedSnapshot(_snapshot: PageSnapshot, isPreview: boolean) {
     this.view.lastRenderedLocation = this.history.location
     this.notifyApplicationAfterRender(isPreview)
   }
 
-  preloadOnLoadLinksForView(element) {
+  preloadOnLoadLinksForView(element: Element) {
     this.preloader.preloadOnLoadLinksForView(element)
   }
 
-  viewInvalidated(reason) {
+  viewInvalidated(reason: ReloadReason) {
     this.adapter.pageInvalidated(reason)
   }
 
   // Frame element
 
-  frameLoaded(frame) {
+  frameLoaded(frame: FrameElement) {
     this.notifyApplicationAfterFrameLoad(frame)
   }
 
-  frameRendered(fetchResponse, frame) {
+  frameRendered(fetchResponse: FetchResponse, frame: FrameElement) {
     this.notifyApplicationAfterFrameRender(fetchResponse, frame)
   }
 
   // Application events
 
-  applicationAllowsFollowingLinkToLocation(link, location, ev) {
+  applicationAllowsFollowingLinkToLocation(link: Element, location: URL, ev: MouseEvent) {
     const event = this.notifyApplicationAfterClickingLinkToLocation(link, location, ev)
     return !event.defaultPrevented
   }
 
-  applicationAllowsVisitingLocation(location) {
+  applicationAllowsVisitingLocation(location: URL) {
     const event = this.notifyApplicationBeforeVisitingLocation(location)
     return !event.defaultPrevented
   }
 
-  notifyApplicationAfterClickingLinkToLocation(link, location, event) {
-    return dispatch("turbo:click", {
+  notifyApplicationAfterClickingLinkToLocation(link: Element, location: URL, event: MouseEvent) {
+    return dispatch<TurboClickEvent>("turbo:click", {
       target: link,
       detail: { url: location.href, originalEvent: event },
-      cancelable: true
+      cancelable: true,
     })
   }
 
-  notifyApplicationBeforeVisitingLocation(location) {
-    return dispatch("turbo:before-visit", {
+  notifyApplicationBeforeVisitingLocation(location: URL) {
+    return dispatch<TurboBeforeVisitEvent>("turbo:before-visit", {
       detail: { url: location.href },
-      cancelable: true
+      cancelable: true,
     })
   }
 
-  notifyApplicationAfterVisitingLocation(location, action) {
-    return dispatch("turbo:visit", { detail: { url: location.href, action } })
+  notifyApplicationAfterVisitingLocation(location: URL, action: Action) {
+    return dispatch<TurboVisitEvent>("turbo:visit", { detail: { url: location.href, action } })
   }
 
   notifyApplicationBeforeCachingSnapshot() {
-    return dispatch("turbo:before-cache")
+    return dispatch<TurboBeforeCacheEvent>("turbo:before-cache")
   }
 
-  notifyApplicationBeforeRender(newBody, isPreview, options) {
-    return dispatch("turbo:before-render", {
+  notifyApplicationBeforeRender(newBody: HTMLBodyElement, isPreview: boolean, options: PageViewRenderOptions) {
+    return dispatch<TurboBeforeRenderEvent>("turbo:before-render", {
       detail: { newBody, isPreview, ...options },
-      cancelable: true
+      cancelable: true,
     })
   }
 
-  notifyApplicationAfterRender(isPreview) {
-    return dispatch("turbo:render", { detail: { isPreview } })
+  notifyApplicationAfterRender(isPreview: boolean) {
+    return dispatch<TurboRenderEvent>("turbo:render", { detail: { isPreview } })
   }
 
-  notifyApplicationAfterPageLoad(timing = {}) {
-    return dispatch("turbo:load", {
-      detail: { url: this.location.href, timing }
+  notifyApplicationAfterPageLoad(timing: TimingData = {}) {
+    return dispatch<TurboLoadEvent>("turbo:load", {
+      detail: { url: this.location.href, timing },
     })
   }
 
-  notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL) {
+  notifyApplicationAfterVisitingSamePageLocation(oldURL: URL, newURL: URL) {
     dispatchEvent(
       new HashChangeEvent("hashchange", {
         oldURL: oldURL.toString(),
-        newURL: newURL.toString()
+        newURL: newURL.toString(),
       })
     )
   }
 
-  notifyApplicationAfterFrameLoad(frame) {
-    return dispatch("turbo:frame-load", { target: frame })
+  notifyApplicationAfterFrameLoad(frame: FrameElement) {
+    return dispatch<TurboFrameLoadEvent>("turbo:frame-load", { target: frame })
   }
 
-  notifyApplicationAfterFrameRender(fetchResponse, frame) {
-    return dispatch("turbo:frame-render", {
+  notifyApplicationAfterFrameRender(fetchResponse: FetchResponse, frame: FrameElement) {
+    return dispatch<TurboFrameRenderEvent>("turbo:frame-render", {
       detail: { fetchResponse },
       target: frame,
-      cancelable: true
+      cancelable: true,
     })
   }
 
   // Helpers
 
-  submissionIsNavigatable(form, submitter) {
+  submissionIsNavigatable(form: HTMLFormElement, submitter?: HTMLElement): boolean {
     if (this.formMode == "off") {
       return false
     } else {
@@ -375,7 +404,7 @@ export class Session {
     }
   }
 
-  elementIsNavigatable(element) {
+  elementIsNavigatable(element: Element): boolean {
     const container = findClosestRecursively(element, "[data-turbo]")
     const withinFrame = findClosestRecursively(element, "turbo-frame")
 
@@ -399,7 +428,7 @@ export class Session {
 
   // Private
 
-  getActionForLink(link) {
+  getActionForLink(link: Element): Action {
     return getVisitAction(link) || "advance"
   }
 
@@ -419,7 +448,7 @@ export class Session {
 // older adapters which do not expect URL objects. We should
 // consider removing this support at some point in the future.
 
-function extendURLWithDeprecatedProperties(url) {
+function extendURLWithDeprecatedProperties(url: URL) {
   Object.defineProperties(url, deprecatedLocationPropertyDescriptors)
 }
 
@@ -427,6 +456,6 @@ const deprecatedLocationPropertyDescriptors = {
   absoluteURL: {
     get() {
       return this.toString()
-    }
-  }
+    },
+  },
 }
diff --git a/src/core/snapshot.js b/src/core/snapshot.ts
similarity index 70%
rename from src/core/snapshot.js
rename to src/core/snapshot.ts
index 2a5c1dbd6..7d5431117 100644
--- a/src/core/snapshot.js
+++ b/src/core/snapshot.ts
@@ -1,5 +1,7 @@
-export class Snapshot {
-  constructor(element) {
+export class Snapshot<E extends Element = Element> {
+  readonly element: E
+
+  constructor(element: E) {
     this.element = element
   }
 
@@ -11,11 +13,11 @@ export class Snapshot {
     return [...this.element.children]
   }
 
-  hasAnchor(anchor) {
+  hasAnchor(anchor: string | undefined) {
     return this.getElementForAnchor(anchor) != null
   }
 
-  getElementForAnchor(anchor) {
+  getElementForAnchor(anchor: string | undefined) {
     return anchor ? this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`) : null
   }
 
@@ -38,12 +40,12 @@ export class Snapshot {
     return queryPermanentElementsAll(this.element)
   }
 
-  getPermanentElementById(id) {
+  getPermanentElementById(id: string) {
     return getPermanentElementById(this.element, id)
   }
 
-  getPermanentElementMapForSnapshot(snapshot) {
-    const permanentElementMap = {}
+  getPermanentElementMapForSnapshot(snapshot: Snapshot) {
+    const permanentElementMap: PermanentElementMap = {}
 
     for (const currentPermanentElement of this.permanentElements) {
       const { id } = currentPermanentElement
@@ -57,10 +59,12 @@ export class Snapshot {
   }
 }
 
-export function getPermanentElementById(node, id) {
+export function getPermanentElementById(node: ParentNode, id: string) {
   return node.querySelector(`#${id}[data-turbo-permanent]`)
 }
 
-export function queryPermanentElementsAll(node) {
+export function queryPermanentElementsAll(node: ParentNode) {
   return node.querySelectorAll("[id][data-turbo-permanent]")
 }
+
+export type PermanentElementMap = Record<string, [Element, Element]>
diff --git a/src/core/streams/stream_actions.js b/src/core/streams/stream_actions.ts
similarity index 76%
rename from src/core/streams/stream_actions.js
rename to src/core/streams/stream_actions.ts
index 7b06f5b84..e4a619f7c 100644
--- a/src/core/streams/stream_actions.js
+++ b/src/core/streams/stream_actions.ts
@@ -1,4 +1,9 @@
-export const StreamActions = {
+import { StreamElement } from "../../elements/stream_element"
+
+export type TurboStreamAction = (this: StreamElement) => void
+export type TurboStreamActions = { [action: string]: TurboStreamAction }
+
+export const StreamActions: TurboStreamActions = {
   after() {
     this.targetElements.forEach((e) => e.parentElement?.insertBefore(this.templateContent, e.nextSibling))
   },
@@ -30,5 +35,5 @@ export const StreamActions = {
       targetElement.innerHTML = ""
       targetElement.append(this.templateContent)
     })
-  }
+  },
 }
diff --git a/src/core/streams/stream_message.js b/src/core/streams/stream_message.ts
similarity index 59%
rename from src/core/streams/stream_message.js
rename to src/core/streams/stream_message.ts
index 7a3a65b3c..e6ca389a4 100644
--- a/src/core/streams/stream_message.js
+++ b/src/core/streams/stream_message.ts
@@ -1,9 +1,11 @@
+import { StreamElement } from "../../elements/stream_element"
 import { activateScriptElement, createDocumentFragment } from "../../util"
 
 export class StreamMessage {
-  static contentType = "text/vnd.turbo-stream.html"
+  static readonly contentType = "text/vnd.turbo-stream.html"
+  readonly fragment: DocumentFragment
 
-  static wrap(message) {
+  static wrap(message: StreamMessage | string) {
     if (typeof message == "string") {
       return new this(createDocumentFragment(message))
     } else {
@@ -11,13 +13,13 @@ export class StreamMessage {
     }
   }
 
-  constructor(fragment) {
+  constructor(fragment: DocumentFragment) {
     this.fragment = importStreamElements(fragment)
   }
 }
 
-function importStreamElements(fragment) {
-  for (const element of fragment.querySelectorAll("turbo-stream")) {
+function importStreamElements(fragment: DocumentFragment): DocumentFragment {
+  for (const element of fragment.querySelectorAll<StreamElement>("turbo-stream")) {
     const streamElement = document.importNode(element, true)
 
     for (const inertScriptElement of streamElement.templateElement.content.querySelectorAll("script")) {
diff --git a/src/core/streams/stream_message_renderer.js b/src/core/streams/stream_message_renderer.ts
similarity index 51%
rename from src/core/streams/stream_message_renderer.js
rename to src/core/streams/stream_message_renderer.ts
index c57a695b0..549e4de8d 100644
--- a/src/core/streams/stream_message_renderer.js
+++ b/src/core/streams/stream_message_renderer.ts
@@ -1,29 +1,29 @@
-import { Bardo } from "../bardo"
-import { getPermanentElementById, queryPermanentElementsAll } from "../snapshot"
+import { StreamMessage } from "./stream_message"
+import { StreamElement } from "../../elements/stream_element"
+import { Bardo, BardoDelegate } from "../bardo"
+import { PermanentElementMap, getPermanentElementById, queryPermanentElementsAll } from "../snapshot"
 
-export class StreamMessageRenderer {
-  render({ fragment }) {
+export class StreamMessageRenderer implements BardoDelegate {
+  render({ fragment }: StreamMessage) {
     Bardo.preservingPermanentElements(this, getPermanentElementMapForFragment(fragment), () =>
       document.documentElement.appendChild(fragment)
     )
   }
 
-  // Bardo delegate
-
-  enteringBardo(currentPermanentElement, newPermanentElement) {
+  enteringBardo(currentPermanentElement: Element, newPermanentElement: Element) {
     newPermanentElement.replaceWith(currentPermanentElement.cloneNode(true))
   }
 
   leavingBardo() {}
 }
 
-function getPermanentElementMapForFragment(fragment) {
+function getPermanentElementMapForFragment(fragment: DocumentFragment): PermanentElementMap {
   const permanentElementsInDocument = queryPermanentElementsAll(document.documentElement)
-  const permanentElementMap = {}
+  const permanentElementMap: PermanentElementMap = {}
   for (const permanentElementInDocument of permanentElementsInDocument) {
     const { id } = permanentElementInDocument
 
-    for (const streamElement of fragment.querySelectorAll("turbo-stream")) {
+    for (const streamElement of fragment.querySelectorAll<StreamElement>("turbo-stream")) {
       const elementInStream = getPermanentElementById(streamElement.templateElement.content, id)
 
       if (elementInStream) {
diff --git a/src/core/types.ts b/src/core/types.ts
new file mode 100644
index 000000000..90d1817ea
--- /dev/null
+++ b/src/core/types.ts
@@ -0,0 +1,16 @@
+export type Action = "advance" | "replace" | "restore"
+
+export type Position = { x: number; y: number }
+
+export type StreamSource = {
+  addEventListener(
+    type: "message",
+    listener: (event: MessageEvent) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void
+  removeEventListener(
+    type: "message",
+    listener: (event: MessageEvent) => void,
+    options?: boolean | EventListenerOptions
+  ): void
+}
diff --git a/src/core/url.js b/src/core/url.ts
similarity index 61%
rename from src/core/url.js
rename to src/core/url.ts
index dcd50cf26..0e45d8f2b 100644
--- a/src/core/url.js
+++ b/src/core/url.ts
@@ -1,8 +1,10 @@
-export function expandURL(locatable) {
+export type Locatable = URL | string
+
+export function expandURL(locatable: Locatable) {
   return new URL(locatable.toString(), document.baseURI)
 }
 
-export function getAnchor(url) {
+export function getAnchor(url: URL) {
   let anchorMatch
   if (url.hash) {
     return url.hash.slice(1)
@@ -12,54 +14,54 @@ export function getAnchor(url) {
   }
 }
 
-export function getAction(form, submitter) {
+export function getAction(form: HTMLFormElement, submitter?: HTMLElement) {
   const action = submitter?.getAttribute("formaction") || form.getAttribute("action") || form.action
 
   return expandURL(action)
 }
 
-export function getExtension(url) {
+export function getExtension(url: URL) {
   return (getLastPathComponent(url).match(/\.[^.]*$/) || [])[0] || ""
 }
 
-export function isHTML(url) {
+export function isHTML(url: URL) {
   return !!getExtension(url).match(/^(?:|\.(?:htm|html|xhtml|php))$/)
 }
 
-export function isPrefixedBy(baseURL, url) {
+export function isPrefixedBy(baseURL: URL, url: URL) {
   const prefix = getPrefix(url)
   return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix)
 }
 
-export function locationIsVisitable(location, rootLocation) {
+export function locationIsVisitable(location: URL, rootLocation: URL) {
   return isPrefixedBy(location, rootLocation) && isHTML(location)
 }
 
-export function getRequestURL(url) {
+export function getRequestURL(url: URL) {
   const anchor = getAnchor(url)
   return anchor != null ? url.href.slice(0, -(anchor.length + 1)) : url.href
 }
 
-export function toCacheKey(url) {
+export function toCacheKey(url: URL) {
   return getRequestURL(url)
 }
 
-export function urlsAreEqual(left, right) {
+export function urlsAreEqual(left: string, right: string) {
   return expandURL(left).href == expandURL(right).href
 }
 
-function getPathComponents(url) {
+function getPathComponents(url: URL) {
   return url.pathname.split("/").slice(1)
 }
 
-function getLastPathComponent(url) {
+function getLastPathComponent(url: URL) {
   return getPathComponents(url).slice(-1)[0]
 }
 
-function getPrefix(url) {
+function getPrefix(url: URL) {
   return addTrailingSlash(url.origin + url.pathname)
 }
 
-function addTrailingSlash(value) {
+function addTrailingSlash(value: string) {
   return value.endsWith("/") ? value : value + "/"
 }
diff --git a/src/core/view.js b/src/core/view.ts
similarity index 51%
rename from src/core/view.js
rename to src/core/view.ts
index ca81e8bdb..20109a35d 100644
--- a/src/core/view.js
+++ b/src/core/view.ts
@@ -1,17 +1,43 @@
+import { ReloadReason } from "./native/browser_adapter"
+import { Renderer, Render } from "./renderer"
+import { Snapshot } from "./snapshot"
+import { Position } from "./types"
 import { getAnchor } from "./url"
 
-export class View {
-  #resolveRenderPromise = (_value) => {}
-  #resolveInterceptionPromise = (_value) => {}
+export interface ViewRenderOptions<E> {
+  resume: (value?: any) => void
+  render: Render<E>
+}
+
+export interface ViewDelegate<E extends Element, S extends Snapshot<E>> {
+  allowsImmediateRender(snapshot: S, isPreview: boolean, options: ViewRenderOptions<E>): boolean
+  preloadOnLoadLinksForView(element: Element): void
+  viewRenderedSnapshot(snapshot: S, isPreview: boolean): void
+  viewInvalidated(reason: ReloadReason): void
+}
 
-  constructor(delegate, element) {
+export abstract class View<
+  E extends Element,
+  S extends Snapshot<E> = Snapshot<E>,
+  R extends Renderer<E, S> = Renderer<E, S>,
+  D extends ViewDelegate<E, S> = ViewDelegate<E, S>
+> {
+  readonly delegate: D
+  readonly element: E
+  renderer?: R
+  abstract readonly snapshot: S
+  renderPromise?: Promise<void>
+  private resolveRenderPromise = (_value: any) => {}
+  private resolveInterceptionPromise = (_value: any) => {}
+
+  constructor(delegate: D, element: E) {
     this.delegate = delegate
     this.element = element
   }
 
   // Scrolling
 
-  scrollToAnchor(anchor) {
+  scrollToAnchor(anchor: string | undefined) {
     const element = this.snapshot.getElementForAnchor(anchor)
     if (element) {
       this.scrollToElement(element)
@@ -21,15 +47,15 @@ export class View {
     }
   }
 
-  scrollToAnchorFromLocation(location) {
+  scrollToAnchorFromLocation(location: URL) {
     this.scrollToAnchor(getAnchor(location))
   }
 
-  scrollToElement(element) {
+  scrollToElement(element: Element) {
     element.scrollIntoView()
   }
 
-  focusElement(element) {
+  focusElement(element: Element) {
     if (element instanceof HTMLElement) {
       if (element.hasAttribute("tabindex")) {
         element.focus()
@@ -41,7 +67,7 @@ export class View {
     }
   }
 
-  scrollToPosition({ x, y }) {
+  scrollToPosition({ x, y }: Position) {
     this.scrollRoot.scrollTo(x, y)
   }
 
@@ -49,22 +75,22 @@ export class View {
     this.scrollToPosition({ x: 0, y: 0 })
   }
 
-  get scrollRoot() {
+  get scrollRoot(): { scrollTo(x: number, y: number): void } {
     return window
   }
 
   // Rendering
 
-  async render(renderer) {
+  async render(renderer: R) {
     const { isPreview, shouldRender, newSnapshot: snapshot } = renderer
     if (shouldRender) {
       try {
-        this.renderPromise = new Promise((resolve) => (this.#resolveRenderPromise = resolve))
+        this.renderPromise = new Promise((resolve) => (this.resolveRenderPromise = resolve))
         this.renderer = renderer
         await this.prepareToRenderSnapshot(renderer)
 
-        const renderInterception = new Promise((resolve) => (this.#resolveInterceptionPromise = resolve))
-        const options = { resume: this.#resolveInterceptionPromise, render: this.renderer.renderElement }
+        const renderInterception = new Promise((resolve) => (this.resolveInterceptionPromise = resolve))
+        const options = { resume: this.resolveInterceptionPromise, render: this.renderer.renderElement }
         const immediateRender = this.delegate.allowsImmediateRender(snapshot, isPreview, options)
         if (!immediateRender) await renderInterception
 
@@ -74,7 +100,7 @@ export class View {
         this.finishRenderingSnapshot(renderer)
       } finally {
         delete this.renderer
-        this.#resolveRenderPromise(undefined)
+        this.resolveRenderPromise(undefined)
         delete this.renderPromise
       }
     } else {
@@ -82,16 +108,16 @@ export class View {
     }
   }
 
-  invalidate(reason) {
+  invalidate(reason: ReloadReason) {
     this.delegate.viewInvalidated(reason)
   }
 
-  async prepareToRenderSnapshot(renderer) {
+  async prepareToRenderSnapshot(renderer: R) {
     this.markAsPreview(renderer.isPreview)
     await renderer.prepareToRender()
   }
 
-  markAsPreview(isPreview) {
+  markAsPreview(isPreview: boolean) {
     if (isPreview) {
       this.element.setAttribute("data-turbo-preview", "")
     } else {
@@ -99,11 +125,11 @@ export class View {
     }
   }
 
-  async renderSnapshot(renderer) {
+  async renderSnapshot(renderer: R) {
     await renderer.render()
   }
 
-  finishRenderingSnapshot(renderer) {
+  finishRenderingSnapshot(renderer: R) {
     renderer.finishRendering()
   }
 }
diff --git a/src/elements/frame_element.js b/src/elements/frame_element.ts
similarity index 67%
rename from src/elements/frame_element.js
rename to src/elements/frame_element.ts
index 0e2bee917..8a177a6d7 100644
--- a/src/elements/frame_element.js
+++ b/src/elements/frame_element.ts
@@ -1,6 +1,28 @@
-export const FrameLoadingStyle = {
-  eager: "eager",
-  lazy: "lazy"
+import { FetchResponse } from "../http/fetch_response"
+import { Snapshot } from "../core/snapshot"
+import { LinkInterceptorDelegate } from "../core/frames/link_interceptor"
+import { FormSubmitObserverDelegate } from "../observers/form_submit_observer"
+
+export enum FrameLoadingStyle {
+  eager = "eager",
+  lazy = "lazy",
+}
+
+export type FrameElementObservedAttribute = keyof FrameElement & ("disabled" | "complete" | "loading" | "src")
+
+export interface FrameElementDelegate extends LinkInterceptorDelegate, FormSubmitObserverDelegate {
+  connect(): void
+  disconnect(): void
+  completeChanged(): void
+  loadingStyleChanged(): void
+  sourceURLChanged(): void
+  sourceURLReloaded(): Promise<void>
+  disabledChanged(): void
+  loadResponse(response: FetchResponse): void
+  proposeVisitIfNavigatedWithAction(frame: FrameElement, element: Element, submitter?: HTMLElement): void
+  fetchResponseLoaded: (fetchResponse: FetchResponse) => void
+  visitCachedSnapshot: (snapshot: Snapshot) => void
+  isLoading: boolean
 }
 
 /**
@@ -20,11 +42,12 @@ export const FrameLoadingStyle = {
  *   </turbo-frame>
  */
 export class FrameElement extends HTMLElement {
-  static delegateConstructor = undefined
+  static delegateConstructor: new (element: FrameElement) => FrameElementDelegate
 
-  loaded = Promise.resolve()
+  loaded: Promise<void> = Promise.resolve()
+  readonly delegate: FrameElementDelegate
 
-  static get observedAttributes() {
+  static get observedAttributes(): FrameElementObservedAttribute[] {
     return ["disabled", "complete", "loading", "src"]
   }
 
@@ -41,11 +64,11 @@ export class FrameElement extends HTMLElement {
     this.delegate.disconnect()
   }
 
-  reload() {
+  reload(): Promise<void> {
     return this.delegate.sourceURLReloaded()
   }
 
-  attributeChangedCallback(name) {
+  attributeChangedCallback(name: string) {
     if (name == "loading") {
       this.delegate.loadingStyleChanged()
     } else if (name == "complete") {
@@ -67,7 +90,7 @@ export class FrameElement extends HTMLElement {
   /**
    * Sets the URL to lazily load source HTML from
    */
-  set src(value) {
+  set src(value: string | null) {
     if (value) {
       this.setAttribute("src", value)
     } else {
@@ -78,14 +101,14 @@ export class FrameElement extends HTMLElement {
   /**
    * Determines if the element is loading
    */
-  get loading() {
+  get loading(): FrameLoadingStyle {
     return frameLoadingStyleFromString(this.getAttribute("loading") || "")
   }
 
   /**
    * Sets the value of if the element is loading
    */
-  set loading(value) {
+  set loading(value: FrameLoadingStyle) {
     if (value) {
       this.setAttribute("loading", value)
     } else {
@@ -107,7 +130,7 @@ export class FrameElement extends HTMLElement {
    *
    * If disabled, no requests will be intercepted by the frame.
    */
-  set disabled(value) {
+  set disabled(value: boolean) {
     if (value) {
       this.setAttribute("disabled", "")
     } else {
@@ -129,7 +152,7 @@ export class FrameElement extends HTMLElement {
    *
    * If true, the frame will be scrolled into view automatically on update.
    */
-  set autoscroll(value) {
+  set autoscroll(value: boolean) {
     if (value) {
       this.setAttribute("autoscroll", "")
     } else {
@@ -163,7 +186,7 @@ export class FrameElement extends HTMLElement {
   }
 }
 
-function frameLoadingStyleFromString(style) {
+function frameLoadingStyleFromString(style: string) {
   switch (style.toLowerCase()) {
     case "lazy":
       return FrameLoadingStyle.lazy
diff --git a/src/elements/index.js b/src/elements/index.ts
similarity index 100%
rename from src/elements/index.js
rename to src/elements/index.ts
diff --git a/src/elements/stream_element.js b/src/elements/stream_element.ts
similarity index 84%
rename from src/elements/stream_element.js
rename to src/elements/stream_element.ts
index 38f463fb3..e0213f97d 100644
--- a/src/elements/stream_element.js
+++ b/src/elements/stream_element.ts
@@ -1,6 +1,10 @@
 import { StreamActions } from "../core/streams/stream_actions"
 import { nextAnimationFrame } from "../util"
 
+type Render = (currentElement: StreamElement) => Promise<void>
+
+export type TurboBeforeStreamRenderEvent = CustomEvent<{ newStream: StreamElement; render: Render }>
+
 // <turbo-stream action=replace target=id><template>...
 
 /**
@@ -24,7 +28,7 @@ import { nextAnimationFrame } from "../util"
  *   </turbo-stream>
  */
 export class StreamElement extends HTMLElement {
-  static async renderElement(newElement) {
+  static async renderElement(newElement: StreamElement): Promise<void> {
     await newElement.performAction()
   }
 
@@ -38,6 +42,8 @@ export class StreamElement extends HTMLElement {
     }
   }
 
+  private renderPromise?: Promise<void>
+
   async render() {
     return (this.renderPromise ??= (async () => {
       const event = this.beforeRenderEvent
@@ -82,9 +88,9 @@ export class StreamElement extends HTMLElement {
       if (actionFunction) {
         return actionFunction
       }
-      this.#raise("unknown action")
+      this.raise("unknown action")
     }
-    this.#raise("action attribute is missing")
+    this.raise("action attribute is missing")
   }
 
   /**
@@ -96,7 +102,7 @@ export class StreamElement extends HTMLElement {
     } else if (this.targets) {
       return this.targetElementsByQuery
     } else {
-      this.#raise("target or targets attribute is missing")
+      this.raise("target or targets attribute is missing")
     }
   }
 
@@ -118,7 +124,7 @@ export class StreamElement extends HTMLElement {
     } else if (this.firstElementChild instanceof HTMLTemplateElement) {
       return this.firstElementChild
     }
-    this.#raise("first child element must be a <template> element")
+    this.raise("first child element must be a <template> element")
   }
 
   /**
@@ -143,24 +149,24 @@ export class StreamElement extends HTMLElement {
     return this.getAttribute("targets")
   }
 
-  #raise(message) {
+  private raise(message: string): never {
     throw new Error(`${this.description}: ${message}`)
   }
 
-  get description() {
+  private get description() {
     return (this.outerHTML.match(/<[^>]+>/) ?? [])[0] ?? "<turbo-stream>"
   }
 
-  get beforeRenderEvent() {
+  private get beforeRenderEvent(): TurboBeforeStreamRenderEvent {
     return new CustomEvent("turbo:before-stream-render", {
       bubbles: true,
       cancelable: true,
-      detail: { newStream: this, render: StreamElement.renderElement }
+      detail: { newStream: this, render: StreamElement.renderElement },
     })
   }
 
-  get targetElementsById() {
-    const element = this.ownerDocument?.getElementById(this.target)
+  private get targetElementsById() {
+    const element = this.ownerDocument?.getElementById(this.target!)
 
     if (element !== null) {
       return [element]
@@ -169,8 +175,8 @@ export class StreamElement extends HTMLElement {
     }
   }
 
-  get targetElementsByQuery() {
-    const elements = this.ownerDocument?.querySelectorAll(this.targets)
+  private get targetElementsByQuery() {
+    const elements = this.ownerDocument?.querySelectorAll(this.targets!)
 
     if (elements.length !== 0) {
       return Array.prototype.slice.call(elements)
diff --git a/src/elements/stream_source_element.js b/src/elements/stream_source_element.ts
similarity index 81%
rename from src/elements/stream_source_element.js
rename to src/elements/stream_source_element.ts
index 4e1be1b7a..48f97e5fe 100644
--- a/src/elements/stream_source_element.js
+++ b/src/elements/stream_source_element.ts
@@ -1,7 +1,8 @@
+import { StreamSource } from "../core/types"
 import { connectStreamSource, disconnectStreamSource } from "../core/index"
 
 export class StreamSourceElement extends HTMLElement {
-  streamSource = null
+  streamSource: StreamSource | null = null
 
   connectedCallback() {
     this.streamSource = this.src.match(/^ws{1,2}:/) ? new WebSocket(this.src) : new EventSource(this.src)
@@ -15,7 +16,7 @@ export class StreamSourceElement extends HTMLElement {
     }
   }
 
-  get src() {
+  get src(): string {
     return this.getAttribute("src") || ""
   }
 }
diff --git a/src/globals.d.ts b/src/globals.d.ts
new file mode 100644
index 000000000..25f5dec19
--- /dev/null
+++ b/src/globals.d.ts
@@ -0,0 +1,13 @@
+interface SubmitEvent extends Event {
+  submitter: HTMLElement | null
+}
+
+interface Node {
+  // https://github.com/Microsoft/TypeScript/issues/283
+  cloneNode(deep?: boolean): this
+}
+
+interface Window {
+  Turbo: typeof import("./core/index")
+  SubmitEvent: typeof Event
+}
diff --git a/src/http/fetch_request.js b/src/http/fetch_request.js
deleted file mode 100644
index a5b606e8f..000000000
--- a/src/http/fetch_request.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import { FetchResponse } from "./fetch_response"
-import { dispatch } from "../util"
-
-export function fetchMethodFromString(method) {
-  switch (method.toLowerCase()) {
-    case "get":
-      return FetchMethod.get
-    case "post":
-      return FetchMethod.post
-    case "put":
-      return FetchMethod.put
-    case "patch":
-      return FetchMethod.patch
-    case "delete":
-      return FetchMethod.delete
-  }
-}
-
-export const FetchMethod = {
-  get: "get",
-  post: "post",
-  put: "put",
-  patch: "patch",
-  delete: "delete"
-}
-
-export class FetchRequest {
-  abortController = new AbortController()
-  #resolveRequestPromise = (_value) => {}
-
-  constructor(delegate, method, location, body = new URLSearchParams(), target = null) {
-    this.delegate = delegate
-    this.method = method
-    this.headers = this.defaultHeaders
-    this.body = body
-    this.url = location
-    this.target = target
-  }
-
-  get location() {
-    return this.url
-  }
-
-  get params() {
-    return this.url.searchParams
-  }
-
-  get entries() {
-    return this.body ? Array.from(this.body.entries()) : []
-  }
-
-  cancel() {
-    this.abortController.abort()
-  }
-
-  async perform() {
-    const { fetchOptions } = this
-    this.delegate.prepareRequest(this)
-    await this.#allowRequestToBeIntercepted(fetchOptions)
-    try {
-      this.delegate.requestStarted(this)
-      const response = await fetch(this.url.href, fetchOptions)
-      return await this.receive(response)
-    } catch (error) {
-      if (error.name !== "AbortError") {
-        if (this.#willDelegateErrorHandling(error)) {
-          this.delegate.requestErrored(this, error)
-        }
-        throw error
-      }
-    } finally {
-      this.delegate.requestFinished(this)
-    }
-  }
-
-  async receive(response) {
-    const fetchResponse = new FetchResponse(response)
-    const event = dispatch("turbo:before-fetch-response", {
-      cancelable: true,
-      detail: { fetchResponse },
-      target: this.target
-    })
-    if (event.defaultPrevented) {
-      this.delegate.requestPreventedHandlingResponse(this, fetchResponse)
-    } else if (fetchResponse.succeeded) {
-      this.delegate.requestSucceededWithResponse(this, fetchResponse)
-    } else {
-      this.delegate.requestFailedWithResponse(this, fetchResponse)
-    }
-    return fetchResponse
-  }
-
-  get fetchOptions() {
-    return {
-      method: FetchMethod[this.method].toUpperCase(),
-      credentials: "same-origin",
-      headers: this.headers,
-      redirect: "follow",
-      body: this.isSafe ? null : this.body,
-      signal: this.abortSignal,
-      referrer: this.delegate.referrer?.href
-    }
-  }
-
-  get defaultHeaders() {
-    return {
-      Accept: "text/html, application/xhtml+xml"
-    }
-  }
-
-  get isSafe() {
-    return this.method === FetchMethod.get
-  }
-
-  get abortSignal() {
-    return this.abortController.signal
-  }
-
-  acceptResponseType(mimeType) {
-    this.headers["Accept"] = [mimeType, this.headers["Accept"]].join(", ")
-  }
-
-  async #allowRequestToBeIntercepted(fetchOptions) {
-    const requestInterception = new Promise((resolve) => (this.#resolveRequestPromise = resolve))
-    const event = dispatch("turbo:before-fetch-request", {
-      cancelable: true,
-      detail: {
-        fetchOptions,
-        url: this.url,
-        resume: this.#resolveRequestPromise
-      },
-      target: this.target
-    })
-    if (event.defaultPrevented) await requestInterception
-  }
-
-  #willDelegateErrorHandling(error) {
-    const event = dispatch("turbo:fetch-request-error", {
-      target: this.target,
-      cancelable: true,
-      detail: { request: this, error: error }
-    })
-
-    return !event.defaultPrevented
-  }
-}
diff --git a/src/http/fetch_request.ts b/src/http/fetch_request.ts
new file mode 100644
index 000000000..5086392b2
--- /dev/null
+++ b/src/http/fetch_request.ts
@@ -0,0 +1,194 @@
+import { FetchResponse } from "./fetch_response"
+import { FrameElement } from "../elements/frame_element"
+import { dispatch } from "../util"
+
+export type TurboBeforeFetchRequestEvent = CustomEvent<{
+  fetchOptions: RequestInit
+  url: URL
+  resume: (value?: any) => void
+}>
+export type TurboBeforeFetchResponseEvent = CustomEvent<{
+  fetchResponse: FetchResponse
+}>
+export type TurboFetchRequestErrorEvent = CustomEvent<{
+  request: FetchRequest
+  error: Error
+}>
+
+export interface FetchRequestDelegate {
+  referrer?: URL
+
+  prepareRequest(request: FetchRequest): void
+  requestStarted(request: FetchRequest): void
+  requestPreventedHandlingResponse(request: FetchRequest, response: FetchResponse): void
+  requestSucceededWithResponse(request: FetchRequest, response: FetchResponse): void
+  requestFailedWithResponse(request: FetchRequest, response: FetchResponse): void
+  requestErrored(request: FetchRequest, error: Error): void
+  requestFinished(request: FetchRequest): void
+}
+
+export enum FetchMethod {
+  get,
+  post,
+  put,
+  patch,
+  delete,
+}
+
+export function fetchMethodFromString(method: string) {
+  switch (method.toLowerCase()) {
+    case "get":
+      return FetchMethod.get
+    case "post":
+      return FetchMethod.post
+    case "put":
+      return FetchMethod.put
+    case "patch":
+      return FetchMethod.patch
+    case "delete":
+      return FetchMethod.delete
+  }
+}
+
+export type FetchRequestBody = FormData | URLSearchParams
+
+export type FetchRequestHeaders = { [header: string]: string }
+
+export interface FetchRequestOptions {
+  headers: FetchRequestHeaders
+  body: FetchRequestBody
+  followRedirects: boolean
+}
+
+export class FetchRequest {
+  readonly delegate: FetchRequestDelegate
+  readonly method: FetchMethod
+  readonly headers: FetchRequestHeaders
+  readonly url: URL
+  readonly body?: FetchRequestBody
+  readonly target?: FrameElement | HTMLFormElement | null
+  readonly abortController = new AbortController()
+  private resolveRequestPromise = (_value: any) => {}
+
+  constructor(
+    delegate: FetchRequestDelegate,
+    method: FetchMethod,
+    location: URL,
+    body: FetchRequestBody = new URLSearchParams(),
+    target: FrameElement | HTMLFormElement | null = null
+  ) {
+    this.delegate = delegate
+    this.method = method
+    this.headers = this.defaultHeaders
+    this.body = body
+    this.url = location
+    this.target = target
+  }
+
+  get location(): URL {
+    return this.url
+  }
+
+  get params(): URLSearchParams {
+    return this.url.searchParams
+  }
+
+  get entries() {
+    return this.body ? Array.from(this.body.entries()) : []
+  }
+
+  cancel() {
+    this.abortController.abort()
+  }
+
+  async perform(): Promise<FetchResponse | void> {
+    const { fetchOptions } = this
+    this.delegate.prepareRequest(this)
+    await this.allowRequestToBeIntercepted(fetchOptions)
+    try {
+      this.delegate.requestStarted(this)
+      const response = await fetch(this.url.href, fetchOptions)
+      return await this.receive(response)
+    } catch (error) {
+      if ((error as Error).name !== "AbortError") {
+        if (this.willDelegateErrorHandling(error as Error)) {
+          this.delegate.requestErrored(this, error as Error)
+        }
+        throw error
+      }
+    } finally {
+      this.delegate.requestFinished(this)
+    }
+  }
+
+  async receive(response: Response): Promise<FetchResponse> {
+    const fetchResponse = new FetchResponse(response)
+    const event = dispatch<TurboBeforeFetchResponseEvent>("turbo:before-fetch-response", {
+      cancelable: true,
+      detail: { fetchResponse },
+      target: this.target as EventTarget,
+    })
+    if (event.defaultPrevented) {
+      this.delegate.requestPreventedHandlingResponse(this, fetchResponse)
+    } else if (fetchResponse.succeeded) {
+      this.delegate.requestSucceededWithResponse(this, fetchResponse)
+    } else {
+      this.delegate.requestFailedWithResponse(this, fetchResponse)
+    }
+    return fetchResponse
+  }
+
+  get fetchOptions(): RequestInit {
+    return {
+      method: FetchMethod[this.method].toUpperCase(),
+      credentials: "same-origin",
+      headers: this.headers,
+      redirect: "follow",
+      body: this.isSafe ? null : this.body,
+      signal: this.abortSignal,
+      referrer: this.delegate.referrer?.href,
+    }
+  }
+
+  get defaultHeaders() {
+    return {
+      Accept: "text/html, application/xhtml+xml",
+    }
+  }
+
+  get isSafe() {
+    return this.method === FetchMethod.get
+  }
+
+  get abortSignal() {
+    return this.abortController.signal
+  }
+
+  acceptResponseType(mimeType: string) {
+    this.headers["Accept"] = [mimeType, this.headers["Accept"]].join(", ")
+  }
+
+  private async allowRequestToBeIntercepted(fetchOptions: RequestInit) {
+    const requestInterception = new Promise((resolve) => (this.resolveRequestPromise = resolve))
+    const event = dispatch<TurboBeforeFetchRequestEvent>("turbo:before-fetch-request", {
+      cancelable: true,
+      detail: {
+        fetchOptions,
+        url: this.url,
+        resume: this.resolveRequestPromise,
+      },
+      target: this.target as EventTarget,
+    })
+    if (event.defaultPrevented) await requestInterception
+  }
+
+  private willDelegateErrorHandling(error: Error) {
+    const event = dispatch<TurboFetchRequestErrorEvent>("turbo:fetch-request-error", {
+      target: this.target as EventTarget,
+      cancelable: true,
+      detail: { request: this, error: error },
+    })
+
+    return !event.defaultPrevented
+  }
+}
diff --git a/src/http/fetch_response.js b/src/http/fetch_response.ts
similarity index 82%
rename from src/http/fetch_response.js
rename to src/http/fetch_response.ts
index 3628d2e8f..88fbdce14 100644
--- a/src/http/fetch_response.js
+++ b/src/http/fetch_response.ts
@@ -1,7 +1,9 @@
 import { expandURL } from "../core/url"
 
 export class FetchResponse {
-  constructor(response) {
+  readonly response: Response
+
+  constructor(response: Response) {
     this.response = response
   }
 
@@ -25,7 +27,7 @@ export class FetchResponse {
     return this.response.redirected
   }
 
-  get location() {
+  get location(): URL {
     return expandURL(this.response.url)
   }
 
@@ -41,11 +43,11 @@ export class FetchResponse {
     return this.header("Content-Type")
   }
 
-  get responseText() {
+  get responseText(): Promise<string> {
     return this.response.clone().text()
   }
 
-  get responseHTML() {
+  get responseHTML(): Promise<string | undefined> {
     if (this.isHTML) {
       return this.response.clone().text()
     } else {
@@ -53,7 +55,7 @@ export class FetchResponse {
     }
   }
 
-  header(name) {
+  header(name: string) {
     return this.response.headers.get(name)
   }
 }
diff --git a/src/http/index.js b/src/http/index.js
deleted file mode 100644
index ab8455149..000000000
--- a/src/http/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./fetch_request"
-export * from "./fetch_response"
diff --git a/src/http/index.ts b/src/http/index.ts
new file mode 100644
index 000000000..9c1fa8e4f
--- /dev/null
+++ b/src/http/index.ts
@@ -0,0 +1,5 @@
+export type {
+  TurboBeforeFetchRequestEvent,
+  TurboBeforeFetchResponseEvent,
+  TurboFetchRequestErrorEvent,
+} from "./fetch_request"
diff --git a/src/index.js b/src/index.ts
similarity index 100%
rename from src/index.js
rename to src/index.ts
diff --git a/src/observers/appearance_observer.js b/src/observers/appearance_observer.ts
similarity index 57%
rename from src/observers/appearance_observer.js
rename to src/observers/appearance_observer.ts
index 2cc943295..7a622a481 100644
--- a/src/observers/appearance_observer.js
+++ b/src/observers/appearance_observer.ts
@@ -1,7 +1,14 @@
-export class AppearanceObserver {
+export interface AppearanceObserverDelegate<T extends Element> {
+  elementAppearedInViewport(element: T): void
+}
+
+export class AppearanceObserver<T extends Element> {
+  readonly delegate: AppearanceObserverDelegate<T>
+  readonly element: T
+  readonly intersectionObserver: IntersectionObserver
   started = false
 
-  constructor(delegate, element) {
+  constructor(delegate: AppearanceObserverDelegate<T>, element: T) {
     this.delegate = delegate
     this.element = element
     this.intersectionObserver = new IntersectionObserver(this.intersect)
@@ -21,7 +28,7 @@ export class AppearanceObserver {
     }
   }
 
-  intersect = (entries) => {
+  intersect: IntersectionObserverCallback = (entries) => {
     const lastEntry = entries.slice(-1)[0]
     if (lastEntry?.isIntersecting) {
       this.delegate.elementAppearedInViewport(this.element)
diff --git a/src/observers/cache_observer.js b/src/observers/cache_observer.ts
similarity index 77%
rename from src/observers/cache_observer.js
rename to src/observers/cache_observer.ts
index 0eabf5680..73d7707f7 100644
--- a/src/observers/cache_observer.js
+++ b/src/observers/cache_observer.ts
@@ -1,6 +1,8 @@
+import { TurboBeforeCacheEvent } from "../core/session"
+
 export class CacheObserver {
-  selector = "[data-turbo-temporary]"
-  deprecatedSelector = "[data-turbo-cache=false]"
+  readonly selector: string = "[data-turbo-temporary]"
+  readonly deprecatedSelector: string = "[data-turbo-cache=false]"
 
   started = false
 
@@ -18,11 +20,11 @@ export class CacheObserver {
     }
   }
 
-  removeTemporaryElements = (_event) => {
+  removeTemporaryElements = <EventListener>((_event: TurboBeforeCacheEvent) => {
     for (const element of this.temporaryElements) {
       element.remove()
     }
-  }
+  })
 
   get temporaryElements() {
     return [...document.querySelectorAll(this.selector), ...this.temporaryElementsWithDeprecation]
diff --git a/src/observers/form_link_click_observer.js b/src/observers/form_link_click_observer.ts
similarity index 70%
rename from src/observers/form_link_click_observer.js
rename to src/observers/form_link_click_observer.ts
index bb2e68017..8ea08597e 100644
--- a/src/observers/form_link_click_observer.js
+++ b/src/observers/form_link_click_observer.ts
@@ -1,8 +1,16 @@
-import { LinkClickObserver } from "./link_click_observer"
+import { LinkClickObserver, LinkClickObserverDelegate } from "./link_click_observer"
 import { getVisitAction } from "../util"
 
-export class FormLinkClickObserver {
-  constructor(delegate, element) {
+export type FormLinkClickObserverDelegate = {
+  willSubmitFormLinkToLocation(link: Element, location: URL, event: MouseEvent): boolean
+  submittedFormLinkToLocation(link: Element, location: URL, form: HTMLFormElement): void
+}
+
+export class FormLinkClickObserver implements LinkClickObserverDelegate {
+  readonly linkInterceptor: LinkClickObserver
+  readonly delegate: FormLinkClickObserverDelegate
+
+  constructor(delegate: FormLinkClickObserverDelegate, element: HTMLElement) {
     this.delegate = delegate
     this.linkInterceptor = new LinkClickObserver(this, element)
   }
@@ -15,16 +23,14 @@ export class FormLinkClickObserver {
     this.linkInterceptor.stop()
   }
 
-  // Link click observer delegate
-
-  willFollowLinkToLocation(link, location, originalEvent) {
+  willFollowLinkToLocation(link: Element, location: URL, originalEvent: MouseEvent): boolean {
     return (
       this.delegate.willSubmitFormLinkToLocation(link, location, originalEvent) &&
       link.hasAttribute("data-turbo-method")
     )
   }
 
-  followedLinkToLocation(link, location) {
+  followedLinkToLocation(link: Element, location: URL): void {
     const form = document.createElement("form")
 
     const type = "hidden"
diff --git a/src/observers/form_submit_observer.js b/src/observers/form_submit_observer.ts
similarity index 71%
rename from src/observers/form_submit_observer.js
rename to src/observers/form_submit_observer.ts
index 1158d59b9..3700d0726 100644
--- a/src/observers/form_submit_observer.js
+++ b/src/observers/form_submit_observer.ts
@@ -1,7 +1,14 @@
+export interface FormSubmitObserverDelegate {
+  willSubmitForm(form: HTMLFormElement, submitter?: HTMLElement): boolean
+  formSubmitted(form: HTMLFormElement, submitter?: HTMLElement): void
+}
+
 export class FormSubmitObserver {
+  readonly delegate: FormSubmitObserverDelegate
+  readonly eventTarget: EventTarget
   started = false
 
-  constructor(delegate, eventTarget) {
+  constructor(delegate: FormSubmitObserverDelegate, eventTarget: EventTarget) {
     this.delegate = delegate
     this.eventTarget = eventTarget
   }
@@ -25,7 +32,7 @@ export class FormSubmitObserver {
     this.eventTarget.addEventListener("submit", this.submitBubbled, false)
   }
 
-  submitBubbled = (event) => {
+  submitBubbled = <EventListener>((event: SubmitEvent) => {
     if (!event.defaultPrevented) {
       const form = event.target instanceof HTMLFormElement ? event.target : undefined
       const submitter = event.submitter || undefined
@@ -41,16 +48,16 @@ export class FormSubmitObserver {
         this.delegate.formSubmitted(form, submitter)
       }
     }
-  }
+  })
 }
 
-function submissionDoesNotDismissDialog(form, submitter) {
+function submissionDoesNotDismissDialog(form: HTMLFormElement, submitter?: HTMLElement): boolean {
   const method = submitter?.getAttribute("formmethod") || form.getAttribute("method")
 
   return method != "dialog"
 }
 
-function submissionDoesNotTargetIFrame(form, submitter) {
+function submissionDoesNotTargetIFrame(form: HTMLFormElement, submitter?: HTMLElement): boolean {
   if (submitter?.hasAttribute("formtarget") || form.hasAttribute("target")) {
     const target = submitter?.getAttribute("formtarget") || form.target
 
diff --git a/src/observers/link_click_observer.js b/src/observers/link_click_observer.ts
similarity index 67%
rename from src/observers/link_click_observer.js
rename to src/observers/link_click_observer.ts
index e6bd2fcaf..b5d7c442f 100644
--- a/src/observers/link_click_observer.js
+++ b/src/observers/link_click_observer.ts
@@ -1,10 +1,17 @@
 import { expandURL } from "../core/url"
 import { findClosestRecursively } from "../util"
 
+export interface LinkClickObserverDelegate {
+  willFollowLinkToLocation(link: Element, location: URL, event: MouseEvent): boolean
+  followedLinkToLocation(link: Element, location: URL): void
+}
+
 export class LinkClickObserver {
+  readonly delegate: LinkClickObserverDelegate
+  readonly eventTarget: EventTarget
   started = false
 
-  constructor(delegate, eventTarget) {
+  constructor(delegate: LinkClickObserverDelegate, eventTarget: EventTarget) {
     this.delegate = delegate
     this.eventTarget = eventTarget
   }
@@ -28,7 +35,7 @@ export class LinkClickObserver {
     this.eventTarget.addEventListener("click", this.clickBubbled, false)
   }
 
-  clickBubbled = (event) => {
+  clickBubbled = (event: Event) => {
     if (event instanceof MouseEvent && this.clickEventIsSignificant(event)) {
       const target = (event.composedPath && event.composedPath()[0]) || event.target
       const link = this.findLinkFromClickTarget(target)
@@ -42,9 +49,9 @@ export class LinkClickObserver {
     }
   }
 
-  clickEventIsSignificant(event) {
+  clickEventIsSignificant(event: MouseEvent) {
     return !(
-      (event.target && event.target.isContentEditable) ||
+      (event.target && (event.target as any).isContentEditable) ||
       event.defaultPrevented ||
       event.which > 1 ||
       event.altKey ||
@@ -54,16 +61,16 @@ export class LinkClickObserver {
     )
   }
 
-  findLinkFromClickTarget(target) {
-    return findClosestRecursively(target, "a[href]:not([target^=_]):not([download])")
+  findLinkFromClickTarget(target: EventTarget | null): HTMLAnchorElement | undefined {
+    return findClosestRecursively<HTMLAnchorElement>(target as Element, "a[href]:not([target^=_]):not([download])")
   }
 
-  getLocationForLink(link) {
+  getLocationForLink(link: Element): URL {
     return expandURL(link.getAttribute("href") || "")
   }
 }
 
-function doesNotTargetIFrame(anchor) {
+function doesNotTargetIFrame(anchor: HTMLAnchorElement): boolean {
   if (anchor.hasAttribute("target")) {
     for (const element of document.getElementsByName(anchor.target)) {
       if (element instanceof HTMLIFrameElement) return false
diff --git a/src/observers/page_observer.js b/src/observers/page_observer.ts
similarity index 82%
rename from src/observers/page_observer.js
rename to src/observers/page_observer.ts
index 934d45c45..50032ffd9 100644
--- a/src/observers/page_observer.js
+++ b/src/observers/page_observer.ts
@@ -1,15 +1,22 @@
-export const PageStage = {
-  initial: 0,
-  loading: 1,
-  interactive: 2,
-  complete: 3
+export interface PageObserverDelegate {
+  pageBecameInteractive(): void
+  pageLoaded(): void
+  pageWillUnload(): void
+}
+
+export enum PageStage {
+  initial,
+  loading,
+  interactive,
+  complete,
 }
 
 export class PageObserver {
+  readonly delegate: PageObserverDelegate
   stage = PageStage.initial
   started = false
 
-  constructor(delegate) {
+  constructor(delegate: PageObserverDelegate) {
     this.delegate = delegate
   }
 
diff --git a/src/observers/scroll_observer.js b/src/observers/scroll_observer.ts
similarity index 66%
rename from src/observers/scroll_observer.js
rename to src/observers/scroll_observer.ts
index 60ae85b56..c754baf47 100644
--- a/src/observers/scroll_observer.js
+++ b/src/observers/scroll_observer.ts
@@ -1,7 +1,14 @@
+import { Position } from "../core/types"
+
+export interface ScrollObserverDelegate {
+  scrollPositionChanged(position: Position): void
+}
+
 export class ScrollObserver {
+  readonly delegate: ScrollObserverDelegate
   started = false
 
-  constructor(delegate) {
+  constructor(delegate: ScrollObserverDelegate) {
     this.delegate = delegate
   }
 
@@ -26,7 +33,7 @@ export class ScrollObserver {
 
   // Private
 
-  updatePosition(position) {
+  updatePosition(position: Position) {
     this.delegate.scrollPositionChanged(position)
   }
 }
diff --git a/src/observers/stream_observer.js b/src/observers/stream_observer.ts
similarity index 57%
rename from src/observers/stream_observer.js
rename to src/observers/stream_observer.ts
index ae071658a..2b7f38056 100644
--- a/src/observers/stream_observer.js
+++ b/src/observers/stream_observer.ts
@@ -1,80 +1,87 @@
+import { TurboBeforeFetchResponseEvent } from "../http/fetch_request"
 import { FetchResponse } from "../http/fetch_response"
 import { StreamMessage } from "../core/streams/stream_message"
+import { StreamSource } from "../core/types"
+
+export interface StreamObserverDelegate {
+  receivedMessageFromStream(message: StreamMessage): void
+}
 
 export class StreamObserver {
-  sources = new Set()
-  #started = false
+  readonly delegate: StreamObserverDelegate
+  readonly sources: Set<StreamSource> = new Set()
+  private started = false
 
-  constructor(delegate) {
+  constructor(delegate: StreamObserverDelegate) {
     this.delegate = delegate
   }
 
   start() {
-    if (!this.#started) {
-      this.#started = true
+    if (!this.started) {
+      this.started = true
       addEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false)
     }
   }
 
   stop() {
-    if (this.#started) {
-      this.#started = false
+    if (this.started) {
+      this.started = false
       removeEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false)
     }
   }
 
-  connectStreamSource(source) {
+  connectStreamSource(source: StreamSource) {
     if (!this.streamSourceIsConnected(source)) {
       this.sources.add(source)
       source.addEventListener("message", this.receiveMessageEvent, false)
     }
   }
 
-  disconnectStreamSource(source) {
+  disconnectStreamSource(source: StreamSource) {
     if (this.streamSourceIsConnected(source)) {
       this.sources.delete(source)
       source.removeEventListener("message", this.receiveMessageEvent, false)
     }
   }
 
-  streamSourceIsConnected(source) {
+  streamSourceIsConnected(source: StreamSource) {
     return this.sources.has(source)
   }
 
-  inspectFetchResponse = (event) => {
+  inspectFetchResponse = <EventListener>((event: TurboBeforeFetchResponseEvent) => {
     const response = fetchResponseFromEvent(event)
     if (response && fetchResponseIsStream(response)) {
       event.preventDefault()
       this.receiveMessageResponse(response)
     }
-  }
+  })
 
-  receiveMessageEvent = (event) => {
-    if (this.#started && typeof event.data == "string") {
+  receiveMessageEvent = (event: MessageEvent) => {
+    if (this.started && typeof event.data == "string") {
       this.receiveMessageHTML(event.data)
     }
   }
 
-  async receiveMessageResponse(response) {
+  async receiveMessageResponse(response: FetchResponse) {
     const html = await response.responseHTML
     if (html) {
       this.receiveMessageHTML(html)
     }
   }
 
-  receiveMessageHTML(html) {
+  receiveMessageHTML(html: string) {
     this.delegate.receivedMessageFromStream(StreamMessage.wrap(html))
   }
 }
 
-function fetchResponseFromEvent(event) {
+function fetchResponseFromEvent(event: TurboBeforeFetchResponseEvent) {
   const fetchResponse = event.detail?.fetchResponse
   if (fetchResponse instanceof FetchResponse) {
     return fetchResponse
   }
 }
 
-function fetchResponseIsStream(response) {
+function fetchResponseIsStream(response: FetchResponse) {
   const contentType = response.contentType ?? ""
   return contentType.startsWith(StreamMessage.contentType)
 }
diff --git a/src/polyfills/custom-elements-native-shim.ts b/src/polyfills/custom-elements-native-shim.ts
new file mode 100644
index 000000000..8bde413c3
--- /dev/null
+++ b/src/polyfills/custom-elements-native-shim.ts
@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt The complete set of authors may be found
+ * at http://polymer.github.io/AUTHORS.txt The complete set of contributors may
+ * be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by
+ * Google as part of the polymer project is also subject to an additional IP
+ * rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+/**
+ * This shim allows elements written in, or compiled to, ES5 to work on native
+ * implementations of Custom Elements v1. It sets new.target to the value of
+ * this.constructor so that the native HTMLElement constructor can access the
+ * current under-construction element's definition.
+ */
+;(function () {
+  if (
+    // No Reflect, no classes, no need for shim because native custom elements
+    // require ES2015 classes or Reflect.
+    window.Reflect === undefined ||
+    window.customElements === undefined ||
+    // The webcomponentsjs custom elements polyfill doesn't require
+    // ES2015-compatible construction (`super()` or `Reflect.construct`).
+    (window.customElements as any).polyfillWrapFlushCallback
+  ) {
+    return
+  }
+  const BuiltInHTMLElement = HTMLElement
+
+  /**
+   * With jscompiler's RECOMMENDED_FLAGS the function name will be optimized away.
+   * However, if we declare the function as a property on an object literal, and
+   * use quotes for the property name, then closure will leave that much intact,
+   * which is enough for the JS VM to correctly set Function.prototype.name.
+   */
+  const wrapperForTheName = {
+    HTMLElement: function HTMLElement(this: HTMLElement) {
+      return Reflect.construct(BuiltInHTMLElement, [], this.constructor)
+    },
+  }
+  window.HTMLElement = wrapperForTheName["HTMLElement"] as unknown as typeof HTMLElement
+  HTMLElement.prototype = BuiltInHTMLElement.prototype
+  HTMLElement.prototype.constructor = HTMLElement
+  Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement)
+})()
+
+// Required with --isolatedModules
+export {}
diff --git a/src/polyfills/form-request-submit-polyfill.js b/src/polyfills/form-request-submit-polyfill.js
index 9b7039afe..e5bc6a331 100644
--- a/src/polyfills/form-request-submit-polyfill.js
+++ b/src/polyfills/form-request-submit-polyfill.js
@@ -1,18 +1,18 @@
 /**
  * The MIT License (MIT)
- *
+ * 
  * Copyright (c) 2019 Javan Makhmali
- *
+ * 
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
  * in the Software without restriction, including without limitation the rights
  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  * copies of the Software, and to permit persons to whom the Software is
  * furnished to do so, subject to the following conditions:
- *
+ * 
  * The above copyright notice and this permission notice shall be included in
  * all copies or substantial portions of the Software.
- *
+ * 
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -22,10 +22,10 @@
  * THE SOFTWARE.
  */
 
-(function (prototype) {
+(function(prototype) {
   if (typeof prototype.requestSubmit == "function") return
 
-  prototype.requestSubmit = function (submitter) {
+  prototype.requestSubmit = function(submitter) {
     if (submitter) {
       validateSubmitter(submitter, this)
       submitter.click()
@@ -42,11 +42,10 @@
   function validateSubmitter(submitter, form) {
     submitter instanceof HTMLElement || raise(TypeError, "parameter 1 is not of type 'HTMLElement'")
     submitter.type == "submit" || raise(TypeError, "The specified element is not a submit button")
-    submitter.form == form ||
-      raise(DOMException, "The specified element is not owned by this form element", "NotFoundError")
+    submitter.form == form || raise(DOMException, "The specified element is not owned by this form element", "NotFoundError")
   }
 
   function raise(errorConstructor, message, name) {
     throw new errorConstructor("Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".", name)
   }
-})(HTMLFormElement.prototype)
+})(HTMLFormElement.prototype);
diff --git a/src/polyfills/index.js b/src/polyfills/index.ts
similarity index 62%
rename from src/polyfills/index.js
rename to src/polyfills/index.ts
index 6b51e7f9d..f0b92f00e 100644
--- a/src/polyfills/index.js
+++ b/src/polyfills/index.ts
@@ -1,2 +1,3 @@
+import "./custom-elements-native-shim"
 import "./form-request-submit-polyfill"
 import "./submit-event"
diff --git a/src/polyfills/submit-event.js b/src/polyfills/submit-event.ts
similarity index 73%
rename from src/polyfills/submit-event.js
rename to src/polyfills/submit-event.ts
index f81ef7d8d..2f246163d 100644
--- a/src/polyfills/submit-event.js
+++ b/src/polyfills/submit-event.ts
@@ -1,12 +1,14 @@
-const submittersByForm = new WeakMap()
+type FormSubmitter = HTMLElement & { form?: HTMLFormElement; type?: string }
 
-function findSubmitterFromClickTarget(target) {
+const submittersByForm: WeakMap<HTMLFormElement, HTMLElement> = new WeakMap()
+
+function findSubmitterFromClickTarget(target: EventTarget | null): FormSubmitter | null {
   const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null
-  const candidate = element ? element.closest("input, button") : null
+  const candidate = element ? (element.closest("input, button") as FormSubmitter | null) : null
   return candidate?.type == "submit" ? candidate : null
 }
 
-function clickCaptured(event) {
+function clickCaptured(event: Event) {
   const submitter = findSubmitterFromClickTarget(event.target)
 
   if (submitter && submitter.form) {
@@ -14,7 +16,7 @@ function clickCaptured(event) {
   }
 }
 
-(function () {
+;(function () {
   if ("submitter" in Event.prototype) return
 
   let prototype = window.Event.prototype
@@ -34,11 +36,11 @@ function clickCaptured(event) {
   addEventListener("click", clickCaptured, true)
 
   Object.defineProperty(prototype, "submitter", {
-    get() {
+    get(): HTMLElement | undefined {
       if (this.type == "submit" && this.target instanceof HTMLFormElement) {
         return submittersByForm.get(this.target)
       }
-    }
+    },
   })
 })()
 
diff --git a/src/script_warning.js b/src/script_warning.ts
similarity index 93%
rename from src/script_warning.js
rename to src/script_warning.ts
index 6e45c8e25..f93763c74 100644
--- a/src/script_warning.js
+++ b/src/script_warning.ts
@@ -1,6 +1,6 @@
 import { unindent } from "./util"
 ;(() => {
-  let element = document.currentScript
+  let element: Element | null = document.currentScript
   if (!element) return
   if (element.hasAttribute("data-turbo-suppress-warning")) return
 
diff --git a/src/tests/fixtures/test.js b/src/tests/fixtures/test.js
index 9f71b536e..e409e4514 100644
--- a/src/tests/fixtures/test.js
+++ b/src/tests/fixtures/test.js
@@ -1,4 +1,4 @@
-(function (eventNames) {
+(function(eventNames) {
   function serializeToChannel(object, visited = new Set()) {
     const returned = {}
 
@@ -10,7 +10,7 @@
       } else if (value instanceof Element) {
         returned[key] = value.outerHTML
       } else if (typeof value == "object") {
-        if (visited.has(value)) {
+        if (visited.has(value))  {
           returned[key] = "skipped to prevent infinitely recursing"
         } else {
           visited.add(value)
@@ -27,44 +27,36 @@
 
   window.eventLogs = []
 
-  for (let i = 0; i < eventNames.length; i++) {
-    const eventName = eventNames[i]
+  for (var i = 0; i < eventNames.length; i++) {
+    var eventName = eventNames[i]
     addEventListener(eventName, eventListener, false)
   }
 
   function eventListener(event) {
     const skipped = document.documentElement.getAttribute("data-skip-event-details") || ""
 
-    window.eventLogs.push([
-      event.type,
-      serializeToChannel(skipped.includes(event.type) ? {} : event.detail),
-      event.target.id
-    ])
+    eventLogs.push([event.type, serializeToChannel(skipped.includes(event.type) ? {} : event.detail), event.target.id])
   }
   window.mutationLogs = []
 
-  new MutationObserver((mutations) => {
-    for (const { attributeName, target } of mutations.filter(({ type }) => type == "attributes")) {
-      if (target instanceof Element) {
-        window.mutationLogs.push([attributeName, target.id, target.getAttribute(attributeName)])
-      }
-    }
-  }).observe(document, { subtree: true, childList: true, attributes: true })
+   new MutationObserver((mutations) => {
+     for (const { attributeName, target } of mutations.filter(({ type }) => type == "attributes")) {
+       if (target instanceof Element) {
+         mutationLogs.push([attributeName, target.id, target.getAttribute(attributeName)])
+       }
+     }
+   }).observe(document, { subtree: true, childList: true, attributes: true })
 
   window.bodyMutationLogs = []
-  addEventListener(
-    "turbo:load",
-    () => {
-      new MutationObserver((mutations) => {
-        for (const { addedNodes } of mutations) {
-          for (const { localName, outerHTML } of addedNodes) {
-            if (localName == "body") window.bodyMutationLogs.push([outerHTML])
-          }
+  addEventListener("turbo:load", () => {
+    new MutationObserver((mutations) => {
+      for (const { addedNodes } of mutations) {
+        for (const { localName, outerHTML } of addedNodes) {
+          if (localName == "body") bodyMutationLogs.push([outerHTML])
         }
-      }).observe(document.documentElement, { childList: true })
-    },
-    { once: true }
-  )
+      }
+    }).observe(document.documentElement, { childList: true })
+  }, { once: true })
 })([
   "turbo:click",
   "turbo:before-stream-render",
@@ -86,50 +78,41 @@
   "turbo:reload"
 ])
 
-customElements.define(
-  "custom-link-element",
-  class extends HTMLElement {
-    constructor() {
-      super()
-      this.attachShadow({ mode: "open" })
-    }
-    connectedCallback() {
-      this.shadowRoot.innerHTML = `
-      <a href="${this.getAttribute("link")}">
-        ${this.getAttribute("text") || `<slot></slot>`}
+customElements.define('custom-link-element', class extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <a href="${this.getAttribute('link')}">
+        ${this.getAttribute('text') || `<slot></slot>`}
       </a>
     `
-    }
   }
-)
+})
 
-customElements.define(
-  "custom-button",
-  class extends HTMLElement {
-    constructor() {
-      super()
-      this.attachShadow({ mode: "open" }).innerHTML = `
+customElements.define('custom-button', class extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' }).innerHTML = `
       <span>
         Drive in Shadow DOM
       </span>
     `
-    }
   }
-)
+})
 
-customElements.define(
-  "turbo-toggle",
-  class extends HTMLElement {
-    constructor() {
-      super()
-      this.attachShadow({ mode: "open" })
-    }
-    connectedCallback() {
-      this.shadowRoot.innerHTML = `
-      <div data-turbo="${this.getAttribute("turbo") || "true"}">
+customElements.define('turbo-toggle', class extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <div data-turbo="${this.getAttribute('turbo') || 'true'}">
         <slot></slot>
       </div>
     `
-    }
   }
-)
+})
diff --git a/src/tests/functional/async_script_tests.js b/src/tests/functional/async_script_tests.ts
similarity index 100%
rename from src/tests/functional/async_script_tests.js
rename to src/tests/functional/async_script_tests.ts
diff --git a/src/tests/functional/autofocus_tests.js b/src/tests/functional/autofocus_tests.ts
similarity index 99%
rename from src/tests/functional/autofocus_tests.js
rename to src/tests/functional/autofocus_tests.ts
index 347405ed5..06fa68e46 100644
--- a/src/tests/functional/autofocus_tests.js
+++ b/src/tests/functional/autofocus_tests.ts
@@ -78,7 +78,7 @@ test("test autofocus visible [autofocus] element on visit with inert elements",
 })
 
 test("test navigating a frame with a link targeting the frame autofocuses [autofocus]:first-of-type", async ({
-  page
+  page,
 }) => {
   await page.click("#frame-outer-link")
   await nextBeat()
@@ -94,7 +94,7 @@ test("test navigating a frame with a link targeting the frame autofocuses [autof
 })
 
 test("test navigating a frame with a turbo-frame targeting the frame autofocuses [autofocus]:first-of-type", async ({
-  page
+  page,
 }) => {
   await page.click("#drives-frame-target-link")
   await nextBeat()
diff --git a/src/tests/functional/cache_observer_tests.js b/src/tests/functional/cache_observer_tests.ts
similarity index 100%
rename from src/tests/functional/cache_observer_tests.js
rename to src/tests/functional/cache_observer_tests.ts
diff --git a/src/tests/functional/drive_disabled_tests.js b/src/tests/functional/drive_disabled_tests.ts
similarity index 99%
rename from src/tests/functional/drive_disabled_tests.js
rename to src/tests/functional/drive_disabled_tests.ts
index 9e380f356..5054234ed 100644
--- a/src/tests/functional/drive_disabled_tests.js
+++ b/src/tests/functional/drive_disabled_tests.ts
@@ -7,7 +7,7 @@ import {
   pathname,
   searchParams,
   setLocalStorageFromEvent,
-  visitAction
+  visitAction,
 } from "../helpers/page"
 
 const path = "/src/tests/fixtures/drive_disabled.html"
diff --git a/src/tests/functional/drive_tests.js b/src/tests/functional/drive_tests.ts
similarity index 100%
rename from src/tests/functional/drive_tests.js
rename to src/tests/functional/drive_tests.ts
diff --git a/src/tests/functional/drive_view_transition_tests.js b/src/tests/functional/drive_view_transition_tests.ts
similarity index 100%
rename from src/tests/functional/drive_view_transition_tests.js
rename to src/tests/functional/drive_view_transition_tests.ts
diff --git a/src/tests/functional/form_mode_tests.js b/src/tests/functional/form_mode_tests.ts
similarity index 93%
rename from src/tests/functional/form_mode_tests.js
rename to src/tests/functional/form_mode_tests.ts
index a40ad274f..7146b6818 100644
--- a/src/tests/functional/form_mode_tests.js
+++ b/src/tests/functional/form_mode_tests.ts
@@ -1,4 +1,4 @@
-import { test } from "@playwright/test"
+import { Page, test } from "@playwright/test"
 import { getFromLocalStorage, setLocalStorageFromEvent } from "../helpers/page"
 import { assert } from "chai"
 
@@ -65,11 +65,11 @@ test("test form submission with form mode optin and form enabled from submitter
   assert.ok(await formSubmitStarted(page))
 })
 
-async function gotoPageWithFormMode(page, formMode) {
+async function gotoPageWithFormMode(page: Page, formMode: "on" | "off" | "optin") {
   await page.goto(`/src/tests/fixtures/form_mode.html?formMode=${formMode}`)
   await setLocalStorageFromEvent(page, "turbo:submit-start", "formSubmitStarted", "true")
 }
 
-function formSubmitStarted(page) {
+function formSubmitStarted(page: Page) {
   return getFromLocalStorage(page, "formSubmitStarted")
 }
diff --git a/src/tests/functional/form_submission_tests.js b/src/tests/functional/form_submission_tests.ts
similarity index 99%
rename from src/tests/functional/form_submission_tests.js
rename to src/tests/functional/form_submission_tests.ts
index 6e37cea01..242f10e3e 100644
--- a/src/tests/functional/form_submission_tests.js
+++ b/src/tests/functional/form_submission_tests.ts
@@ -1,4 +1,4 @@
-import { test } from "@playwright/test"
+import { Page, test } from "@playwright/test"
 import { assert } from "chai"
 import {
   getFromLocalStorage,
@@ -20,7 +20,7 @@ import {
   setLocalStorageFromEvent,
   visitAction,
   waitUntilSelector,
-  waitUntilNoSelector
+  waitUntilNoSelector,
 } from "../helpers/page"
 
 test.beforeEach(async ({ page }) => {
@@ -231,7 +231,7 @@ test("test standard GET form submission", async ({ page }) => {
 
 test("test standard GET HTMLFormElement.requestSubmit() with Turbo Action", async ({ page }) => {
   await page.evaluate(() => {
-    const formControl = document.querySelector("#external-select")
+    const formControl = document.querySelector<HTMLSelectElement>("#external-select")
 
     if (formControl && formControl.form) formControl.form.requestSubmit()
   })
@@ -291,7 +291,7 @@ test("test standard GET form submission events", async ({ page }) => {
 })
 
 test("test standard GET form submission does not incorporate the current page's URLSearchParams values into the submission", async ({
-  page
+  page,
 }) => {
   await page.click("#form-action-self-sort")
   await nextBody(page)
@@ -321,7 +321,7 @@ test("test standard GET form submission does not merge values into the [action]
 })
 
 test("test standard GET form submission omits the [action] value's URLSearchParams from the submission", async ({
-  page
+  page,
 }) => {
   await page.click("#form-action-self-submit")
   await nextBody(page)
@@ -1033,7 +1033,7 @@ test("test link method form submission outside frame", async ({ page }) => {
 })
 
 test("test following a link with [data-turbo-method] set and a target set navigates the target frame", async ({
-  page
+  page,
 }) => {
   await page.click("#turbo-method-post-to-targeted-frame")
 
@@ -1041,7 +1041,7 @@ test("test following a link with [data-turbo-method] set and a target set naviga
 })
 
 test("test following a link with [data-turbo-method] and [data-turbo=true] set when html[data-turbo=false]", async ({
-  page
+  page,
 }) => {
   const html = await page.locator("html")
   await html.evaluate((html) => html.setAttribute("data-turbo", "false"))
@@ -1056,7 +1056,7 @@ test("test following a link with [data-turbo-method] and [data-turbo=true] set w
 })
 
 test("test following a link with [data-turbo-method] and [data-turbo=true] set when Turbo.session.drive = false", async ({
-  page
+  page,
 }) => {
   await page.evaluate(() => (window.Turbo.session.drive = false))
 
@@ -1075,14 +1075,14 @@ test("test following a link with [data-turbo-method] set when html[data-turbo=fa
 
   await page.click("#turbo-method-post-to-targeted-frame")
 
-  assert.equal(await page.textContent("h1"), "Hello", "treats link full-page navigation")
+  assert.equal(await page.textContent("h1"), "Hello", "treats link as a full-page navigation")
 })
 
 test("test following a link with [data-turbo-method] set when Turbo.session.drive = false", async ({ page }) => {
   await page.evaluate(() => (window.Turbo.session.drive = false))
   await page.click("#turbo-method-post-to-targeted-frame")
 
-  assert.equal(await page.textContent("h1"), "Hello", "treats link full-page navigation")
+  assert.equal(await page.textContent("h1"), "Hello", "treats link as a full-page navigation")
 })
 
 test("test stream link method form submission outside frame", async ({ page }) => {
@@ -1164,10 +1164,10 @@ test("test form submission skipped with submitter button[formtarget]", async ({
   assert.notOk(await formSubmitEnded(page))
 })
 
-function formSubmitStarted(page) {
+function formSubmitStarted(page: Page) {
   return getFromLocalStorage(page, "formSubmitStarted")
 }
 
-function formSubmitEnded(page) {
+function formSubmitEnded(page: Page) {
   return getFromLocalStorage(page, "formSubmitEnded")
 }
diff --git a/src/tests/functional/frame_navigation_tests.js b/src/tests/functional/frame_navigation_tests.ts
similarity index 100%
rename from src/tests/functional/frame_navigation_tests.js
rename to src/tests/functional/frame_navigation_tests.ts
diff --git a/src/tests/functional/frame_tests.js b/src/tests/functional/frame_tests.ts
similarity index 95%
rename from src/tests/functional/frame_tests.js
rename to src/tests/functional/frame_tests.ts
index ba66c8cc9..7d5fe2c85 100644
--- a/src/tests/functional/frame_tests.js
+++ b/src/tests/functional/frame_tests.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test"
+import { Page, test, expect } from "@playwright/test"
 import { assert, Assertion } from "chai"
 import {
   attributeForSelector,
@@ -16,10 +16,18 @@ import {
   readEventLogs,
   scrollPosition,
   scrollToSelector,
-  searchParams
+  searchParams,
 } from "../helpers/page"
 
-assert.equalIgnoringWhitespace = function (actual, expected, message) {
+declare global {
+  namespace Chai {
+    interface AssertStatic {
+      equalIgnoringWhitespace(actual: string | null | undefined, expected: string, message?: string): void
+    }
+  }
+}
+
+assert.equalIgnoringWhitespace = function (actual: string | null | undefined, expected: string, message?: string) {
   new Assertion(actual?.trim()).to.equal(expected.trim(), message)
 }
 
@@ -110,7 +118,7 @@ test("test following a link driving a frame toggles the [aria-busy=true] attribu
 })
 
 test("test following an a[data-turbo-frame=_top] does not toggle the frame's [aria-busy=true] attribute", async ({
-  page
+  page,
 }) => {
   await page.click("#frame #link-top")
 
@@ -122,7 +130,7 @@ test("test following an a[data-turbo-frame=_top] does not toggle the frame's [ar
 })
 
 test("test submitting a form[data-turbo-frame=_top] does not toggle the frame's [aria-busy=true] attribute", async ({
-  page
+  page,
 }) => {
   await page.click("#frame #form-submit-top")
 
@@ -134,7 +142,7 @@ test("test submitting a form[data-turbo-frame=_top] does not toggle the frame's
 })
 
 test("successfully following a link to a page without a matching frame dispatches a turbo:frame-missing event", async ({
-  page
+  page,
 }) => {
   await page.click("#missing-frame-link")
   const { response } = await nextEventOnTarget(page, "missing", "turbo:frame-missing")
@@ -143,9 +151,9 @@ test("successfully following a link to a page without a matching frame dispatche
 })
 
 test("successfully following a link to a page without a matching frame shows an error and throws an exception", async ({
-  page
+  page,
 }) => {
-  let error = undefined
+  let error: Error | undefined = undefined
   page.once("pageerror", (e) => (error = e))
 
   await page.click("#missing-frame-link")
@@ -153,11 +161,11 @@ test("successfully following a link to a page without a matching frame shows an
   assert.match(await page.innerText("#missing"), /Content missing/)
 
   assert.exists(error)
-  assert.include(error.message, `The response (200) did not contain the expected <turbo-frame id="missing">`)
+  assert.include(error!.message, `The response (200) did not contain the expected <turbo-frame id="missing">`)
 })
 
 test("successfully following a link to a page with `turbo-visit-control` `reload` performs a full page reload", async ({
-  page
+  page,
 }) => {
   await page.click("#unvisitable-page-link")
   await page.getByText("Unvisitable page loaded").waitFor()
@@ -166,7 +174,7 @@ test("successfully following a link to a page with `turbo-visit-control` `reload
 })
 
 test("failing to follow a link to a page without a matching frame dispatches a turbo:frame-missing event", async ({
-  page
+  page,
 }) => {
   await page.click("#missing-page-link")
   const { response } = await nextEventOnTarget(page, "missing", "turbo:frame-missing")
@@ -175,9 +183,9 @@ test("failing to follow a link to a page without a matching frame dispatches a t
 })
 
 test("failing to follow a link to a page without a matching frame shows an error and throws an exception", async ({
-  page
+  page,
 }) => {
-  let error = undefined
+  let error: Error | undefined = undefined
   page.once("pageerror", (e) => (error = e))
 
   await page.click("#missing-page-link")
@@ -185,21 +193,21 @@ test("failing to follow a link to a page without a matching frame shows an error
   assert.match(await page.innerText("#missing"), /Content missing/)
 
   assert.exists(error)
-  assert.include(error.message, `The response (404) did not contain the expected <turbo-frame id="missing">`)
+  assert.include(error!.message, `The response (404) did not contain the expected <turbo-frame id="missing">`)
 })
 
 test("test the turbo:frame-missing event following a link to a page without a matching frame can be handled", async ({
-  page
+  page,
 }) => {
   await page.locator("#missing").evaluate((frame) => {
     frame.addEventListener(
       "turbo:frame-missing",
-      (event) => {
+      ((event) => {
         if (event.target instanceof Element) {
           event.preventDefault()
           event.target.textContent = "Overridden"
         }
-      },
+      }) as EventListener,
       { once: true }
     )
   })
@@ -210,17 +218,17 @@ test("test the turbo:frame-missing event following a link to a page without a ma
 })
 
 test("test the turbo:frame-missing event following a link to a page without a matching frame can drive a Visit", async ({
-  page
+  page,
 }) => {
   await page.locator("#missing").evaluate((frame) => {
     frame.addEventListener(
       "turbo:frame-missing",
-      (event) => {
+      ((event: CustomEvent) => {
         event.preventDefault()
         const { response, visit } = event.detail
 
         visit(response)
-      },
+      }) as EventListener,
       { once: true }
     )
   })
@@ -239,7 +247,7 @@ test("test the turbo:frame-missing event following a link to a page without a ma
 })
 
 test("test following a link to a page with a matching frame does not dispatch a turbo:frame-missing event", async ({
-  page
+  page,
 }) => {
   await page.click("#link-frame")
 
@@ -272,7 +280,7 @@ test("test following a link in rapid succession cancels the previous request", a
 })
 
 test("test following a link within a descendant frame whose ancestor declares a target set navigates the descendant frame", async ({
-  page
+  page,
 }) => {
   const selector = "#nested-root[target=frame] #nested-child a:not([data-turbo-frame])"
   const link = await page.locator(selector)
@@ -293,7 +301,7 @@ test("test following a link within a descendant frame whose ancestor declares a
 })
 
 test("test following a link that declares data-turbo-frame within a frame whose ancestor respects the override", async ({
-  page
+  page,
 }) => {
   await page.click("#nested-root[target=frame] #nested-child a[data-turbo-frame]")
   await nextBeat()
@@ -341,7 +349,7 @@ test("test following a link within a frame with target=_top navigates the page",
 })
 
 test("test following a link that declares data-turbo-frame='_self' within a frame with target=_top navigates the frame itself", async ({
-  page
+  page,
 }) => {
   assert.equal(await attributeForSelector(page, "#navigate-top", "src"), null)
 
@@ -356,7 +364,7 @@ test("test following a link that declares data-turbo-frame='_self' within a fram
 })
 
 test("test following a link to a page with a <turbo-frame recurse> which lazily loads a matching frame", async ({
-  page
+  page,
 }) => {
   await page.click("#recursive summary")
 
@@ -370,7 +378,7 @@ test("test following a link to a page with a <turbo-frame recurse> which lazily
 })
 
 test("test submitting a form that redirects to a page with a <turbo-frame recurse> which lazily loads a matching frame", async ({
-  page
+  page,
 }) => {
   await page.click("#recursive summary")
 
@@ -505,7 +513,7 @@ test("test navigating a frame targeting _top from an outer link fires events", a
 test("test invoking .reload() re-fetches the frame's content", async ({ page }) => {
   await page.click("#link-frame")
   await nextEventOnTarget(page, "frame", "turbo:frame-load")
-  await page.evaluate(() => document.getElementById("frame").reload())
+  await page.evaluate(() => (document.getElementById("frame") as any).reload())
 
   const dispatchedEvents = await readEventLogs(page)
 
@@ -516,7 +524,7 @@ test("test invoking .reload() re-fetches the frame's content", async ({ page })
       ["frame", "turbo:before-fetch-response"],
       ["frame", "turbo:before-frame-render"],
       ["frame", "turbo:frame-render"],
-      ["frame", "turbo:frame-load"]
+      ["frame", "turbo:frame-load"],
     ]
   )
 })
@@ -608,7 +616,7 @@ test("test navigating pushing URL state from a frame navigation fires events", a
 })
 
 test("test navigating a frame with a form[method=get] that does not redirect still updates the [src]", async ({
-  page
+  page,
 }) => {
   await page.click("#frame-form-get-no-redirect")
   await nextEventNamed(page, "turbo:before-fetch-request")
@@ -640,7 +648,7 @@ test("test navigating turbo-frame[data-turbo-action=advance] from within pushes
 })
 
 test("test navigating turbo-frame[data-turbo-action=advance] to the same URL clears the [aria-busy] and [data-turbo-preview] state", async ({
-  page
+  page,
 }) => {
   await page.click("#link-outside-frame-action-advance")
   await nextEventNamed(page, "turbo:load")
@@ -737,7 +745,7 @@ test("test navigating frame with form[method=get][data-turbo-action=advance] pus
 })
 
 test("test navigating frame with form[method=get][data-turbo-action=advance] to the same URL clears the [aria-busy] and [data-turbo-preview] state", async ({
-  page
+  page,
 }) => {
   await page.click("#form-get-frame-action-advance button")
   await nextEventNamed(page, "turbo:load")
@@ -767,7 +775,7 @@ test("test navigating frame with form[method=post][data-turbo-action=advance] pu
 })
 
 test("test navigating frame with form[method=post][data-turbo-action=advance] to the same URL clears the [aria-busy] and [data-turbo-preview] state", async ({
-  page
+  page,
 }) => {
   await page.click("#form-post-frame-action-advance button")
   await nextEventNamed(page, "turbo:load")
@@ -798,7 +806,7 @@ test("test navigating frame with button[data-turbo-action=advance] pushes URL st
 })
 
 test("test navigating back after pushing URL state from a turbo-frame[data-turbo-action=advance] restores the frames previous contents", async ({
-  page
+  page,
 }) => {
   await page.click("#add-turbo-action-to-frame")
   await page.click("#link-frame")
@@ -817,7 +825,7 @@ test("test navigating back after pushing URL state from a turbo-frame[data-turbo
 })
 
 test("test navigating back then forward after pushing URL state from a turbo-frame[data-turbo-action=advance] restores the frames next contents", async ({
-  page
+  page,
 }) => {
   await page.click("#add-turbo-action-to-frame")
   await page.click("#link-frame")
@@ -849,7 +857,7 @@ test("test turbo:before-fetch-response fires on the frame element", async ({ pag
 })
 
 test("test navigating a eager frame with a link[method=get] that does not fetch eager frame twice", async ({
-  page
+  page,
 }) => {
   await page.click("#link-to-eager-loaded-frame")
 
@@ -871,7 +879,7 @@ test("test navigating a eager frame with a link[method=get] that does not fetch
 
 test("form submissions from frames clear snapshot cache", async ({ page }) => {
   await page.evaluate(() => {
-    document.querySelector("h1").textContent = "Changed"
+    document.querySelector("h1")!.textContent = "Changed"
   })
 
   await expect(page.locator("h1")).toHaveText("Changed")
@@ -885,23 +893,31 @@ test("form submissions from frames clear snapshot cache", async ({ page }) => {
   await expect(page.locator("h1")).not.toHaveText("Changed")
 })
 
-async function withoutChangingEventListenersCount(page, callback) {
+async function withoutChangingEventListenersCount(page: Page, callback: () => Promise<void>) {
   const name = "eventListenersAttachedToDocument"
   const setup = () => {
     return page.evaluate((name) => {
-      const context = window
+      const context = window as any
       context[name] = 0
       context.originals = {
         addEventListener: document.addEventListener,
-        removeEventListener: document.removeEventListener
+        removeEventListener: document.removeEventListener,
       }
 
-      document.addEventListener = (type, listener, options) => {
+      document.addEventListener = (
+        type: string,
+        listener: EventListenerOrEventListenerObject,
+        options?: boolean | AddEventListenerOptions
+      ) => {
         context.originals.addEventListener.call(document, type, listener, options)
         context[name] += 1
       }
 
-      document.removeEventListener = (type, listener, options) => {
+      document.removeEventListener = (
+        type: string,
+        listener: EventListenerOrEventListenerObject,
+        options?: boolean | AddEventListenerOptions
+      ) => {
         context.originals.removeEventListener.call(document, type, listener, options)
         context[name] -= 1
       }
@@ -912,7 +928,7 @@ async function withoutChangingEventListenersCount(page, callback) {
 
   const teardown = () => {
     return page.evaluate((name) => {
-      const context = window
+      const context = window as any
       const { addEventListener, removeEventListener } = context.originals
 
       document.addEventListener = addEventListener
@@ -922,7 +938,6 @@ async function withoutChangingEventListenersCount(page, callback) {
     }, name)
   }
 
-  await nextBeat()
   const originalCount = await setup()
   await callback()
   const finalCount = await teardown()
@@ -930,6 +945,12 @@ async function withoutChangingEventListenersCount(page, callback) {
   assert.equal(finalCount, originalCount, "expected callback not to leak event listeners")
 }
 
-function frameScriptEvaluationCount(page) {
+function frameScriptEvaluationCount(page: Page): Promise<number | undefined> {
   return page.evaluate(() => window.frameScriptEvaluationCount)
 }
+
+declare global {
+  interface Window {
+    frameScriptEvaluationCount?: number
+  }
+}
diff --git a/src/tests/functional/import_tests.js b/src/tests/functional/import_tests.ts
similarity index 100%
rename from src/tests/functional/import_tests.js
rename to src/tests/functional/import_tests.ts
diff --git a/src/tests/functional/loading_tests.js b/src/tests/functional/loading_tests.ts
similarity index 97%
rename from src/tests/functional/loading_tests.js
rename to src/tests/functional/loading_tests.ts
index fc4c65087..e445775dc 100644
--- a/src/tests/functional/loading_tests.js
+++ b/src/tests/functional/loading_tests.ts
@@ -9,9 +9,15 @@ import {
   nextEventNamed,
   nextEventOnTarget,
   noNextEventOnTarget,
-  readEventLogs
+  readEventLogs,
 } from "../helpers/page"
 
+declare global {
+  interface Window {
+    savedElement: Element | null
+  }
+}
+
 test.beforeEach(async ({ page }) => {
   await page.goto("/src/tests/fixtures/loading.html")
   await readEventLogs(page)
@@ -105,7 +111,7 @@ test("test reloading a frame reloads the content", async ({ page }) => {
   assert.ok(await hasSelector(page, frameContent))
   assert.equal(await nextAttributeMutationNamed(page, "frame", "complete"), "", "has [complete] attribute")
 
-  await page.evaluate(() => document.querySelector("#loading-eager turbo-frame")?.reload())
+  await page.evaluate(() => (document.querySelector("#loading-eager turbo-frame") as any)?.reload())
   assert.ok(await hasSelector(page, frameContent))
   assert.equal(await nextAttributeMutationNamed(page, "frame", "complete"), null, "clears [complete] attribute")
 })
diff --git a/src/tests/functional/navigation_tests.js b/src/tests/functional/navigation_tests.ts
similarity index 99%
rename from src/tests/functional/navigation_tests.js
rename to src/tests/functional/navigation_tests.ts
index 1157e938c..e2131e6ee 100644
--- a/src/tests/functional/navigation_tests.js
+++ b/src/tests/functional/navigation_tests.ts
@@ -19,7 +19,7 @@ import {
   visitAction,
   waitUntilSelector,
   waitUntilNoSelector,
-  willChangeBody
+  willChangeBody,
 } from "../helpers/page"
 
 test.beforeEach(async ({ page }) => {
@@ -261,7 +261,7 @@ test("test following a same-origin [target] link", async ({ page }) => {
 })
 
 test("test following a same-origin [download] link", async ({ page }) => {
-  assert.notOk(
+  assert.notOk<boolean>(
     await willChangeBody(page, async () => {
       await page.click("#same-origin-download-link")
       await nextBeat()
@@ -310,7 +310,7 @@ test("test link targeting a disabled turbo-frame navigates the page", async ({ p
 })
 
 test("test skip link with hash-only path scrolls to the anchor without a visit", async ({ page }) => {
-  assert.notOk(
+  assert.notOk<boolean>(
     await willChangeBody(page, async () => {
       await page.click('a[href="#main"]')
       await nextBeat()
@@ -379,7 +379,7 @@ test("test same-page anchor visits do not trigger visit events", async ({ page }
     "turbo:before-cache",
     "turbo:before-render",
     "turbo:render",
-    "turbo:load"
+    "turbo:load",
   ]
 
   for (const eventName in events) {
@@ -465,7 +465,7 @@ test("test ignores forms with a [target] attribute that targets an iframe with a
 })
 
 test("test ignores forms with a button[formtarget] attribute that targets an iframe with [name='']", async ({
-  page
+  page,
 }) => {
   await page.click("#form-target-empty-name-iframe button")
   await nextBeat()
@@ -475,7 +475,7 @@ test("test ignores forms with a button[formtarget] attribute that targets an ifr
 })
 
 test("test ignores forms with a button[formtarget] attribute that targets an iframe with a matching [name]", async ({
-  page
+  page,
 }) => {
   await page.click("#button-formtarget-iframe")
   await nextBeat()
diff --git a/src/tests/functional/pausable_rendering_tests.js b/src/tests/functional/pausable_rendering_tests.ts
similarity index 100%
rename from src/tests/functional/pausable_rendering_tests.js
rename to src/tests/functional/pausable_rendering_tests.ts
diff --git a/src/tests/functional/pausable_requests_tests.js b/src/tests/functional/pausable_requests_tests.ts
similarity index 100%
rename from src/tests/functional/pausable_requests_tests.js
rename to src/tests/functional/pausable_requests_tests.ts
diff --git a/src/tests/functional/preloader_tests.js b/src/tests/functional/preloader_tests.ts
similarity index 100%
rename from src/tests/functional/preloader_tests.js
rename to src/tests/functional/preloader_tests.ts
diff --git a/src/tests/functional/rendering_tests.js b/src/tests/functional/rendering_tests.ts
similarity index 92%
rename from src/tests/functional/rendering_tests.js
rename to src/tests/functional/rendering_tests.ts
index fc85d0e1b..bb8e33885 100644
--- a/src/tests/functional/rendering_tests.js
+++ b/src/tests/functional/rendering_tests.ts
@@ -1,4 +1,4 @@
-import { test } from "@playwright/test"
+import { JSHandle, Page, test } from "@playwright/test"
 import { assert } from "chai"
 import {
   clearLocalStorage,
@@ -17,7 +17,7 @@ import {
   sleep,
   strictElementEquals,
   textContent,
-  visitAction
+  visitAction,
 } from "../helpers/page"
 
 test.beforeEach(async ({ page }) => {
@@ -62,7 +62,7 @@ test("test reloads when tracked elements change", async ({ page }) => {
   await page.evaluate(() =>
     window.addEventListener(
       "turbo:reload",
-      (e) => {
+      (e: any) => {
         localStorage.setItem("reloadReason", e.detail.reason)
       },
       { once: true }
@@ -86,7 +86,7 @@ test("test reloads when tracked elements change due to failed form submission",
   await page.evaluate(() => {
     window.addEventListener(
       "turbo:reload",
-      (e) => {
+      (e: any) => {
         localStorage.setItem("reason", e.detail.reason)
       },
       { once: true }
@@ -116,9 +116,9 @@ test("test reloads when tracked elements change due to failed form submission",
 test("test before-render event supports custom render function", async ({ page }) => {
   await page.evaluate(() =>
     addEventListener("turbo:before-render", (event) => {
-      const { detail } = event
+      const { detail } = event as CustomEvent
       const { render } = detail
-      detail.render = (currentElement, newElement) => {
+      detail.render = (currentElement: HTMLBodyElement, newElement: HTMLBodyElement) => {
         newElement.insertAdjacentHTML("beforeend", `<span id="custom-rendered">Custom Rendered</span>`)
         render(currentElement, newElement)
       }
@@ -134,14 +134,14 @@ test("test before-render event supports custom render function", async ({ page }
 test("test before-render event supports async custom render function", async ({ page }) => {
   await page.evaluate(() => {
     const nextEventLoopTick = () =>
-      new Promise((resolve) => {
+      new Promise<void>((resolve) => {
         setTimeout(() => resolve(), 0)
       })
 
     addEventListener("turbo:before-render", (event) => {
-      const { detail } = event
+      const { detail } = event as CustomEvent
       const { render } = detail
-      detail.render = async (currentElement, newElement) => {
+      detail.render = async (currentElement: HTMLBodyElement, newElement: HTMLBodyElement) => {
         await nextEventLoopTick()
 
         newElement.insertAdjacentHTML("beforeend", `<span id="custom-rendered">Custom Rendered</span>`)
@@ -173,7 +173,7 @@ test("test reloads when turbo-visit-control setting is reload", async ({ page })
   await page.evaluate(() =>
     window.addEventListener(
       "turbo:reload",
-      (e) => {
+      (e: any) => {
         localStorage.setItem("reloadReason", e.detail.reason)
       },
       { once: true }
@@ -269,7 +269,7 @@ test("test does not evaluate head stylesheet elements inside noscript elements",
 })
 
 test("test waits for CSS to be loaded before rendering", async ({ page }) => {
-  let finishLoadingCSS = (_value) => {}
+  let finishLoadingCSS = (_value?: unknown) => {}
   const promise = new Promise((resolve) => {
     finishLoadingCSS = resolve
   })
@@ -292,7 +292,7 @@ test("test waits for CSS to be loaded before rendering", async ({ page }) => {
 })
 
 test("test waits for CSS to fail before rendering", async ({ page }) => {
-  let finishLoadingCSS = (_value) => {}
+  let finishLoadingCSS = (_value?: unknown) => {}
   const promise = new Promise((resolve) => {
     finishLoadingCSS = resolve
   })
@@ -315,7 +315,7 @@ test("test waits for CSS to fail before rendering", async ({ page }) => {
 })
 
 test("test waits for some time, but renders if CSS takes too much to load", async ({ page }) => {
-  let finishLoadingCSS = (_value) => {}
+  let finishLoadingCSS = (_value?: unknown) => {}
   const promise = new Promise((resolve) => {
     finishLoadingCSS = resolve
   })
@@ -381,7 +381,7 @@ test("test preserves permanent elements", async ({ page }) => {
   await page.click("#permanent-element-link")
   await nextEventNamed(page, "turbo:render")
   assert.ok(await strictElementEquals(permanentElement, await page.locator("#permanent")))
-  assert.equal(await permanentElement.textContent(), "Rendering")
+  assert.equal(await permanentElement!.textContent(), "Rendering")
 
   await page.goBack()
   await nextEventNamed(page, "turbo:render")
@@ -396,7 +396,7 @@ test("test restores focus during page rendering when transposing the activeEleme
 })
 
 test("test restores focus during page rendering when transposing an ancestor of the activeElement", async ({
-  page
+  page,
 }) => {
   await page.press("#permanent-descendant-input", "Enter")
   await nextBody(page)
@@ -408,9 +408,9 @@ test("test before-frame-render event supports custom render function within turb
   const frame = await page.locator("#frame")
   await frame.evaluate((frame) =>
     frame.addEventListener("turbo:before-frame-render", (event) => {
-      const { detail } = event
+      const { detail } = event as CustomEvent
       const { render } = detail
-      detail.render = (currentElement, newElement) => {
+      detail.render = (currentElement: Element, newElement: Element) => {
         newElement.insertAdjacentHTML("beforeend", `<span id="custom-rendered">Custom Rendered Frame</span>`)
         render(currentElement, newElement)
       }
@@ -450,7 +450,7 @@ test("test restores focus during turbo-frame rendering when transposing the acti
 })
 
 test("test restores focus during turbo-frame rendering when transposing a descendant of the activeElement", async ({
-  page
+  page,
 }) => {
   await page.press("#permanent-descendant-input-in-frame", "Enter")
   await nextBeat()
@@ -463,13 +463,13 @@ test("test preserves permanent element video playback", async ({ page }) => {
   await page.click("#permanent-video-button")
   await sleep(500)
 
-  const timeBeforeRender = await videoElement.evaluate((video) => video.currentTime)
+  const timeBeforeRender = await videoElement.evaluate((video: HTMLVideoElement) => video.currentTime)
   assert.notEqual(timeBeforeRender, 0, "playback has started")
 
   await page.click("#permanent-element-link")
   await nextBody(page)
 
-  const timeAfterRender = await videoElement.evaluate((video) => video.currentTime)
+  const timeAfterRender = await videoElement.evaluate((video: HTMLVideoElement) => video.currentTime)
   assert.equal(timeAfterRender, timeBeforeRender, "element state is preserved")
 })
 
@@ -569,7 +569,7 @@ test("test before-cache event", async ({ page }) => {
   assert.equal(await page.textContent("body"), "Modified")
 })
 
-test("test mutation record-cache notification", async ({ page }) => {
+test("test mutation record as before-cache notification", async ({ page }) => {
   await modifyBodyAfterRemoval(page)
   await page.click("#same-origin-link")
   await nextBody(page)
@@ -591,34 +591,38 @@ test("test rendering a redirect response replaces the body once and only once",
   assert.ok(await noNextBodyMutation(page), "replaces <body> element once")
 })
 
-function deepElementsEqual(page, left, right) {
+function deepElementsEqual(
+  page: Page,
+  left: JSHandle<SVGElement | HTMLElement>[],
+  right: JSHandle<SVGElement | HTMLElement>[]
+): Promise<boolean> {
   return page.evaluate(
     ([left, right]) => left.length == right.length && left.every((element) => right.includes(element)),
     [left, right]
   )
 }
 
-function headScriptEvaluationCount(page) {
+function headScriptEvaluationCount(page: Page): Promise<number | undefined> {
   return page.evaluate(() => window.headScriptEvaluationCount)
 }
 
-function bodyScriptEvaluationCount(page) {
+function bodyScriptEvaluationCount(page: Page): Promise<number | undefined> {
   return page.evaluate(() => window.bodyScriptEvaluationCount)
 }
 
-function isStylesheetEvaluated(page) {
+function isStylesheetEvaluated(page: Page): Promise<boolean> {
   return page.evaluate(
     () => getComputedStyle(document.body).getPropertyValue("--black-if-evaluated").trim() === "black"
   )
 }
 
-function isNoscriptStylesheetEvaluated(page) {
+function isNoscriptStylesheetEvaluated(page: Page): Promise<boolean> {
   return page.evaluate(
     () => getComputedStyle(document.body).getPropertyValue("--black-if-noscript-evaluated").trim() === "black"
   )
 }
 
-function modifyBodyAfterRemoval(page) {
+function modifyBodyAfterRemoval(page: Page) {
   return page.evaluate(() => {
     const { documentElement, body } = document
     const observer = new MutationObserver((records) => {
@@ -633,3 +637,10 @@ function modifyBodyAfterRemoval(page) {
     observer.observe(documentElement, { childList: true })
   })
 }
+
+declare global {
+  interface Window {
+    headScriptEvaluationCount?: number
+    bodyScriptEvaluationCount?: number
+  }
+}
diff --git a/src/tests/functional/scroll_restoration_tests.js b/src/tests/functional/scroll_restoration_tests.ts
similarity index 100%
rename from src/tests/functional/scroll_restoration_tests.js
rename to src/tests/functional/scroll_restoration_tests.ts
diff --git a/src/tests/functional/stream_tests.js b/src/tests/functional/stream_tests.ts
similarity index 92%
rename from src/tests/functional/stream_tests.js
rename to src/tests/functional/stream_tests.ts
index 18ff672dc..3d159b2e3 100644
--- a/src/tests/functional/stream_tests.js
+++ b/src/tests/functional/stream_tests.ts
@@ -74,18 +74,18 @@ test("test overriding with custom StreamActions", async ({ page }) => {
   const html = "Rendered with Custom Action"
 
   await page.evaluate((html) => {
-    const CustomActions = {
-      customUpdate(newStream) {
+    const CustomActions: Record<string, any> = {
+      customUpdate(newStream: { targetElements: HTMLElement[] }) {
         for (const target of newStream.targetElements) target.innerHTML = html
-      }
+      },
     }
 
-    addEventListener("turbo:before-stream-render", ({ target, detail }) => {
-      const stream = target
+    addEventListener("turbo:before-stream-render", (({ target, detail }: CustomEvent) => {
+      const stream = target as unknown as { action: string }
 
       const defaultRender = detail.render
       detail.render = CustomActions[stream.action] || defaultRender
-    })
+    }) as EventListener)
 
     window.Turbo.renderStreamMessage(`
       <turbo-stream action="customUpdate" target="messages">
diff --git a/src/tests/functional/visit_tests.js b/src/tests/functional/visit_tests.ts
similarity index 92%
rename from src/tests/functional/visit_tests.js
rename to src/tests/functional/visit_tests.ts
index 7780b3f3f..146bcda58 100644
--- a/src/tests/functional/visit_tests.js
+++ b/src/tests/functional/visit_tests.ts
@@ -1,4 +1,4 @@
-import { test } from "@playwright/test"
+import { Page, test } from "@playwright/test"
 import { assert } from "chai"
 import { get } from "http"
 import {
@@ -13,7 +13,7 @@ import {
   readEventLogs,
   scrollToSelector,
   visitAction,
-  willChangeBody
+  willChangeBody,
 } from "../helpers/page"
 
 test.beforeEach(async ({ page }) => {
@@ -75,7 +75,7 @@ test("test canceling a before-visit event prevents navigation", async ({ page })
   await cancelNextVisit(page)
   const urlBeforeVisit = page.url()
 
-  assert.notOk(
+  assert.notOk<boolean>(
     await willChangeBody(page, async () => {
       await page.click("#same-origin-link")
       await nextBeat()
@@ -118,11 +118,11 @@ test("test turbo:before-fetch-response open new site", async ({ page }) => {
   page.evaluate(() =>
     addEventListener(
       "turbo:before-fetch-response",
-      async function eventListener(event) {
+      async function eventListener(event: any) {
         removeEventListener("turbo:before-fetch-response", eventListener, false)
-        window.fetchResponseResult = {
+        ;(window as any).fetchResponseResult = {
           responseText: await event.detail.fetchResponse.responseText,
-          responseHTML: await event.detail.fetchResponse.responseHTML
+          responseHTML: await event.detail.fetchResponse.responseHTML,
         }
       },
       false
@@ -132,7 +132,7 @@ test("test turbo:before-fetch-response open new site", async ({ page }) => {
   await page.click("#sample-response")
   await nextEventNamed(page, "turbo:before-fetch-response")
 
-  const fetchResponseResult = await page.evaluate(() => window.fetchResponseResult)
+  const fetchResponseResult = await page.evaluate(() => (window as any).fetchResponseResult)
 
   assert.isTrue(fetchResponseResult.responseText.indexOf("An element with an ID") > -1)
   assert.isTrue(fetchResponseResult.responseHTML.indexOf("An element with an ID") > -1)
@@ -172,11 +172,11 @@ test("test cache does not override response after redirect", async ({ page }) =>
   assert.equal(await page.locator("some-cached-element").count(), 0)
 })
 
-function cancelNextVisit(page) {
+function cancelNextVisit(page: Page): Promise<void> {
   return cancelNextEvent(page, "turbo:before-visit")
 }
 
-function contentTypeOfURL(url) {
+function contentTypeOfURL(url: string): Promise<string | undefined> {
   return new Promise((resolve) => {
     get(url, ({ headers }) => resolve(headers["content-type"]))
   })
@@ -213,13 +213,13 @@ test("test can scroll to element after history-initiated turbo:visit", async ({
 
 test("test Visit with network error", async ({ page }) => {
   await page.evaluate(() => {
-    addEventListener("turbo:fetch-request-error", (event) => event.preventDefault())
+    addEventListener("turbo:fetch-request-error", (event: Event) => event.preventDefault())
   })
   await page.context().setOffline(true)
   await page.click("#same-origin-link")
   await nextEventNamed(page, "turbo:fetch-request-error")
 })
 
-async function visitLocation(page, location) {
+async function visitLocation(page: Page, location: string) {
   return page.evaluate((location) => window.Turbo.visit(location), location)
 }
diff --git a/src/tests/helpers/dom_test_case.js b/src/tests/helpers/dom_test_case.ts
similarity index 86%
rename from src/tests/helpers/dom_test_case.js
rename to src/tests/helpers/dom_test_case.ts
index c7557dee0..238fffe3a 100644
--- a/src/tests/helpers/dom_test_case.js
+++ b/src/tests/helpers/dom_test_case.ts
@@ -11,11 +11,11 @@ export class DOMTestCase {
     this.fixtureElement.remove()
   }
 
-  append(node) {
+  append(node: Node) {
     this.fixtureElement.appendChild(node)
   }
 
-  find(selector) {
+  find(selector: string) {
     return this.fixtureElement.querySelector(selector)
   }
 
@@ -23,7 +23,7 @@ export class DOMTestCase {
     return this.fixtureElement.innerHTML
   }
 
-  set fixtureHTML(html) {
+  set fixtureHTML(html: string) {
     this.fixtureElement.innerHTML = html
   }
 }
diff --git a/src/tests/helpers/page.js b/src/tests/helpers/page.js
deleted file mode 100644
index 580327d25..000000000
--- a/src/tests/helpers/page.js
+++ /dev/null
@@ -1,288 +0,0 @@
-export function attributeForSelector(page, selector, attributeName) {
-  return page.locator(selector).getAttribute(attributeName)
-}
-
-export function cancelNextEvent(page, eventName) {
-  return page.evaluate(
-    (eventName) => addEventListener(eventName, (event) => event.preventDefault(), { once: true }),
-    eventName
-  )
-}
-
-export function clickWithoutScrolling(page, selector, options = {}) {
-  const element = page.locator(selector, options)
-
-  return element.evaluate((element) => element instanceof HTMLElement && element.click())
-}
-
-export function clearLocalStorage(page) {
-  return page.evaluate(() => localStorage.clear())
-}
-
-export function disposeAll(...handles) {
-  return Promise.all(handles.map((handle) => handle.dispose()))
-}
-
-export function getFromLocalStorage(page, key) {
-  return page.evaluate((storageKey) => localStorage.getItem(storageKey), key)
-}
-
-export function getSearchParam(url, key) {
-  return searchParams(url).get(key)
-}
-
-export function hash(url) {
-  const { hash } = new URL(url)
-
-  return hash
-}
-
-export async function hasSelector(page, selector) {
-  return !!(await page.locator(selector).count())
-}
-
-export function innerHTMLForSelector(page, selector) {
-  return page.locator(selector).innerHTML()
-}
-
-export async function isScrolledToSelector(page, selector) {
-  const boundingBox = await page
-    .locator(selector)
-    .evaluate((element) => (element instanceof HTMLElement ? { x: element.offsetLeft, y: element.offsetTop } : null))
-
-  if (boundingBox) {
-    const { y: pageY } = await scrollPosition(page)
-    const { y: elementY } = boundingBox
-    const offset = pageY - elementY
-    return Math.abs(offset) <= 2
-  } else {
-    return false
-  }
-}
-
-export function nextBeat() {
-  return sleep(100)
-}
-
-export function nextBody(_page, timeout = 500) {
-  return sleep(timeout)
-}
-
-export async function nextEventNamed(page, eventName) {
-  let record
-  while (!record) {
-    const records = await readEventLogs(page, 1)
-    record = records.find(([name]) => name == eventName)
-  }
-  return record[1]
-}
-
-export async function nextEventOnTarget(page, elementId, eventName) {
-  let record
-  while (!record) {
-    const records = await readEventLogs(page, 1)
-    record = records.find(([name, _, id]) => name == eventName && id == elementId)
-  }
-  return record[1]
-}
-
-export async function listenForEventOnTarget(page, elementId, eventName) {
-  return page.locator("#" + elementId).evaluate((element, eventName) => {
-    const eventLogs = window.eventLogs
-
-    element.addEventListener(eventName, ({ target, type }) => {
-      if (target instanceof Element) {
-        eventLogs.push([type, {}, target.id])
-      }
-    })
-  }, eventName)
-}
-
-export async function nextBodyMutation(page) {
-  let record
-  while (!record) {
-    [record] = await readBodyMutationLogs(page, 1)
-  }
-  return record[0]
-}
-
-export async function noNextBodyMutation(page) {
-  const records = await readBodyMutationLogs(page, 1)
-  return !records.some((record) => !!record)
-}
-
-export async function nextAttributeMutationNamed(page, elementId, attributeName) {
-  let record
-  while (!record) {
-    const records = await readMutationLogs(page, 1)
-    record = records.find(([name, id]) => name == attributeName && id == elementId)
-  }
-  const attributeValue = record[2]
-  return attributeValue
-}
-
-export async function noNextAttributeMutationNamed(page, elementId, attributeName) {
-  const records = await readMutationLogs(page, 1)
-  return !records.some(([name, _, target]) => name == attributeName && target == elementId)
-}
-
-export async function noNextEventNamed(page, eventName) {
-  const records = await readEventLogs(page, 1)
-  return !records.some(([name]) => name == eventName)
-}
-
-export async function noNextEventOnTarget(page, elementId, eventName) {
-  const records = await readEventLogs(page, 1)
-  return !records.some(([name, _, target]) => name == eventName && target == elementId)
-}
-
-export async function outerHTMLForSelector(page, selector) {
-  const element = await page.locator(selector)
-  return element.evaluate((element) => element.outerHTML)
-}
-
-export function pathname(url) {
-  const { pathname } = new URL(url)
-
-  return pathname
-}
-
-export async function pathnameForIFrame(page, name) {
-  const locator = await page.locator(`[name="${name}"]`)
-  const location = await locator.evaluate((iframe) => iframe.contentWindow?.location)
-
-  if (location) {
-    return pathname(location.href)
-  } else {
-    return ""
-  }
-}
-
-export function propertyForSelector(page, selector, propertyName) {
-  return page.locator(selector).evaluate((element, propertyName) => element[propertyName], propertyName)
-}
-
-async function readArray(page, identifier, length) {
-  return page.evaluate(
-    ({ identifier, length }) => {
-      const records = window[identifier]
-      if (records != null && typeof records.splice == "function") {
-        return records.splice(0, typeof length === "undefined" ? records.length : length)
-      } else {
-        return []
-      }
-    },
-    { identifier, length }
-  )
-}
-
-export function readBodyMutationLogs(page, length) {
-  return readArray(page, "bodyMutationLogs", length)
-}
-
-export function readEventLogs(page, length) {
-  return readArray(page, "eventLogs", length)
-}
-
-export function readMutationLogs(page, length) {
-  return readArray(page, "mutationLogs", length)
-}
-
-export function search(url) {
-  const { search } = new URL(url)
-
-  return search
-}
-
-export function searchParams(url) {
-  const { searchParams } = new URL(url)
-
-  return searchParams
-}
-
-export function selectorHasFocus(page, selector) {
-  return page.locator(selector).evaluate((element) => element === document.activeElement)
-}
-
-export function setLocalStorageFromEvent(page, eventName, storageKey, storageValue) {
-  return page.evaluate(
-    ({ eventName, storageKey, storageValue }) => {
-      addEventListener(eventName, () => localStorage.setItem(storageKey, storageValue))
-    },
-    { eventName, storageKey, storageValue }
-  )
-}
-
-export function scrollPosition(page) {
-  return page.evaluate(() => ({ x: window.scrollX, y: window.scrollY }))
-}
-
-export async function isScrolledToTop(page) {
-  const { y: pageY } = await scrollPosition(page)
-  return pageY === 0
-}
-
-export function scrollToSelector(page, selector) {
-  return page.locator(selector).scrollIntoViewIfNeeded()
-}
-
-export function sleep(timeout = 0) {
-  return new Promise((resolve) => setTimeout(() => resolve(undefined), timeout))
-}
-
-export async function strictElementEquals(left, right) {
-  return left.evaluate((left, right) => left === right, await right.elementHandle())
-}
-
-export function textContent(page, html) {
-  return page.evaluate((html) => {
-    const parser = new DOMParser()
-    const { documentElement } = parser.parseFromString(html, "text/html")
-
-    return documentElement.textContent
-  }, html)
-}
-
-export function visitAction(page) {
-  return page.evaluate(() => {
-    try {
-      return window.Turbo.navigator.currentVisit.action
-    } catch (error) {
-      return "load"
-    }
-  })
-}
-
-export function waitForPathname(page, pathname) {
-  return page.waitForURL((url) => url.pathname == pathname)
-}
-
-export function waitUntilText(page, text, state = "visible") {
-  return page.waitForSelector(`text='${text}'`, { state })
-}
-
-export function waitUntilSelector(page, selector, state = "visible") {
-  return page.waitForSelector(selector, { state })
-}
-
-export function waitUntilNoSelector(page, selector, state = "hidden") {
-  return page.waitForSelector(selector, { state })
-}
-
-export async function willChangeBody(page, callback) {
-  const handles = []
-
-  try {
-    const originalBody = await page.evaluateHandle(() => document.body)
-    handles.push(originalBody)
-
-    await callback()
-
-    const latestBody = await page.evaluateHandle(() => document.body)
-    handles.push(latestBody)
-
-    return page.evaluate(({ originalBody, latestBody }) => originalBody !== latestBody, { originalBody, latestBody })
-  } finally {
-    disposeAll(...handles)
-  }
-}
diff --git a/src/tests/helpers/page.ts b/src/tests/helpers/page.ts
new file mode 100644
index 000000000..45056406e
--- /dev/null
+++ b/src/tests/helpers/page.ts
@@ -0,0 +1,313 @@
+import { JSHandle, Locator, Page } from "@playwright/test"
+
+type Target = string | null
+
+type EventType = string
+type EventDetail = any
+type EventLog = [EventType, EventDetail, Target]
+
+type MutationAttributeName = string
+type MutationAttributeValue = string | null
+type MutationLog = [MutationAttributeName, Target, MutationAttributeValue]
+
+type BodyHTML = string
+type BodyMutationLog = [BodyHTML]
+
+export function attributeForSelector(page: Page, selector: string, attributeName: string): Promise<string | null> {
+  return page.locator(selector).getAttribute(attributeName)
+}
+
+type CancellableEvent = "turbo:click" | "turbo:before-visit"
+
+export function cancelNextEvent(page: Page, eventName: CancellableEvent): Promise<void> {
+  return page.evaluate(
+    (eventName) => addEventListener(eventName, (event) => event.preventDefault(), { once: true }),
+    eventName
+  )
+}
+
+export function clickWithoutScrolling(page: Page, selector: string, options = {}) {
+  const element = page.locator(selector, options)
+
+  return element.evaluate((element) => element instanceof HTMLElement && element.click())
+}
+
+export function clearLocalStorage(page: Page): Promise<void> {
+  return page.evaluate(() => localStorage.clear())
+}
+
+export function disposeAll(...handles: JSHandle[]): Promise<void[]> {
+  return Promise.all(handles.map((handle) => handle.dispose()))
+}
+
+export function getFromLocalStorage(page: Page, key: string) {
+  return page.evaluate((storageKey: string) => localStorage.getItem(storageKey), key)
+}
+
+export function getSearchParam(url: string, key: string): string | null {
+  return searchParams(url).get(key)
+}
+
+export function hash(url: string): string {
+  const { hash } = new URL(url)
+
+  return hash
+}
+
+export async function hasSelector(page: Page, selector: string): Promise<boolean> {
+  return !!(await page.locator(selector).count())
+}
+
+export function innerHTMLForSelector(page: Page, selector: string): Promise<string> {
+  return page.locator(selector).innerHTML()
+}
+
+export async function isScrolledToSelector(page: Page, selector: string): Promise<boolean> {
+  const boundingBox = await page
+    .locator(selector)
+    .evaluate((element) => (element instanceof HTMLElement ? { x: element.offsetLeft, y: element.offsetTop } : null))
+
+  if (boundingBox) {
+    const { y: pageY } = await scrollPosition(page)
+    const { y: elementY } = boundingBox
+    const offset = pageY - elementY
+    return Math.abs(offset) <= 2
+  } else {
+    return false
+  }
+}
+
+export function nextBeat() {
+  return sleep(100)
+}
+
+export function nextBody(_page: Page, timeout = 500) {
+  return sleep(timeout)
+}
+
+export async function nextEventNamed(page: Page, eventName: string): Promise<any> {
+  let record: EventLog | undefined
+  while (!record) {
+    const records = await readEventLogs(page, 1)
+    record = records.find(([name]) => name == eventName)
+  }
+  return record[1]
+}
+
+export async function nextEventOnTarget(page: Page, elementId: string, eventName: string): Promise<any> {
+  let record: EventLog | undefined
+  while (!record) {
+    const records = await readEventLogs(page, 1)
+    record = records.find(([name, _, id]) => name == eventName && id == elementId)
+  }
+  return record[1]
+}
+
+export async function listenForEventOnTarget(page: Page, elementId: string, eventName: string): Promise<void> {
+  return page.locator("#" + elementId).evaluate((element, eventName) => {
+    const eventLogs = (window as any).eventLogs
+
+    element.addEventListener(eventName, ({ target, type }) => {
+      if (target instanceof Element) {
+        eventLogs.push([type, {}, target.id])
+      }
+    })
+  }, eventName)
+}
+
+export async function nextBodyMutation(page: Page): Promise<string | null> {
+  let record: BodyMutationLog | undefined
+  while (!record) {
+    ;[record] = await readBodyMutationLogs(page, 1)
+  }
+  return record[0]
+}
+
+export async function noNextBodyMutation(page: Page): Promise<boolean> {
+  const records = await readBodyMutationLogs(page, 1)
+  return !records.some((record) => !!record)
+}
+
+export async function nextAttributeMutationNamed(
+  page: Page,
+  elementId: string,
+  attributeName: string
+): Promise<string | null> {
+  let record: MutationLog | undefined
+  while (!record) {
+    const records = await readMutationLogs(page, 1)
+    record = records.find(([name, id]) => name == attributeName && id == elementId)
+  }
+  const attributeValue = record[2]
+  return attributeValue
+}
+
+export async function noNextAttributeMutationNamed(
+  page: Page,
+  elementId: string,
+  attributeName: string
+): Promise<boolean> {
+  const records = await readMutationLogs(page, 1)
+  return !records.some(([name, _, target]) => name == attributeName && target == elementId)
+}
+
+export async function noNextEventNamed(page: Page, eventName: string): Promise<boolean> {
+  const records = await readEventLogs(page, 1)
+  return !records.some(([name]) => name == eventName)
+}
+
+export async function noNextEventOnTarget(page: Page, elementId: string, eventName: string): Promise<boolean> {
+  const records = await readEventLogs(page, 1)
+  return !records.some(([name, _, target]) => name == eventName && target == elementId)
+}
+
+export async function outerHTMLForSelector(page: Page, selector: string): Promise<string> {
+  const element = await page.locator(selector)
+  return element.evaluate((element) => element.outerHTML)
+}
+
+export function pathname(url: string): string {
+  const { pathname } = new URL(url)
+
+  return pathname
+}
+
+export async function pathnameForIFrame(page: Page, name: string) {
+  const locator = await page.locator(`[name="${name}"]`)
+  const location = await locator.evaluate((iframe: HTMLIFrameElement) => iframe.contentWindow?.location)
+
+  if (location) {
+    return pathname(location.href)
+  } else {
+    return ""
+  }
+}
+
+export function propertyForSelector(page: Page, selector: string, propertyName: string): Promise<any> {
+  return page.locator(selector).evaluate((element, propertyName) => (element as any)[propertyName], propertyName)
+}
+
+async function readArray<T>(page: Page, identifier: string, length?: number): Promise<T[]> {
+  return page.evaluate(
+    ({ identifier, length }) => {
+      const records = (window as any)[identifier]
+      if (records != null && typeof records.splice == "function") {
+        return records.splice(0, typeof length === "undefined" ? records.length : length)
+      } else {
+        return []
+      }
+    },
+    { identifier, length }
+  )
+}
+
+export function readBodyMutationLogs(page: Page, length?: number): Promise<BodyMutationLog[]> {
+  return readArray<BodyMutationLog>(page, "bodyMutationLogs", length)
+}
+
+export function readEventLogs(page: Page, length?: number): Promise<EventLog[]> {
+  return readArray<EventLog>(page, "eventLogs", length)
+}
+
+export function readMutationLogs(page: Page, length?: number): Promise<MutationLog[]> {
+  return readArray<MutationLog>(page, "mutationLogs", length)
+}
+
+export function search(url: string): string {
+  const { search } = new URL(url)
+
+  return search
+}
+
+export function searchParams(url: string): URLSearchParams {
+  const { searchParams } = new URL(url)
+
+  return searchParams
+}
+
+export function selectorHasFocus(page: Page, selector: string): Promise<boolean> {
+  return page.locator(selector).evaluate((element) => element === document.activeElement)
+}
+
+export function setLocalStorageFromEvent(page: Page, eventName: string, storageKey: string, storageValue: string) {
+  return page.evaluate(
+    ({ eventName, storageKey, storageValue }) => {
+      addEventListener(eventName, () => localStorage.setItem(storageKey, storageValue))
+    },
+    { eventName, storageKey, storageValue }
+  )
+}
+
+export function scrollPosition(page: Page): Promise<{ x: number; y: number }> {
+  return page.evaluate(() => ({ x: window.scrollX, y: window.scrollY }))
+}
+
+export async function isScrolledToTop(page: Page): Promise<boolean> {
+  const { y: pageY } = await scrollPosition(page)
+  return pageY === 0
+}
+
+export function scrollToSelector(page: Page, selector: string): Promise<void> {
+  return page.locator(selector).scrollIntoViewIfNeeded()
+}
+
+export function sleep(timeout = 0): Promise<void> {
+  return new Promise((resolve) => setTimeout(() => resolve(undefined), timeout))
+}
+
+export async function strictElementEquals(left: Locator, right: Locator): Promise<boolean> {
+  return left.evaluate((left, right) => left === right, await right.elementHandle())
+}
+
+export function textContent(page: Page, html: string): Promise<string | null> {
+  return page.evaluate((html) => {
+    const parser = new DOMParser()
+    const { documentElement } = parser.parseFromString(html, "text/html")
+
+    return documentElement.textContent
+  }, html)
+}
+
+export function visitAction(page: Page): Promise<string> {
+  return page.evaluate(() => {
+    try {
+      return window.Turbo.navigator.currentVisit!.action
+    } catch (error) {
+      return "load"
+    }
+  })
+}
+
+export function waitForPathname(page: Page, pathname: string): Promise<void> {
+  return page.waitForURL((url) => url.pathname == pathname)
+}
+
+export function waitUntilText(page: Page, text: string, state: "visible" | "attached" = "visible") {
+  return page.waitForSelector(`text='${text}'`, { state })
+}
+
+export function waitUntilSelector(page: Page, selector: string, state: "visible" | "attached" = "visible") {
+  return page.waitForSelector(selector, { state })
+}
+
+export function waitUntilNoSelector(page: Page, selector: string, state: "hidden" | "detached" = "hidden") {
+  return page.waitForSelector(selector, { state })
+}
+
+export async function willChangeBody(page: Page, callback: () => Promise<void>): Promise<boolean> {
+  const handles: JSHandle[] = []
+
+  try {
+    const originalBody = await page.evaluateHandle(() => document.body)
+    handles.push(originalBody)
+
+    await callback()
+
+    const latestBody = await page.evaluateHandle(() => document.body)
+    handles.push(latestBody)
+
+    return page.evaluate(({ originalBody, latestBody }) => originalBody !== latestBody, { originalBody, latestBody })
+  } finally {
+    disposeAll(...handles)
+  }
+}
diff --git a/src/tests/integration/ujs_tests.js b/src/tests/integration/ujs_tests.ts
similarity index 90%
rename from src/tests/integration/ujs_tests.js
rename to src/tests/integration/ujs_tests.ts
index 3119b2152..e90736e21 100644
--- a/src/tests/integration/ujs_tests.js
+++ b/src/tests/integration/ujs_tests.ts
@@ -1,4 +1,4 @@
-import { test } from "@playwright/test"
+import { Page, test } from "@playwright/test"
 import { assert } from "chai"
 import { nextEventOnTarget, noNextEventOnTarget } from "../helpers/page"
 
@@ -28,7 +28,7 @@ test("handles [data-remote=true] forms within a turbo-frame", async ({ page }) =
   })
 })
 
-async function assertRequestLimit(page, count, callback) {
+async function assertRequestLimit(page: Page, count: number, callback: () => Promise<void>) {
   let requestsStarted = 0
   await page.on("request", () => requestsStarted++)
   await callback()
diff --git a/src/tests/server.mjs b/src/tests/server.ts
similarity index 89%
rename from src/tests/server.mjs
rename to src/tests/server.ts
index 0628f2e30..399e930be 100644
--- a/src/tests/server.mjs
+++ b/src/tests/server.ts
@@ -1,19 +1,13 @@
-import { Router } from "express"
+import { Request, Response, Router } from "express"
 import express from "express"
-import bodyParser from "body-parser"
+import { json, urlencoded } from "body-parser"
 import multer from "multer"
 import path from "path"
 import url from "url"
-import { fileURLToPath } from 'url'
 import fs from "fs"
 
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-const { json, urlencoded } = bodyParser
-
 const router = Router()
-const streamResponses = new Set()
+const streamResponses: Set<Response> = new Set()
 
 router.use(multer().none())
 
@@ -42,7 +36,7 @@ router.post("/redirect", (request, response) => {
 })
 
 router.get("/redirect", (request, response) => {
-  const { path, ...query } = request.query
+  const { path, ...query } = request.query as any
   const pathname = path ?? "/src/tests/fixtures/one.html"
   const enctype = request.get("Content-Type")
   if (enctype) {
@@ -142,7 +136,7 @@ router.get("/messages", (request, response) => {
   streamResponses.add(response)
 })
 
-function receiveMessage(content, id, target) {
+function receiveMessage(content: string, id: string | null, target?: string) {
   const data = renderSSEData(renderMessage(content, id, target))
   for (const response of streamResponses) {
     console.log("delivering message to stream", response.socket?.remotePort)
@@ -150,7 +144,7 @@ function receiveMessage(content, id, target) {
   }
 }
 
-function renderMessage(content, id, target = "messages") {
+function renderMessage(content: string, id: string | null, target = "messages") {
   return `
     <turbo-stream id="${id}" action="append" target="${target}"><template>
       <div class="message">${escapeHTML(content)}</div>
@@ -158,7 +152,7 @@ function renderMessage(content, id, target = "messages") {
   `
 }
 
-function renderMessageForTargets(content, id, targets) {
+function renderMessageForTargets(content: string, id: string | null, targets: string) {
   return `
     <turbo-stream id="${id}" action="append" targets="${targets}"><template>
       <div class="message">${escapeHTML(content)}</div>
@@ -166,11 +160,11 @@ function renderMessageForTargets(content, id, targets) {
   `
 }
 
-function acceptsStreams(request) {
+function acceptsStreams(request: Request): boolean {
   return !!request.accepts("text/vnd.turbo-stream.html")
 }
 
-function renderSSEData(data) {
+function renderSSEData(data: any) {
   return (
     `${data}`
       .split("\n")
@@ -179,7 +173,7 @@ function renderSSEData(data) {
   )
 }
 
-function escapeHTML(html) {
+function escapeHTML(html: string) {
   return html.replace(/&/g, "&amp;").replace(/</g, "&lt;")
 }
 const app = express()
diff --git a/src/tests/unit/deprecated_adapter_support_tests.js b/src/tests/unit/deprecated_adapter_support_tests.js
deleted file mode 100644
index 577e8bbc7..000000000
--- a/src/tests/unit/deprecated_adapter_support_tests.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as Turbo from "../../index"
-import { assert } from "@open-wc/testing"
-
-class DeprecatedAdapterSupportTest {
-  locations = []
-  // Adapter interface
-  visitProposedToLocation(location, _options) {
-    this.locations.push(location)
-  }
-
-  visitStarted(visit) {
-    this.locations.push(visit.location)
-    visit.cancel()
-  }
-
-  visitCompleted(_visit) {}
-
-  visitFailed(_visit) {}
-
-  visitRequestStarted(_visit) {}
-
-  visitRequestCompleted(_visit) {}
-
-  visitRequestFailedWithStatusCode(_visit, _statusCode) {}
-
-  visitRequestFinished(_visit) {}
-
-  visitRendered(_visit) {}
-
-  formSubmissionStarted(_formSubmission) {}
-
-  formSubmissionFinished(_formSubmission) {}
-
-  pageInvalidated() {}
-}
-
-let adapter
-
-setup(() => {
-  adapter = new DeprecatedAdapterSupportTest()
-  Turbo.registerAdapter(adapter)
-})
-
-test("test visit proposal location includes deprecated absoluteURL property", async () => {
-  Turbo.navigator.proposeVisit(new URL(window.location.toString()))
-  assert.equal(adapter.locations.length, 1)
-
-  const [location] = adapter.locations
-  assert.equal(location.toString(), location.absoluteURL)
-})
-
-test("test visit start location includes deprecated absoluteURL property", async () => {
-  Turbo.navigator.startVisit(window.location.toString(), "123")
-  assert.equal(adapter.locations.length, 1)
-
-  const [location] = adapter.locations
-  assert.equal(location.toString(), location.absoluteURL)
-})
diff --git a/src/tests/unit/deprecated_adapter_support_tests.ts b/src/tests/unit/deprecated_adapter_support_tests.ts
new file mode 100644
index 000000000..a6207664b
--- /dev/null
+++ b/src/tests/unit/deprecated_adapter_support_tests.ts
@@ -0,0 +1,61 @@
+import { VisitOptions, Visit } from "../../core/drive/visit"
+import { FormSubmission } from "../../core/drive/form_submission"
+import { Adapter } from "../../core/native/adapter"
+import * as Turbo from "../../index"
+import { assert } from "@open-wc/testing"
+
+class DeprecatedAdapterSupportTest implements Adapter {
+  locations: any[] = []
+  // Adapter interface
+  visitProposedToLocation(location: URL, _options?: Partial<VisitOptions>): void {
+    this.locations.push(location)
+  }
+
+  visitStarted(visit: Visit): void {
+    this.locations.push(visit.location)
+    visit.cancel()
+  }
+
+  visitCompleted(_visit: Visit): void {}
+
+  visitFailed(_visit: Visit): void {}
+
+  visitRequestStarted(_visit: Visit): void {}
+
+  visitRequestCompleted(_visit: Visit): void {}
+
+  visitRequestFailedWithStatusCode(_visit: Visit, _statusCode: number): void {}
+
+  visitRequestFinished(_visit: Visit): void {}
+
+  visitRendered(_visit: Visit): void {}
+
+  formSubmissionStarted(_formSubmission: FormSubmission): void {}
+
+  formSubmissionFinished(_formSubmission: FormSubmission): void {}
+
+  pageInvalidated(): void {}
+}
+
+let adapter: DeprecatedAdapterSupportTest
+
+setup(() => {
+  adapter = new DeprecatedAdapterSupportTest()
+  Turbo.registerAdapter(adapter)
+})
+
+test("test visit proposal location includes deprecated absoluteURL property", async () => {
+  Turbo.navigator.proposeVisit(new URL(window.location.toString()))
+  assert.equal(adapter.locations.length, 1)
+
+  const [location] = adapter.locations
+  assert.equal(location.toString(), location.absoluteURL)
+})
+
+test("test visit start location includes deprecated absoluteURL property", async () => {
+  Turbo.navigator.startVisit(window.location.toString(), "123")
+  assert.equal(adapter.locations.length, 1)
+
+  const [location] = adapter.locations
+  assert.equal(location.toString(), location.absoluteURL)
+})
diff --git a/src/tests/unit/export_tests.js b/src/tests/unit/export_tests.ts
similarity index 54%
rename from src/tests/unit/export_tests.js
rename to src/tests/unit/export_tests.ts
index be46c8160..3da4e1d6c 100644
--- a/src/tests/unit/export_tests.js
+++ b/src/tests/unit/export_tests.ts
@@ -1,6 +1,36 @@
 import { assert } from "@open-wc/testing"
 import * as Turbo from "../../index"
 
+// ESBuild loader does not like these types.
+export type {
+  PageRenderer,
+  PageSnapshot,
+  FrameRenderer,
+  FrameElement,
+  StreamActions,
+  StreamElement,
+  StreamSourceElement,
+  TurboBeforeCacheEvent,
+  TurboBeforeFetchRequestEvent,
+  TurboBeforeFetchResponseEvent,
+  TurboBeforeFrameRenderEvent,
+  TurboBeforeRenderEvent,
+  TurboBeforeStreamRenderEvent,
+  TurboBeforeVisitEvent,
+  TurboClickEvent,
+  TurboFetchRequestErrorEvent,
+  TurboFrameLoadEvent,
+  TurboFrameMissingEvent,
+  TurboFrameRenderEvent,
+  TurboLoadEvent,
+  TurboRenderEvent,
+  TurboStreamAction,
+  TurboStreamActions,
+  TurboSubmitEndEvent,
+  TurboSubmitStartEvent,
+  TurboVisitEvent,
+} from "../../index"
+
 test("test Turbo interface", () => {
   assert.equal(typeof Turbo.start, "function")
   assert.equal(typeof Turbo.registerAdapter, "function")
diff --git a/src/tests/unit/stream_element_tests.js b/src/tests/unit/stream_element_tests.ts
similarity index 96%
rename from src/tests/unit/stream_element_tests.js
rename to src/tests/unit/stream_element_tests.ts
index 05ecc8589..ffef5212d 100644
--- a/src/tests/unit/stream_element_tests.js
+++ b/src/tests/unit/stream_element_tests.ts
@@ -3,7 +3,7 @@ import { nextAnimationFrame } from "../../util"
 import { DOMTestCase } from "../helpers/dom_test_case"
 import { assert } from "@open-wc/testing"
 
-function createStreamElement(action, target, templateElement) {
+function createStreamElement(action: string | null, target: string | null, templateElement?: HTMLTemplateElement) {
   const element = new StreamElement()
   if (action) element.setAttribute("action", action)
   if (target) element.setAttribute("target", target)
@@ -11,7 +11,7 @@ function createStreamElement(action, target, templateElement) {
   return element
 }
 
-function createTemplateElement(html) {
+function createTemplateElement(html: string) {
   const element = document.createElement("template")
   element.innerHTML = html
   return element
@@ -19,7 +19,7 @@ function createTemplateElement(html) {
 
 export class StreamElementTests extends DOMTestCase {}
 
-let subject
+let subject: StreamElementTests
 
 setup(() => {
   subject = new StreamElementTests()
diff --git a/src/util.js b/src/util.ts
similarity index 64%
rename from src/util.js
rename to src/util.ts
index 9710deb86..dc09dd1bc 100644
--- a/src/util.js
+++ b/src/util.ts
@@ -1,4 +1,12 @@
-export function activateScriptElement(element) {
+import { Action } from "./core/types"
+
+export type DispatchOptions<T extends CustomEvent> = {
+  target: EventTarget
+  cancelable: boolean
+  detail: T["detail"]
+}
+
+export function activateScriptElement(element: HTMLScriptElement) {
   if (element.getAttribute("data-turbo-eval") == "false") {
     return element
   } else {
@@ -14,27 +22,30 @@ export function activateScriptElement(element) {
   }
 }
 
-function copyElementAttributes(destinationElement, sourceElement) {
+function copyElementAttributes(destinationElement: Element, sourceElement: Element) {
   for (const { name, value } of sourceElement.attributes) {
     destinationElement.setAttribute(name, value)
   }
 }
 
-export function createDocumentFragment(html) {
+export function createDocumentFragment(html: string): DocumentFragment {
   const template = document.createElement("template")
   template.innerHTML = html
   return template.content
 }
 
-export function dispatch(eventName, { target, cancelable, detail } = {}) {
-  const event = new CustomEvent(eventName, {
+export function dispatch<T extends CustomEvent>(
+  eventName: string,
+  { target, cancelable, detail }: Partial<DispatchOptions<T>> = {}
+) {
+  const event = new CustomEvent<T["detail"]>(eventName, {
     cancelable,
     bubbles: true,
     composed: true,
-    detail
+    detail,
   })
 
-  if (target && target.isConnected) {
+  if (target && (target as Element).isConnected) {
     target.dispatchEvent(event)
   } else {
     document.documentElement.dispatchEvent(event)
@@ -44,11 +55,11 @@ export function dispatch(eventName, { target, cancelable, detail } = {}) {
 }
 
 export function nextAnimationFrame() {
-  return new Promise((resolve) => requestAnimationFrame(() => resolve()))
+  return new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
 }
 
 export function nextEventLoopTick() {
-  return new Promise((resolve) => setTimeout(() => resolve(), 0))
+  return new Promise<void>((resolve) => setTimeout(() => resolve(), 0))
 }
 
 export function nextMicrotask() {
@@ -59,14 +70,14 @@ export function parseHTMLDocument(html = "") {
   return new DOMParser().parseFromString(html, "text/html")
 }
 
-export function unindent(strings, ...values) {
+export function unindent(strings: TemplateStringsArray, ...values: any[]): string {
   const lines = interpolate(strings, values).replace(/^\n/, "").split("\n")
   const match = lines[0].match(/^\s+/)
   const indent = match ? match[0].length : 0
   return lines.map((line) => line.slice(indent)).join("\n")
 }
 
-function interpolate(strings, values) {
+function interpolate(strings: TemplateStringsArray, values: any[]) {
   return strings.reduce((result, string, i) => {
     const value = values[i] == undefined ? "" : values[i]
     return result + string + value
@@ -89,7 +100,7 @@ export function uuid() {
     .join("")
 }
 
-export function getAttribute(attributeName, ...elements) {
+export function getAttribute(attributeName: string, ...elements: (Element | undefined)[]): string | null {
   for (const value of elements.map((element) => element?.getAttribute(attributeName))) {
     if (typeof value == "string") return value
   }
@@ -97,11 +108,11 @@ export function getAttribute(attributeName, ...elements) {
   return null
 }
 
-export function hasAttribute(attributeName, ...elements) {
+export function hasAttribute(attributeName: string, ...elements: (Element | undefined)[]): boolean {
   return elements.some((element) => element && element.hasAttribute(attributeName))
 }
 
-export function markAsBusy(...elements) {
+export function markAsBusy(...elements: Element[]) {
   for (const element of elements) {
     if (element.localName == "turbo-frame") {
       element.setAttribute("busy", "")
@@ -110,7 +121,7 @@ export function markAsBusy(...elements) {
   }
 }
 
-export function clearBusyState(...elements) {
+export function clearBusyState(...elements: Element[]) {
   for (const element of elements) {
     if (element.localName == "turbo-frame") {
       element.removeAttribute("busy")
@@ -120,7 +131,7 @@ export function clearBusyState(...elements) {
   }
 }
 
-export function waitForLoad(element, timeoutInMilliseconds = 2000) {
+export function waitForLoad(element: HTMLLinkElement, timeoutInMilliseconds = 2000): Promise<void> {
   return new Promise((resolve) => {
     const onComplete = () => {
       element.removeEventListener("error", onComplete)
@@ -134,7 +145,7 @@ export function waitForLoad(element, timeoutInMilliseconds = 2000) {
   })
 }
 
-export function getHistoryMethodForAction(action) {
+export function getHistoryMethodForAction(action: Action) {
   switch (action) {
     case "replace":
       return history.replaceState
@@ -144,26 +155,26 @@ export function getHistoryMethodForAction(action) {
   }
 }
 
-export function isAction(action) {
+export function isAction(action: any): action is Action {
   return action == "advance" || action == "replace" || action == "restore"
 }
 
-export function getVisitAction(...elements) {
+export function getVisitAction(...elements: (Element | undefined)[]): Action | null {
   const action = getAttribute("data-turbo-action", ...elements)
 
   return isAction(action) ? action : null
 }
 
-export function getMetaElement(name) {
+export function getMetaElement(name: string): HTMLMetaElement | null {
   return document.querySelector(`meta[name="${name}"]`)
 }
 
-export function getMetaContent(name) {
+export function getMetaContent(name: string) {
   const element = getMetaElement(name)
   return element && element.content
 }
 
-export function setMetaContent(name, content) {
+export function setMetaContent(name: string, content: string) {
   let element = getMetaElement(name)
 
   if (!element) {
@@ -178,10 +189,11 @@ export function setMetaContent(name, content) {
   return element
 }
 
-export function findClosestRecursively(element, selector) {
+export function findClosestRecursively<E extends Element>(element: Element | null, selector: string): E | undefined {
   if (element instanceof Element) {
     return (
-      element.closest(selector) || findClosestRecursively(element.assignedSlot || element.getRootNode()?.host, selector)
+      element.closest<E>(selector) ||
+      findClosestRecursively(element.assignedSlot || (element.getRootNode() as ShadowRoot)?.host, selector)
     )
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..617561f4c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "lib": [ "dom", "dom.iterable", "esnext" ],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "rootDir": "src",
+    "strict": true,
+    "target": "es2017",
+    "noEmit": true,
+    "removeComments": true,
+    "skipLibCheck": true,
+    "isolatedModules": true
+  },
+  "exclude": [ "dist", "src/tests/fixtures", "playwright.config.ts" ]
+}
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index 039e6cbec..c97ae995c 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -9,7 +9,7 @@ export default {
     playwrightLauncher({ product: 'webkit' }),
   ],
   nodeResolve: true,
-  files: "./src/tests/unit/**/*_tests.js",
+  files: "./src/tests/unit/**/*_tests.ts",
   testFramework: {
     config: {
       ui: "tdd"
diff --git a/yarn.lock b/yarn.lock
index 6c107f1db..fb133a3b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23,6 +23,13 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@cspotcode/source-map-support@^0.8.0":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
+  integrity sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==
+  dependencies:
+    "@jridgewell/trace-mapping" "0.3.9"
+
 "@esbuild/linux-loong64@0.14.54":
   version "0.14.54"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028"
@@ -69,11 +76,29 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
+  integrity sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
+
 "@jridgewell/sourcemap-codec@1.4.14":
   version "1.4.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.13"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
+  integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
+
+"@jridgewell/trace-mapping@0.3.9":
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9"
+  integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@jridgewell/trace-mapping@^0.3.12":
   version "0.3.17"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
@@ -235,6 +260,26 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@tsconfig/node10@^1.0.7":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2"
+  integrity sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==
+
+"@tsconfig/node12@^1.0.7":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node12/-/node12-1.0.11.tgz#ee3def1f27d9ed66dac6e46a295cffb0152e058d"
+  integrity sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==
+
+"@tsconfig/node14@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.3.tgz#e4386316284f00b98435bf40f72f75a09dabf6c1"
+  integrity sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==
+
+"@tsconfig/node16@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.3.tgz#472eaab5f15c1ffdd7f8628bd4c4f753995ec79e"
+  integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
+
 "@types/accepts@*":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/accepts/-/accepts-1.3.5.tgz#c34bec115cfc746e04fe5a059df4ce7e7b391575"
@@ -411,6 +456,13 @@
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-8.2.3.tgz#bbeb55fbc73f28ea6de601fbfa4613f58d785323"
   integrity sha512-ekGvFhFgrc2zYQoX4JeZPmVzZxw6Dtllga7iGHzfbYIYkAMUx/sAFP2GdFpLff+vdHXu5fl7WX9AT+TtqYcsyw==
 
+"@types/multer@^1.4.5":
+  version "1.4.5"
+  resolved "https://registry.npmjs.org/@types/multer/-/multer-1.4.5.tgz"
+  integrity sha512-9b/0a8JyrR0r2nQhL73JR86obWL7cogfX12augvlrvcpciCo/hkvEsgu80Z4S2g2DHGVXHr8pUIi1VhqFJ8Ufw==
+  dependencies:
+    "@types/express" "*"
+
 "@types/node@*":
   version "14.14.11"
   resolved "https://registry.npmjs.org/@types/node/-/node-14.14.11.tgz"
@@ -506,6 +558,16 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+"@typescript-eslint/parser@^5.50.0":
+  version "5.50.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.50.0.tgz#a33f44b2cc83d1b7176ec854fbecd55605b0b032"
+  integrity sha512-KCcSyNaogUDftK2G9RXfQyOCt51uB5yqC6pkUYqhYh8Kgt+DwR5M0EwEAxGPy/+DH6hnmKeGsNhiZRQxjH71uQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.50.0"
+    "@typescript-eslint/types" "5.50.0"
+    "@typescript-eslint/typescript-estree" "5.50.0"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@5.50.0":
   version "5.50.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.50.0.tgz#90b8a3b337ad2c52bbfe4eac38f9164614e40584"
@@ -765,6 +827,16 @@ acorn-jsx@^5.3.1:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+acorn-walk@^8.1.1:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
+acorn@^8.4.1:
+  version "8.8.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
+  integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
+
 acorn@^8.7.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
@@ -826,6 +898,11 @@ append-field@^1.0.0:
   resolved "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz"
   integrity sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY=
 
+arg@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
+  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
+
 arg@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz"
@@ -1212,6 +1289,11 @@ core-util-is@~1.0.0:
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
+create-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
+  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
+
 cross-fetch@3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
@@ -1331,6 +1413,11 @@ dicer@0.2.5:
     readable-stream "1.1.x"
     streamsearch "0.1.2"
 
+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
 diff@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40"
@@ -1524,6 +1611,18 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
+eslint-config-prettier@^8.5.0:
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.6.0.tgz#dec1d29ab728f4fa63061774e1672ac4e363d207"
+  integrity sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==
+
+eslint-plugin-prettier@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
+  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -1704,6 +1803,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -2359,6 +2463,11 @@ make-dir@^3.0.0:
   dependencies:
     semver "^6.0.0"
 
+make-error@^1.1.1:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
+  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+
 marky@^1.2.2:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/marky/-/marky-1.2.5.tgz#55796b688cbd72390d2d399eaaf1832c9413e3c0"
@@ -2721,6 +2830,18 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
+  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
@@ -3177,11 +3298,35 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+ts-node@^10.9.1:
+  version "10.9.1"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b"
+  integrity sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==
+  dependencies:
+    "@cspotcode/source-map-support" "^0.8.0"
+    "@tsconfig/node10" "^1.0.7"
+    "@tsconfig/node12" "^1.0.7"
+    "@tsconfig/node14" "^1.0.0"
+    "@tsconfig/node16" "^1.0.2"
+    acorn "^8.4.1"
+    acorn-walk "^8.1.1"
+    arg "^4.1.0"
+    create-require "^1.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    v8-compile-cache-lib "^3.0.1"
+    yn "3.1.1"
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tsscmp@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
@@ -3229,6 +3374,11 @@ typedarray@^0.0.6:
   resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript@^4.9.5:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+
 typical@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/typical/-/typical-4.0.0.tgz#cbeaff3b9d7ae1e2bbfaf5a4e6f11eccfde94fc4"
@@ -3274,6 +3424,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+v8-compile-cache-lib@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
+  integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
+
 v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -3385,3 +3540,8 @@ ylru@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.3.2.tgz#0de48017473275a4cbdfc83a1eaf67c01af8a785"
   integrity sha512-RXRJzMiK6U2ye0BlGGZnmpwJDPgakn6aNQ0A7gHRbD4I0uvK4TW6UqkK1V0pp9jskjJBAXd3dRrbzWkqJ+6cxA==
+
+yn@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
+  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==