diff --git a/client-src/clients/SockJSClient.js b/client-src/clients/SockJSClient.js
index aa0c057fec..cd9d67ad48 100644
--- a/client-src/clients/SockJSClient.js
+++ b/client-src/clients/SockJSClient.js
@@ -3,6 +3,9 @@ import { log } from "../utils/log.js";
 
 /** @typedef {import("../index").EXPECTED_ANY} EXPECTED_ANY */
 
+/**
+ * @implements {CommunicationClient}
+ */
 export default class SockJSClient {
   /**
    * @param {string} url url
@@ -12,13 +15,9 @@ export default class SockJSClient {
     this.sock = new SockJS(
       url.replace(/^ws:/i, "http:").replace(/^wss:/i, "https:"),
     );
-    this.sock.onerror =
-      /**
-       * @param {Error} error error
-       */
-      (error) => {
-        log.error(error);
-      };
+    this.sock.onerror = (error) => {
+      log.error(error);
+    };
   }
 
   /**
@@ -40,12 +39,8 @@ export default class SockJSClient {
    * @param {(...args: EXPECTED_ANY[]) => void} fn function
    */
   onMessage(fn) {
-    this.sock.onmessage =
-      /**
-       * @param {Error & { data: string }} err error
-       */
-      (err) => {
-        fn(err.data);
-      };
+    this.sock.onmessage = (err) => {
+      fn(err.data);
+    };
   }
 }
diff --git a/client-src/clients/WebSocketClient.js b/client-src/clients/WebSocketClient.js
index 8aa8bb85c4..de7e0ea6a1 100644
--- a/client-src/clients/WebSocketClient.js
+++ b/client-src/clients/WebSocketClient.js
@@ -2,6 +2,9 @@ import { log } from "../utils/log.js";
 
 /** @typedef {import("../index").EXPECTED_ANY} EXPECTED_ANY */
 
+/**
+ * @implements {CommunicationClient}
+ */
 export default class WebSocketClient {
   /**
    * @param {string} url url to connect
diff --git a/client-src/globals.d.ts b/client-src/globals.d.ts
new file mode 100644
index 0000000000..a6aeff9c99
--- /dev/null
+++ b/client-src/globals.d.ts
@@ -0,0 +1,24 @@
+declare interface CommunicationClient {
+  onOpen(fn: (...args: any[]) => void): void;
+  onClose(fn: (...args: any[]) => void): void;
+  onMessage(fn: (...args: any[]) => void): void;
+}
+
+declare interface CommunicationClientConstructor {
+  new (url: string): CommunicationClient; // Defines a constructor that takes a string and returns a GreeterInstance
+}
+
+declare const __webpack_dev_server_client__:
+  | CommunicationClientConstructor
+  | { default: CommunicationClientConstructor }
+  | undefined;
+
+declare module "ansi-html-community" {
+  function ansiHtmlCommunity(str: string): string;
+
+  namespace ansiHtmlCommunity {
+    function setColors(colors: Record<string, string | string[]>): void;
+  }
+
+  export = ansiHtmlCommunity;
+}
diff --git a/client-src/index.js b/client-src/index.js
index 930fc4ba48..8c1ac0baeb 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -1,6 +1,9 @@
 /* global __resourceQuery, __webpack_hash__ */
 /// <reference types="webpack/module" />
+
+// @ts-expect-error
 import hotEmitter from "webpack/hot/emitter.js";
+// @ts-expect-error
 import webpackHotLog from "webpack/hot/log.js";
 import { createOverlay, formatProblem } from "./overlay.js";
 import { defineProgressElement, isProgressSupported } from "./progress.js";
@@ -11,21 +14,31 @@ import sendMessage from "./utils/sendMessage.js";
 // eslint-disable-next-line jsdoc/no-restricted-syntax
 /** @typedef {any} EXPECTED_ANY */
 
+/**
+ * @typedef {object} RawOverlayOptions
+ * @property {string=} warnings warnings
+ * @property {string=} errors errors
+ * @property {string=} runtimeErrors runtime errors
+ * @property {string=} trustedTypesPolicyName trusted types policy name
+ */
+
 /**
  * @typedef {object} OverlayOptions
- * @property {(boolean | (error: Error) => boolean)=} warnings warnings
- * @property {(boolean | (error: Error) => boolean)=} errors errors
- * @property {(boolean | (error: Error) => boolean)=} runtimeErrors runtime errors
+ * @property {(boolean | ((error: Error) => boolean))=} warnings warnings
+ * @property {(boolean | ((error: Error) => boolean))=} errors errors
+ * @property {(boolean | ((error: Error) => boolean))=} runtimeErrors runtime errors
  * @property {string=} trustedTypesPolicyName trusted types policy name
  */
 
+/** @typedef {false | true | "none" | "error" | "warn" | "info" | "log" | "verbose"} LogLevel */
+
 /**
  * @typedef {object} Options
  * @property {boolean} hot true when hot enabled, otherwise false
  * @property {boolean} liveReload true when live reload enabled, otherwise false
  * @property {boolean} progress true when need to show progress, otherwise false
  * @property {boolean | OverlayOptions} overlay overlay options
- * @property {string=} logging logging level
+ * @property {LogLevel=} logging logging level
  * @property {number=} reconnect count of allowed reconnection
  */
 
@@ -37,21 +50,28 @@ import sendMessage from "./utils/sendMessage.js";
  */
 
 /**
- * @param {boolean | { warnings?: boolean | string, errors?: boolean | string, runtimeErrors?: boolean | string }} overlayOptions overlay options
+ * @param {boolean | RawOverlayOptions | OverlayOptions} overlayOptions overlay options
  */
 const decodeOverlayOptions = (overlayOptions) => {
   if (typeof overlayOptions === "object") {
-    for (const property of ["warnings", "errors", "runtimeErrors"]) {
+    for (const property_ of ["warnings", "errors", "runtimeErrors"]) {
+      const property =
+        /** @type {keyof Omit<RawOverlayOptions, "trustedTypesPolicyName">} */
+        (property_);
+
       if (typeof overlayOptions[property] === "string") {
         const overlayFilterFunctionString = decodeURIComponent(
           overlayOptions[property],
         );
 
-        // eslint-disable-next-line no-new-func
-        overlayOptions[property] = new Function(
-          "message",
-          `var callback = ${overlayFilterFunctionString}
+        /** @type {OverlayOptions} */
+        (overlayOptions)[property] = /** @type {(error: Error) => boolean} */ (
+          // eslint-disable-next-line no-new-func
+          new Function(
+            "message",
+            `var callback = ${overlayFilterFunctionString}
         return callback(message)`,
+          )
         );
       }
     }
@@ -73,7 +93,7 @@ const getCurrentScriptSource = () => {
   // `document.currentScript` is the most accurate way to find the current script,
   // but is not supported in all browsers.
   if (document.currentScript) {
-    return document.currentScript.getAttribute("src");
+    return /** @type {string} */ (document.currentScript.getAttribute("src"));
   }
 
   // Fallback to getting all scripts running in the document.
@@ -94,12 +114,15 @@ const getCurrentScriptSource = () => {
   throw new Error("[webpack-dev-server] Failed to get current script source.");
 };
 
+/** @typedef {{ hot?: string, ["live-reload"]?: string, progress?: string, reconnect?: string, logging?: LogLevel, overlay?: string, fromCurrentScript?: boolean }} AdditionalParsedURL */
+/** @typedef {Partial<URL> & AdditionalParsedURL} ParsedURL */
+
 /**
  * @param {string} resourceQuery resource query
- * @returns {{ [key: string]: string | boolean }} parsed URL
+ * @returns {ParsedURL} parsed URL
  */
 const parseURL = (resourceQuery) => {
-  /** @type {{ [key: string]: string }} */
+  /** @type {ParsedURL} */
   let result = {};
 
   if (typeof resourceQuery === "string" && resourceQuery !== "") {
@@ -108,7 +131,8 @@ const parseURL = (resourceQuery) => {
     for (let i = 0; i < searchParams.length; i++) {
       const pair = searchParams[i].split("=");
 
-      result[pair[0]] = decodeURIComponent(pair[1]);
+      /** @type {EXPECTED_ANY} */
+      (result)[pair[0]] = decodeURIComponent(pair[1]);
     }
   } else {
     // Else, get the url from the <script> this file was called with.
@@ -137,6 +161,9 @@ const parseURL = (resourceQuery) => {
 
 const parsedResourceQuery = parseURL(__resourceQuery);
 
+/** @typedef {{ ["Hot Module Replacement"]: boolean, ["Live Reloading"]: boolean, Progress: boolean, Overlay: boolean }} Features */
+
+/** @type {Features} */
 const enabledFeatures = {
   "Hot Module Replacement": false,
   "Live Reloading": false,
@@ -197,7 +224,7 @@ if (typeof parsedResourceQuery.reconnect !== "undefined") {
 }
 
 /**
- * @param {string} level level
+ * @param {false | true | "none" | "error" | "warn" | "info" | "log" | "verbose"} level level
  */
 const setAllLogLevel = (level) => {
   // This is needed because the HMR logger operate separately from dev server logger
@@ -211,6 +238,9 @@ if (options.logging) {
   setAllLogLevel(options.logging);
 }
 
+/**
+ * @param {Features} features features
+ */
 const logEnabledFeatures = (features) => {
   const listEnabledFeatures = Object.keys(features);
   if (!features || listEnabledFeatures.length === 0) {
@@ -221,7 +251,7 @@ const logEnabledFeatures = (features) => {
 
   // Server started: Hot Module Replacement enabled, Live Reloading enabled, Overlay disabled.
   for (let i = 0; i < listEnabledFeatures.length; i++) {
-    const key = listEnabledFeatures[i];
+    const key = /** @type {keyof Features} */ (listEnabledFeatures[i]);
     logString += ` ${key} ${features[key] ? "enabled" : "disabled"},`;
   }
   // replace last comma with a period
@@ -297,6 +327,7 @@ const reloadApp = ({ hot, liveReload }, currentStatus) => {
   }
   // allow refreshing the page only if liveReload isn't disabled
   else if (liveReload && allowToLiveReload) {
+    /** @type {Window} */
     let rootWindow = self;
 
     // use parent window for reload (in case we're in an iframe with no valid src)
@@ -400,7 +431,7 @@ const onSocketMessage = {
     options.progress = value;
   },
   /**
-   * @param {{ pluginName?: string, percent: number, msg: string }} data date with progress
+   * @param {{ pluginName?: string, percent: string, msg: string }} data date with progress
    */
   "progress-update": function progressUpdate(data) {
     if (options.progress) {
@@ -625,7 +656,7 @@ const formatURL = (objURL) => {
 };
 
 /**
- * @param {URL & { fromCurrentScript?: boolean }} parsedURL parsed URL
+ * @param {ParsedURL} parsedURL parsed URL
  * @returns {string} socket URL
  */
 const createSocketURL = (parsedURL) => {
diff --git a/client-src/modules/logger/index.js b/client-src/modules/logger/index.js
index 5b07708739..25f2b95c76 100644
--- a/client-src/modules/logger/index.js
+++ b/client-src/modules/logger/index.js
@@ -1 +1,2 @@
+// @ts-expect-error
 export { default } from "webpack/lib/logging/runtime.js";
diff --git a/client-src/overlay.js b/client-src/overlay.js
index ddc5e5b690..0ba049c13a 100644
--- a/client-src/overlay.js
+++ b/client-src/overlay.js
@@ -6,8 +6,9 @@ import ansiHTML from "ansi-html-community";
 /** @typedef {import("./index").EXPECTED_ANY} EXPECTED_ANY */
 
 /**
- * @type {(input: string, position: number) => string}
+ * @type {(input: string, position: number) => number | undefined}
  */
+// @ts-expect-error
 const getCodePoint = String.prototype.codePointAt
   ? (input, position) => input.codePointAt(position)
   : (input, position) =>
@@ -65,7 +66,7 @@ function encode(text) {
   }
 
   return replaceUsingRegExp(text, /[<>'"&]/g, (input) => {
-    let result = references[input];
+    let result = references[/** @type {keyof typeof references} */ (input)];
     if (!result) {
       const code =
         input.length > 1 ? getCodePoint(input, 0) : input.charCodeAt(0);
@@ -76,24 +77,24 @@ function encode(text) {
 }
 
 /**
- * @typedef {object} StateDefinitions
- * @property {{ [event: string]: { target: string; actions?: Array<string> } }=} on event
+ * @typedef {object} Context
+ * @property {'warning' | 'error'} level level
+ * @property {(string  | Message)[]} messages messages
+ * @property {'build' | 'runtime'} messageSource message source
  */
 
-/** @typedef {Record<string, EXPECTED_ANY>} Context */
-
 /** @typedef {{ type: string } & Record<string, EXPECTED_ANY>} Event */
 
 /**
  * @typedef {object} Options
- * @property {{ [state: string]: StateDefinitions }} states states
+ * @property {{ [state: string]: { on: Record<string, { target: string; actions?: Array<string> }> } }} states states
  * @property {Context} context context
  * @property {string} initial initial
  */
 
 /**
  * @typedef {object} Implementation
- * @property {{ [actionName: string]: (ctx: Context, event: Event) => EXPECTED_ANY }} actions actions
+ * @property {{ [actionName: string]: (ctx: Context, event: Event) => Context | void }} actions actions
  */
 
 /**
@@ -148,7 +149,7 @@ function createMachine({ states, context, initial }, { actions }) {
 /**
  * @typedef {object} ShowOverlayData
  * @property {'warning' | 'error'} level level
- * @property {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages messages
+ * @property {(string  | Message)[]} messages messages
  * @property {'build' | 'runtime'} messageSource message source
  */
 
@@ -248,7 +249,7 @@ const createOverlayMachine = (options) => {
 
 /**
  * @param {Error} error error
- * @returns {string[]} stack
+ * @returns {undefined | string[]} stack
  */
 const parseErrorToStacks = (error) => {
   if (!error || !(error instanceof Error)) {
@@ -311,10 +312,10 @@ const msgStyles = {
 };
 const iframeStyle = {
   position: "fixed",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
+  top: "0px",
+  left: "0px",
+  right: "0px",
+  bottom: "0px",
   width: "100vw",
   height: "100vh",
   border: "none",
@@ -323,10 +324,10 @@ const iframeStyle = {
 const containerStyle = {
   position: "fixed",
   boxSizing: "border-box",
-  left: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
+  left: "0px",
+  top: "0px",
+  right: "0px",
+  bottom: "0px",
   width: "100vw",
   height: "100vh",
   fontSize: "large",
@@ -354,8 +355,8 @@ const dismissButtonStyle = {
   padding: "1rem",
   cursor: "pointer",
   position: "absolute",
-  right: 0,
-  top: 0,
+  right: "0px",
+  top: "0px",
   backgroundColor: "transparent",
   border: "none",
 };
@@ -388,9 +389,11 @@ const colors = {
 
 ansiHTML.setColors(colors);
 
+/** @typedef {Error & { file?: string, moduleName?: string, moduleIdentifier?: string, loc?: string, message?: string; stack?: string | string[] }} Message */
+
 /**
  * @param {string} type type
- * @param {string  | { file?: string, moduleName?: string, loc?: string, message?: string; stack?: string[] }} item item
+ * @param {string | Message} item item
  * @returns {{ header: string, body: string }} formatted problem
  */
 const formatProblem = (type, item) => {
@@ -418,7 +421,7 @@ const formatProblem = (type, item) => {
     body += item.message || "";
   }
 
-  if (Array.isArray(item.stack)) {
+  if (typeof item !== "string" && Array.isArray(item.stack)) {
     item.stack.forEach((stack) => {
       if (typeof stack === "string") {
         body += `\r\n${stack}`;
@@ -431,8 +434,8 @@ const formatProblem = (type, item) => {
 
 /**
  * @typedef {object} CreateOverlayOptions
- * @property {string | null} trustedTypesPolicyName trusted types policy name
- * @property {(boolean | (error: Error) => void)=} catchRuntimeError runtime error catcher
+ * @property {(false | string)=} trustedTypesPolicyName trusted types policy name
+ * @property {(boolean | ((error: Error) => void))=} catchRuntimeError runtime error catcher
  */
 
 /**
@@ -448,21 +451,25 @@ const createOverlay = (options) => {
   let headerElement;
   /** @type {Array<(element: HTMLDivElement) => void>} */
   let onLoadQueue = [];
-  /** @type {TrustedTypePolicy | undefined} */
+  /** @type {Omit<TrustedTypePolicy, "createScript" | "createScriptURL"> | undefined} */
   let overlayTrustedTypesPolicy;
 
+  /** @typedef {Extract<keyof CSSStyleDeclaration, "string">} CSSStyleDeclarationKeys */
+
   /**
    * @param {HTMLElement} element element
-   * @param {CSSStyleDeclaration} style style
+   * @param {Partial<CSSStyleDeclaration>} style style
    */
   function applyStyle(element, style) {
     Object.keys(style).forEach((prop) => {
-      element.style[prop] = style[prop];
+      element.style[/** @type {CSSStyleDeclarationKeys} */ (prop)] =
+        /** @type {string} */
+        (style[/** @type {CSSStyleDeclarationKeys} */ (prop)]);
     });
   }
 
   /**
-   * @param {string | null} trustedTypesPolicyName trusted types police name
+   * @param {string | false | undefined} trustedTypesPolicyName trusted types police name
    */
   function createContainer(trustedTypesPolicyName) {
     // Enable Trusted Types if they are available in the current browser.
@@ -537,10 +544,11 @@ const createOverlay = (options) => {
 
   /**
    * @param {(element: HTMLDivElement) => void} callback callback
-   * @param {string | null} trustedTypesPolicyName trusted types policy name
+   * @param {string | false | undefined} trustedTypesPolicyName trusted types policy name
    */
   function ensureOverlayExists(callback, trustedTypesPolicyName) {
     if (containerElement) {
+      // @ts-expect-error https://github.com/microsoft/TypeScript/issues/30024
       containerElement.innerHTML = overlayTrustedTypesPolicy
         ? overlayTrustedTypesPolicy.createHTML("")
         : "";
@@ -578,13 +586,14 @@ const createOverlay = (options) => {
   // Compilation with errors (e.g. syntax error or missing modules).
   /**
    * @param {string} type type
-   * @param {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages messages
-   * @param {string | null} trustedTypesPolicyName trusted types policy name
+   * @param {(string | Message)[]} messages messages
+   * @param {undefined | false | string} trustedTypesPolicyName trusted types policy name
    * @param {'build' | 'runtime'} messageSource message source
    */
   function show(type, messages, trustedTypesPolicyName, messageSource) {
     ensureOverlayExists(() => {
-      headerElement.innerText =
+      /** @type {HTMLDivElement} */
+      (headerElement).innerText =
         messageSource === "runtime"
           ? "Uncaught runtime errors:"
           : "Compiled with problems:";
@@ -604,10 +613,10 @@ const createOverlay = (options) => {
         typeElement.innerText = header;
         applyStyle(typeElement, msgTypeStyle);
 
-        if (message.moduleIdentifier) {
+        if (typeof message !== "string" && message.moduleIdentifier) {
           applyStyle(typeElement, { cursor: "pointer" });
           // element.dataset not supported in IE
-          typeElement.setAttribute("data-can-open", true);
+          typeElement.setAttribute("data-can-open", "true");
           typeElement.addEventListener("click", () => {
             fetch(
               `/webpack-dev-server/open-editor?fileName=${message.moduleIdentifier}`,
@@ -620,6 +629,7 @@ const createOverlay = (options) => {
         const messageTextNode = document.createElement("div");
         applyStyle(messageTextNode, msgTextStyle);
 
+        // @ts-expect-error https://github.com/microsoft/TypeScript/issues/30024
         messageTextNode.innerHTML = overlayTrustedTypesPolicy
           ? overlayTrustedTypesPolicy.createHTML(text)
           : text;
diff --git a/client-src/progress.js b/client-src/progress.js
index 711d91c0f5..21db9cf777 100644
--- a/client-src/progress.js
+++ b/client-src/progress.js
@@ -23,6 +23,7 @@ export function defineProgressElement() {
       this.animationTimer = null;
     }
 
+    // @ts-expect-error
     #reset() {
       clearTimeout(this.animationTimer);
       this.animationTimer = null;
@@ -34,7 +35,8 @@ export function defineProgressElement() {
         this.type === "circular"
           ? WebpackDevServerProgress.#circularTemplate()
           : WebpackDevServerProgress.#linearTemplate();
-      this.shadowRoot.innerHTML = innerHTML;
+      /** @type {ShadowRoot} */
+      (this.shadowRoot).innerHTML = innerHTML;
 
       const progressValue = this.getAttribute("progress");
       this.initialProgress = progressValue ? Number(progressValue) : 0;
@@ -42,6 +44,7 @@ export function defineProgressElement() {
       this.#update(this.initialProgress);
     }
 
+    // @ts-expect-error
     static #circularTemplate() {
       return `
         <style>
@@ -108,6 +111,7 @@ export function defineProgressElement() {
       `;
     }
 
+    // @ts-expect-error
     static #linearTemplate() {
       return `
         <style>
@@ -153,6 +157,11 @@ export function defineProgressElement() {
       return ["progress", "type"];
     }
 
+    /**
+     * @param {string} name name
+     * @param {string} oldValue old value
+     * @param {string} newValue new value
+     */
     attributeChangedCallback(name, oldValue, newValue) {
       if (name === "progress") {
         this.#update(Number(newValue));
@@ -161,15 +170,26 @@ export function defineProgressElement() {
       }
     }
 
+    /**
+     * @param {number} percent percent
+     */
+    // @ts-expect-error
     #update(percent) {
-      const element = this.shadowRoot.querySelector("#progress");
+      const shadowRoot = /** @type {ShadowRoot} */ (this.shadowRoot);
+      const element =
+        /** @type {HTMLElement} */
+        (shadowRoot.querySelector("#progress"));
       if (this.type === "circular") {
-        const path = this.shadowRoot.querySelector("path");
-        const value = this.shadowRoot.querySelector("#percent-value");
+        const path =
+          /** @type {SVGPathElement} */
+          (shadowRoot.querySelector("path"));
+        const value =
+          /** @type {HTMLElement} */
+          (shadowRoot.querySelector("#percent-value"));
         const offset = ((100 - percent) / 100) * this.maxDashOffset;
 
-        path.style.strokeDashoffset = offset;
-        value.textContent = percent;
+        path.style.strokeDashoffset = String(offset);
+        value.textContent = String(percent);
       } else {
         element.style.width = `${percent}%`;
       }
@@ -181,13 +201,21 @@ export function defineProgressElement() {
       }
     }
 
+    // @ts-expect-error
     #show() {
-      const element = this.shadowRoot.querySelector("#progress");
+      const shadowRoot = /** @type {ShadowRoot} */ (this.shadowRoot);
+      const element =
+        /** @type {HTMLElement} */
+        (shadowRoot.querySelector("#progress"));
       element.classList.remove("hidden");
     }
 
+    // @ts-expect-error
     #hide() {
-      const element = this.shadowRoot.querySelector("#progress");
+      const shadowRoot = /** @type {ShadowRoot} */ (this.shadowRoot);
+      const element =
+        /** @type {HTMLElement} */
+        (shadowRoot.querySelector("#progress"));
       if (this.type === "circular") {
         element.classList.add("disappear");
         element.addEventListener(
diff --git a/client-src/socket.js b/client-src/socket.js
index 4d74c160ae..7fa045a06a 100644
--- a/client-src/socket.js
+++ b/client-src/socket.js
@@ -3,14 +3,22 @@
 import WebSocketClient from "./clients/WebSocketClient.js";
 import { log } from "./utils/log.js";
 
-/** @typedef {import("../index").EXPECTED_ANY} EXPECTED_ANY */
+/** @typedef {import("./index.js").EXPECTED_ANY} EXPECTED_ANY */
+/** @typedef {import("./clients/SockJSClient")} SockJSClient */
 
 // this WebsocketClient is here as a default fallback, in case the client is not injected
+/** @type {CommunicationClientConstructor} */
 const Client =
   typeof __webpack_dev_server_client__ !== "undefined"
-    ? typeof __webpack_dev_server_client__.default !== "undefined"
-      ? __webpack_dev_server_client__.default
-      : __webpack_dev_server_client__
+    ? typeof (
+        /** @type {{ default: CommunicationClientConstructor }} */
+        (__webpack_dev_server_client__).default
+      ) !== "undefined"
+      ? /** @type {{ default: CommunicationClientConstructor }} */
+        (__webpack_dev_server_client__).default
+      : /** @type {CommunicationClientConstructor} */ (
+          __webpack_dev_server_client__
+        )
     : WebSocketClient;
 
 let retries = 0;
@@ -18,9 +26,11 @@ let maxRetries = 10;
 
 // Initialized client is exported so external consumers can utilize the same instance
 // It is mutable to enforce singleton
+/** @type {CommunicationClient | null} */
 // eslint-disable-next-line import/no-mutable-exports
 export let client = null;
 
+/** @type {ReturnType<typeof setTimeout> | undefined} */
 let timeout;
 
 /**
diff --git a/package.json b/package.json
index 0e4d1e42e9..6a2253607c 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "lint:prettier": "prettier --cache --list-different .",
     "lint:code": "eslint --cache .",
     "lint:types": "tsc --pretty --noEmit",
+    "lint:types-client": "tsc -p tsconfig.client.json",
     "lint:spelling": "cspell --cache --no-must-find-files --quiet \"**/*.*\"",
     "lint": "npm-run-all -l -p \"lint:**\"",
     "fix:code": "npm run lint:code -- --fix",
diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js
index 5fc2d8eba6..be3c059233 100644
--- a/test/e2e/overlay.test.js
+++ b/test/e2e/overlay.test.js
@@ -1905,9 +1905,7 @@ describe("overlay", () => {
 
       const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
-      expect(overlayHandle).toBe(null);
-    } catch (error) {
-      throw error;
+      expect(overlayHandle).toBeNull();
     } finally {
       await browser.close();
       await server.stop();
diff --git a/tsconfig.client.json b/tsconfig.client.json
new file mode 100644
index 0000000000..a2d367028f
--- /dev/null
+++ b/tsconfig.client.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom", "webworker", "es2022.error"],
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "strict": true,
+    "skipDefaultLibCheck": true,
+    "esModuleInterop": true
+  },
+  "include": ["./client-src/**/*"],
+  "exclude": ["./client-src/webpack.config.js"]
+}
diff --git a/tsconfig.json b/tsconfig.json
index 83e104c5f7..a28baacbf5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,9 +10,5 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true
   },
-  "include": [
-    "./bin/**/*",
-    // "./client-src/**/*",
-    "./lib/**/*"
-  ]
+  "include": ["./bin/**/*", "./lib/**/*"]
 }