From c0e80dbe26c77453dfdc33979c9f69eb6eba18c4 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 21 Dec 2024 19:59:25 +0100
Subject: [PATCH] Enable Typescript `strictFunctionTypes` (#32911)

1. Enable
[strictFunctionTypes](https://www.typescriptlang.org/tsconfig/#strictFunctionTypes)
2. Introduce `DOMEvent` helper type which sets `e.target`. Surely not
totally correct with that `Partial` but seems to work.
3. Various type-related refactors, change objects in
`eventsource.sharedworker.ts` to `Map`.
---
 tsconfig.json                                 |  1 +
 web_src/js/components/ContextPopup.vue        |  5 +-
 web_src/js/features/clipboard.ts              |  3 +-
 web_src/js/features/colorpicker.ts            |  7 +--
 web_src/js/features/common-form.ts            |  4 +-
 web_src/js/features/comp/Cropper.ts           |  4 +-
 web_src/js/features/comp/ReactionSelector.ts  |  5 +-
 .../js/features/eventsource.sharedworker.ts   | 49 ++++++++++---------
 web_src/js/features/notification.ts           |  6 +--
 web_src/js/features/oauth2-settings.ts        |  6 ++-
 web_src/js/features/repo-graph.ts             | 12 ++---
 web_src/js/features/repo-home.ts              |  4 +-
 web_src/js/features/repo-issue.ts             | 21 ++++----
 web_src/js/features/repo-release.ts           |  8 +--
 web_src/js/features/repo-search.ts            |  4 +-
 web_src/js/features/repo-settings.ts          |  4 +-
 web_src/js/features/repo-wiki.ts              |  2 +-
 web_src/js/htmx.ts                            |  4 +-
 web_src/js/markup/html2markdown.ts            | 16 +++---
 web_src/js/modules/tippy.ts                   | 10 ++--
 web_src/js/utils/dom.ts                       |  3 +-
 21 files changed, 94 insertions(+), 84 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 7d0316db29..d32cca0aaa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,7 @@
     "verbatimModuleSyntax": true,
     "stripInternal": true,
     "strict": false,
+    "strictFunctionTypes": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noPropertyAccessFromIndexSignature": false,
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index b0e8447302..0aae202d42 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -25,10 +25,9 @@ const body = computed(() => {
 const root = ref<HTMLElement | null>(null);
 
 onMounted(() => {
-  root.value.addEventListener('ce-load-context-popup', (e: CustomEvent) => {
-    const data: IssuePathInfo = e.detail;
+  root.value.addEventListener('ce-load-context-popup', (e: CustomEventInit<IssuePathInfo>) => {
     if (!loading.value && issue.value === null) {
-      load(data);
+      load(e.detail);
     }
   });
 });
diff --git a/web_src/js/features/clipboard.ts b/web_src/js/features/clipboard.ts
index 8f40f34f74..22c264d774 100644
--- a/web_src/js/features/clipboard.ts
+++ b/web_src/js/features/clipboard.ts
@@ -1,6 +1,7 @@
 import {showTemporaryTooltip} from '../modules/tippy.ts';
 import {toAbsoluteUrl} from '../utils.ts';
 import {clippie} from 'clippie';
+import type {DOMEvent} from '../utils/dom.ts';
 
 const {copy_success, copy_error} = window.config.i18n;
 
@@ -9,7 +10,7 @@ const {copy_success, copy_error} = window.config.i18n;
 // - data-clipboard-target: Holds a selector for a <input> or <textarea> whose content is copied
 // - data-clipboard-text-type: When set to 'url' will convert relative to absolute urls
 export function initGlobalCopyToClipboardListener() {
-  document.addEventListener('click', async (e: MouseEvent & {target: HTMLElement}) => {
+  document.addEventListener('click', async (e: DOMEvent<MouseEvent>) => {
     const target = e.target.closest('[data-clipboard-text], [data-clipboard-target]');
     if (!target) return;
 
diff --git a/web_src/js/features/colorpicker.ts b/web_src/js/features/colorpicker.ts
index bf20aed545..b99e2f8c45 100644
--- a/web_src/js/features/colorpicker.ts
+++ b/web_src/js/features/colorpicker.ts
@@ -1,4 +1,5 @@
 import {createTippy} from '../modules/tippy.ts';
+import type {DOMEvent} from '../utils/dom.ts';
 
 export async function initColorPickers() {
   const els = document.querySelectorAll<HTMLElement>('.js-color-picker-input');
@@ -37,7 +38,7 @@ function initPicker(el: HTMLElement): void {
     updateSquare(square, e.detail.value);
   });
 
-  input.addEventListener('input', (e: Event & {target: HTMLInputElement}) => {
+  input.addEventListener('input', (e: DOMEvent<Event, HTMLInputElement>) => {
     updateSquare(square, e.target.value);
     updatePicker(picker, e.target.value);
   });
@@ -55,8 +56,8 @@ function initPicker(el: HTMLElement): void {
   });
 
   // init precolors
-  for (const colorEl of el.querySelectorAll('.precolors .color')) {
-    colorEl.addEventListener('click', (e: MouseEvent & {target: HTMLAnchorElement}) => {
+  for (const colorEl of el.querySelectorAll<HTMLElement>('.precolors .color')) {
+    colorEl.addEventListener('click', (e: DOMEvent<MouseEvent, HTMLAnchorElement>) => {
       const newValue = e.target.getAttribute('data-color-hex');
       input.value = newValue;
       input.dispatchEvent(new Event('input', {bubbles: true}));
diff --git a/web_src/js/features/common-form.ts b/web_src/js/features/common-form.ts
index 86323e352e..8532d397cd 100644
--- a/web_src/js/features/common-form.ts
+++ b/web_src/js/features/common-form.ts
@@ -1,6 +1,6 @@
 import {applyAreYouSure, initAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.ts';
-import {queryElems} from '../utils/dom.ts';
+import {queryElems, type DOMEvent} from '../utils/dom.ts';
 import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
 
 export function initGlobalFormDirtyLeaveConfirm() {
@@ -13,7 +13,7 @@ export function initGlobalFormDirtyLeaveConfirm() {
 }
 
 export function initGlobalEnterQuickSubmit() {
-  document.addEventListener('keydown', (e: KeyboardEvent & {target: HTMLElement}) => {
+  document.addEventListener('keydown', (e: DOMEvent<KeyboardEvent>) => {
     if (e.key !== 'Enter') return;
     const hasCtrlOrMeta = ((e.ctrlKey || e.metaKey) && !e.altKey);
     if (hasCtrlOrMeta && e.target.matches('textarea')) {
diff --git a/web_src/js/features/comp/Cropper.ts b/web_src/js/features/comp/Cropper.ts
index 3961b79b49..e65dcfbe13 100644
--- a/web_src/js/features/comp/Cropper.ts
+++ b/web_src/js/features/comp/Cropper.ts
@@ -1,4 +1,4 @@
-import {showElem} from '../../utils/dom.ts';
+import {showElem, type DOMEvent} from '../../utils/dom.ts';
 
 type CropperOpts = {
   container: HTMLElement,
@@ -26,7 +26,7 @@ export async function initCompCropper({container, fileInput, imageSource}: Cropp
     },
   });
 
-  fileInput.addEventListener('input', (e: Event & {target: HTMLInputElement}) => {
+  fileInput.addEventListener('input', (e: DOMEvent<Event, HTMLInputElement>) => {
     const files = e.target.files;
     if (files?.length > 0) {
       currentFileName = files[0].name;
diff --git a/web_src/js/features/comp/ReactionSelector.ts b/web_src/js/features/comp/ReactionSelector.ts
index 671bade3be..e93e3b8377 100644
--- a/web_src/js/features/comp/ReactionSelector.ts
+++ b/web_src/js/features/comp/ReactionSelector.ts
@@ -1,9 +1,10 @@
 import {POST} from '../../modules/fetch.ts';
 import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import type {DOMEvent} from '../../utils/dom.ts';
 
 export function initCompReactionSelector(parent: ParentNode = document) {
-  for (const container of parent.querySelectorAll('.issue-content, .diff-file-body')) {
-    container.addEventListener('click', async (e: MouseEvent & {target: HTMLElement}) => {
+  for (const container of parent.querySelectorAll<HTMLElement>('.issue-content, .diff-file-body')) {
+    container.addEventListener('click', async (e: DOMEvent<MouseEvent>) => {
       // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
       const target = e.target.closest('.comment-reaction-button');
       if (!target) return;
diff --git a/web_src/js/features/eventsource.sharedworker.ts b/web_src/js/features/eventsource.sharedworker.ts
index 991c92cc8e..7a2fb817a7 100644
--- a/web_src/js/features/eventsource.sharedworker.ts
+++ b/web_src/js/features/eventsource.sharedworker.ts
@@ -1,13 +1,10 @@
-const sourcesByUrl = {};
-const sourcesByPort = {};
-
 class Source {
   url: string;
   eventSource: EventSource;
-  listening: Record<string, any>;
-  clients: Array<any>;
+  listening: Record<string, boolean>;
+  clients: Array<MessagePort>;
 
-  constructor(url) {
+  constructor(url: string) {
     this.url = url;
     this.eventSource = new EventSource(url);
     this.listening = {};
@@ -20,7 +17,7 @@ class Source {
     this.listen('error');
   }
 
-  register(port) {
+  register(port: MessagePort) {
     if (this.clients.includes(port)) return;
 
     this.clients.push(port);
@@ -31,7 +28,7 @@ class Source {
     });
   }
 
-  deregister(port) {
+  deregister(port: MessagePort) {
     const portIdx = this.clients.indexOf(port);
     if (portIdx < 0) {
       return this.clients.length;
@@ -47,7 +44,7 @@ class Source {
     this.eventSource = null;
   }
 
-  listen(eventType) {
+  listen(eventType: string) {
     if (this.listening[eventType]) return;
     this.listening[eventType] = true;
     this.eventSource.addEventListener(eventType, (event) => {
@@ -58,13 +55,13 @@ class Source {
     });
   }
 
-  notifyClients(event) {
+  notifyClients(event: {type: string, data: any}) {
     for (const client of this.clients) {
       client.postMessage(event);
     }
   }
 
-  status(port) {
+  status(port: MessagePort) {
     port.postMessage({
       type: 'status',
       message: `url: ${this.url} readyState: ${this.eventSource.readyState}`,
@@ -72,7 +69,11 @@ class Source {
   }
 }
 
-self.addEventListener('connect', (e: Event & {ports: Array<any>}) => {
+const sourcesByUrl: Map<string, Source | null> = new Map();
+const sourcesByPort: Map<MessagePort, Source | null> = new Map();
+
+// @ts-expect-error: typescript bug?
+self.addEventListener('connect', (e: MessageEvent) => {
   for (const port of e.ports) {
     port.addEventListener('message', (event) => {
       if (!self.EventSource) {
@@ -84,14 +85,14 @@ self.addEventListener('connect', (e: Event & {ports: Array<any>}) => {
       }
       if (event.data.type === 'start') {
         const url = event.data.url;
-        if (sourcesByUrl[url]) {
+        if (sourcesByUrl.get(url)) {
           // we have a Source registered to this url
-          const source = sourcesByUrl[url];
+          const source = sourcesByUrl.get(url);
           source.register(port);
-          sourcesByPort[port] = source;
+          sourcesByPort.set(port, source);
           return;
         }
-        let source = sourcesByPort[port];
+        let source = sourcesByPort.get(port);
         if (source) {
           if (source.eventSource && source.url === url) return;
 
@@ -101,30 +102,30 @@ self.addEventListener('connect', (e: Event & {ports: Array<any>}) => {
           // Clean-up
           if (count === 0) {
             source.close();
-            sourcesByUrl[source.url] = null;
+            sourcesByUrl.set(source.url, null);
           }
         }
         // Create a new Source
         source = new Source(url);
         source.register(port);
-        sourcesByUrl[url] = source;
-        sourcesByPort[port] = source;
+        sourcesByUrl.set(url, source);
+        sourcesByPort.set(port, source);
       } else if (event.data.type === 'listen') {
-        const source = sourcesByPort[port];
+        const source = sourcesByPort.get(port);
         source.listen(event.data.eventType);
       } else if (event.data.type === 'close') {
-        const source = sourcesByPort[port];
+        const source = sourcesByPort.get(port);
 
         if (!source) return;
 
         const count = source.deregister(port);
         if (count === 0) {
           source.close();
-          sourcesByUrl[source.url] = null;
-          sourcesByPort[port] = null;
+          sourcesByUrl.set(source.url, null);
+          sourcesByPort.set(port, null);
         }
       } else if (event.data.type === 'status') {
-        const source = sourcesByPort[port];
+        const source = sourcesByPort.get(port);
         if (!source) {
           port.postMessage({
             type: 'status',
diff --git a/web_src/js/features/notification.ts b/web_src/js/features/notification.ts
index 5cdcd967f0..adfdb157a1 100644
--- a/web_src/js/features/notification.ts
+++ b/web_src/js/features/notification.ts
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import {GET} from '../modules/fetch.ts';
-import {toggleElem} from '../utils/dom.ts';
+import {toggleElem, type DOMEvent} from '../utils/dom.ts';
 import {logoutFromWorker} from '../modules/worker.ts';
 
 const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
@@ -25,8 +25,8 @@ export function initNotificationsTable() {
   });
 
   // mark clicked unread links for deletion on bfcache restore
-  for (const link of table.querySelectorAll('.notifications-item[data-status="1"] .notifications-link')) {
-    link.addEventListener('click', (e : MouseEvent & {target: HTMLElement}) => {
+  for (const link of table.querySelectorAll<HTMLAnchorElement>('.notifications-item[data-status="1"] .notifications-link')) {
+    link.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
       e.target.closest('.notifications-item').setAttribute('data-remove', 'true');
     });
   }
diff --git a/web_src/js/features/oauth2-settings.ts b/web_src/js/features/oauth2-settings.ts
index a206bc8912..40424babb8 100644
--- a/web_src/js/features/oauth2-settings.ts
+++ b/web_src/js/features/oauth2-settings.ts
@@ -1,6 +1,8 @@
+import type {DOMEvent} from '../utils/dom.ts';
+
 export function initOAuth2SettingsDisableCheckbox() {
-  for (const el of document.querySelectorAll('.disable-setting')) {
-    el.addEventListener('change', (e: Event & {target: HTMLInputElement}) => {
+  for (const el of document.querySelectorAll<HTMLInputElement>('.disable-setting')) {
+    el.addEventListener('change', (e: DOMEvent<Event, HTMLInputElement>) => {
       document.querySelector(e.target.getAttribute('data-target')).classList.toggle('disabled', e.target.checked);
     });
   }
diff --git a/web_src/js/features/repo-graph.ts b/web_src/js/features/repo-graph.ts
index c9740dbedf..6d1629a1c1 100644
--- a/web_src/js/features/repo-graph.ts
+++ b/web_src/js/features/repo-graph.ts
@@ -1,9 +1,9 @@
-import {hideElem, showElem} from '../utils/dom.ts';
+import {hideElem, showElem, type DOMEvent} from '../utils/dom.ts';
 import {GET} from '../modules/fetch.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 export function initRepoGraphGit() {
-  const graphContainer = document.querySelector('#git-graph-container');
+  const graphContainer = document.querySelector<HTMLElement>('#git-graph-container');
   if (!graphContainer) return;
 
   document.querySelector('#flow-color-monochrome')?.addEventListener('click', () => {
@@ -87,7 +87,7 @@ export function initRepoGraphGit() {
   fomanticQuery(flowSelectRefsDropdown).dropdown({
     clearable: true,
     fullTextSeach: 'exact',
-    onRemove(toRemove) {
+    onRemove(toRemove: string) {
       if (toRemove === '...flow-hide-pr-refs') {
         params.delete('hide-pr-refs');
       } else {
@@ -101,7 +101,7 @@ export function initRepoGraphGit() {
       }
       updateGraph();
     },
-    onAdd(toAdd) {
+    onAdd(toAdd: string) {
       if (toAdd === '...flow-hide-pr-refs') {
         params.set('hide-pr-refs', 'true');
       } else {
@@ -111,7 +111,7 @@ export function initRepoGraphGit() {
     },
   });
 
-  graphContainer.addEventListener('mouseenter', (e: MouseEvent & {target: HTMLElement}) => {
+  graphContainer.addEventListener('mouseenter', (e: DOMEvent<MouseEvent>) => {
     if (e.target.matches('#rev-list li')) {
       const flow = e.target.getAttribute('data-flow');
       if (flow === '0') return;
@@ -132,7 +132,7 @@ export function initRepoGraphGit() {
     }
   });
 
-  graphContainer.addEventListener('mouseleave', (e: MouseEvent & {target: HTMLElement}) => {
+  graphContainer.addEventListener('mouseleave', (e: DOMEvent<MouseEvent>) => {
     if (e.target.matches('#rev-list li')) {
       const flow = e.target.getAttribute('data-flow');
       if (flow === '0') return;
diff --git a/web_src/js/features/repo-home.ts b/web_src/js/features/repo-home.ts
index abda29cc52..9c1e317486 100644
--- a/web_src/js/features/repo-home.ts
+++ b/web_src/js/features/repo-home.ts
@@ -1,5 +1,5 @@
 import {stripTags} from '../utils.ts';
-import {hideElem, queryElemChildren, showElem} from '../utils/dom.ts';
+import {hideElem, queryElemChildren, showElem, type DOMEvent} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
 import {showErrorToast, type Toast} from '../modules/toast.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
@@ -28,7 +28,7 @@ export function initRepoTopicBar() {
     mgrBtn.focus();
   });
 
-  document.querySelector('#save_topic').addEventListener('click', async (e: MouseEvent & {target: HTMLButtonElement}) => {
+  document.querySelector<HTMLButtonElement>('#save_topic').addEventListener('click', async (e: DOMEvent<MouseEvent, HTMLButtonElement>) => {
     lastErrorToast?.hideToast();
     const topics = editDiv.querySelector<HTMLInputElement>('input[name=topics]').value;
 
diff --git a/web_src/js/features/repo-issue.ts b/web_src/js/features/repo-issue.ts
index f47e05c47c..a9dda39a7f 100644
--- a/web_src/js/features/repo-issue.ts
+++ b/web_src/js/features/repo-issue.ts
@@ -8,6 +8,7 @@ import {
   queryElems,
   showElem,
   toggleElem,
+  type DOMEvent,
 } from '../utils/dom.ts';
 import {setFileFolding} from './file-fold.ts';
 import {ComboMarkdownEditor, getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
@@ -53,7 +54,7 @@ export function initRepoIssueSidebarList() {
   });
 }
 
-function initRepoIssueLabelFilter(elDropdown: Element) {
+function initRepoIssueLabelFilter(elDropdown: HTMLElement) {
   const url = new URL(window.location.href);
   const showArchivedLabels = url.searchParams.get('archived_labels') === 'true';
   const queryLabels = url.searchParams.get('labels') || '';
@@ -125,7 +126,7 @@ export function initRepoIssueFilterItemLabel() {
 
 export function initRepoIssueCommentDelete() {
   // Delete comment
-  document.addEventListener('click', async (e: MouseEvent & {target: HTMLElement}) => {
+  document.addEventListener('click', async (e: DOMEvent<MouseEvent>) => {
     if (!e.target.matches('.delete-comment')) return;
     e.preventDefault();
 
@@ -200,7 +201,7 @@ export function initRepoIssueDependencyDelete() {
 
 export function initRepoIssueCodeCommentCancel() {
   // Cancel inline code comment
-  document.addEventListener('click', (e: MouseEvent & {target: HTMLElement}) => {
+  document.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
     if (!e.target.matches('.cancel-code-comment')) return;
 
     const form = e.target.closest('form');
@@ -222,7 +223,7 @@ export function initRepoPullRequestUpdate() {
     e.preventDefault();
     const redirect = this.getAttribute('data-redirect');
     this.classList.add('is-loading');
-    let response;
+    let response: Response;
     try {
       response = await POST(this.getAttribute('data-do'));
     } catch (error) {
@@ -230,7 +231,7 @@ export function initRepoPullRequestUpdate() {
     } finally {
       this.classList.remove('is-loading');
     }
-    let data;
+    let data: Record<string, any>;
     try {
       data = await response?.json(); // the response is probably not a JSON
     } catch (error) {
@@ -341,7 +342,7 @@ export function initRepoIssueWipTitle() {
 export function initRepoIssueComments() {
   if (!$('.repository.view.issue .timeline').length) return;
 
-  document.addEventListener('click', (e: MouseEvent & {target: HTMLElement}) => {
+  document.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
     const urlTarget = document.querySelector(':target');
     if (!urlTarget) return;
 
@@ -589,7 +590,7 @@ export function initRepoIssueTitleEdit() {
 }
 
 export function initRepoIssueBranchSelect() {
-  document.querySelector('#branch-select')?.addEventListener('click', (e: MouseEvent & {target: HTMLElement}) => {
+  document.querySelector<HTMLElement>('#branch-select')?.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
     const el = e.target.closest('.item[data-branch]');
     if (!el) return;
     const pullTargetBranch = document.querySelector('#pull-target-branch');
@@ -628,10 +629,10 @@ function initIssueTemplateCommentEditors($commentForm) {
   // * new issue with issue template
   const $comboFields = $commentForm.find('.combo-editor-dropzone');
 
-  const initCombo = async (elCombo) => {
+  const initCombo = async (elCombo: HTMLElement) => {
     const $formField = $(elCombo.querySelector('.form-field-real'));
-    const dropzoneContainer = elCombo.querySelector('.form-field-dropzone');
-    const markdownEditor = elCombo.querySelector('.combo-markdown-editor');
+    const dropzoneContainer = elCombo.querySelector<HTMLElement>('.form-field-dropzone');
+    const markdownEditor = elCombo.querySelector<HTMLElement>('.combo-markdown-editor');
 
     const editor = await initComboMarkdownEditor(markdownEditor);
     editor.container.addEventListener(ComboMarkdownEditor.EventEditorContentChanged, () => $formField.val(editor.value()));
diff --git a/web_src/js/features/repo-release.ts b/web_src/js/features/repo-release.ts
index 683c57dad1..dfff090ba9 100644
--- a/web_src/js/features/repo-release.ts
+++ b/web_src/js/features/repo-release.ts
@@ -1,7 +1,7 @@
-import {hideElem, showElem} from '../utils/dom.ts';
+import {hideElem, showElem, type DOMEvent} from '../utils/dom.ts';
 
 export function initRepoRelease() {
-  document.addEventListener('click', (e: MouseEvent & {target: HTMLElement}) => {
+  document.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
     if (e.target.matches('.remove-rel-attach')) {
       const uuid = e.target.getAttribute('data-uuid');
       const id = e.target.getAttribute('data-id');
@@ -42,7 +42,7 @@ function initTagNameEditor() {
     }
   };
   hideTargetInput(tagNameInput); // update on page load because the input may have a value
-  tagNameInput.addEventListener('input', (e: InputEvent & {target: HTMLInputElement}) => {
-    hideTargetInput(e.target);
+  tagNameInput.addEventListener('input', (e) => {
+    hideTargetInput(e.target as HTMLInputElement);
   });
 }
diff --git a/web_src/js/features/repo-search.ts b/web_src/js/features/repo-search.ts
index 7f111dce33..27609adfc9 100644
--- a/web_src/js/features/repo-search.ts
+++ b/web_src/js/features/repo-search.ts
@@ -1,8 +1,10 @@
+import type {DOMEvent} from '../utils/dom.ts';
+
 export function initRepositorySearch() {
   const repositorySearchForm = document.querySelector<HTMLFormElement>('#repo-search-form');
   if (!repositorySearchForm) return;
 
-  repositorySearchForm.addEventListener('change', (e: Event & {target: HTMLFormElement}) => {
+  repositorySearchForm.addEventListener('change', (e: DOMEvent<Event, HTMLInputElement>) => {
     e.preventDefault();
 
     const params = new URLSearchParams();
diff --git a/web_src/js/features/repo-settings.ts b/web_src/js/features/repo-settings.ts
index 5e7edb0402..1d2d447205 100644
--- a/web_src/js/features/repo-settings.ts
+++ b/web_src/js/features/repo-settings.ts
@@ -122,7 +122,7 @@ function initRepoSettingsBranches() {
 function initRepoSettingsOptions() {
   if ($('.repository.settings.options').length > 0) {
     // Enable or select internal/external wiki system and issue tracker.
-    $('.enable-system').on('change', function (this: HTMLInputElement) {
+    $('.enable-system').on('change', function (this: HTMLInputElement) { // eslint-disable-line @typescript-eslint/no-deprecated
       if (this.checked) {
         $($(this).data('target')).removeClass('disabled');
         if (!$(this).data('context')) $($(this).data('context')).addClass('disabled');
@@ -131,7 +131,7 @@ function initRepoSettingsOptions() {
         if (!$(this).data('context')) $($(this).data('context')).removeClass('disabled');
       }
     });
-    $('.enable-system-radio').on('change', function (this: HTMLInputElement) {
+    $('.enable-system-radio').on('change', function (this: HTMLInputElement) { // eslint-disable-line @typescript-eslint/no-deprecated
       if (this.value === 'false') {
         $($(this).data('target')).addClass('disabled');
         if ($(this).data('context') !== undefined) $($(this).data('context')).removeClass('disabled');
diff --git a/web_src/js/features/repo-wiki.ts b/web_src/js/features/repo-wiki.ts
index 69188d6ae2..484c628f9f 100644
--- a/web_src/js/features/repo-wiki.ts
+++ b/web_src/js/features/repo-wiki.ts
@@ -13,7 +13,7 @@ async function initRepoWikiFormEditor() {
   let editor: ComboMarkdownEditor;
 
   let renderRequesting = false;
-  let lastContent;
+  let lastContent: string = '';
   const renderEasyMDEPreview = async function () {
     if (renderRequesting) return;
 
diff --git a/web_src/js/htmx.ts b/web_src/js/htmx.ts
index d4f317ee5a..3f9a5a815c 100644
--- a/web_src/js/htmx.ts
+++ b/web_src/js/htmx.ts
@@ -9,13 +9,13 @@ window.htmx.config.requestClass = 'is-loading';
 window.htmx.config.scrollIntoViewOnBoost = false;
 
 // https://htmx.org/events/#htmx:sendError
-document.body.addEventListener('htmx:sendError', (event: HtmxEvent) => {
+document.body.addEventListener('htmx:sendError', (event: Partial<HtmxEvent>) => {
   // TODO: add translations
   showErrorToast(`Network error when calling ${event.detail.requestConfig.path}`);
 });
 
 // https://htmx.org/events/#htmx:responseError
-document.body.addEventListener('htmx:responseError', (event: HtmxEvent) => {
+document.body.addEventListener('htmx:responseError', (event: Partial<HtmxEvent>) => {
   // TODO: add translations
   showErrorToast(`Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`);
 });
diff --git a/web_src/js/markup/html2markdown.ts b/web_src/js/markup/html2markdown.ts
index 3f7ef38002..fc2083e86d 100644
--- a/web_src/js/markup/html2markdown.ts
+++ b/web_src/js/markup/html2markdown.ts
@@ -12,7 +12,7 @@ type ProcessorContext = {
 
 function prepareProcessors(ctx:ProcessorContext): Processors {
   const processors = {
-    H1(el: HTMLHeadingElement) {
+    H1(el: HTMLElement) {
       const level = parseInt(el.tagName.slice(1));
       el.textContent = `${'#'.repeat(level)} ${el.textContent.trim()}`;
     },
@@ -25,7 +25,7 @@ function prepareProcessors(ctx:ProcessorContext): Processors {
     DEL(el: HTMLElement) {
       return `~~${el.textContent}~~`;
     },
-    A(el: HTMLAnchorElement) {
+    A(el: HTMLElement) {
       const text = el.textContent || 'link';
       const href = el.getAttribute('href');
       if (/^https?:/.test(text) && text === href) {
@@ -33,7 +33,7 @@ function prepareProcessors(ctx:ProcessorContext): Processors {
       }
       return href ? `[${text}](${href})` : text;
     },
-    IMG(el: HTMLImageElement) {
+    IMG(el: HTMLElement) {
       const alt = el.getAttribute('alt') || 'image';
       const src = el.getAttribute('src');
       const widthAttr = el.hasAttribute('width') ? ` width="${htmlEscape(el.getAttribute('width') || '')}"` : '';
@@ -43,7 +43,7 @@ function prepareProcessors(ctx:ProcessorContext): Processors {
       }
       return `![${alt}](${src})`;
     },
-    P(el: HTMLParagraphElement) {
+    P(el: HTMLElement) {
       el.textContent = `${el.textContent}\n`;
     },
     BLOCKQUOTE(el: HTMLElement) {
@@ -54,14 +54,14 @@ function prepareProcessors(ctx:ProcessorContext): Processors {
       el.textContent = `${preNewLine}${el.textContent}\n`;
     },
     LI(el: HTMLElement) {
-      const parent = el.parentNode;
-      const bullet = (parent as HTMLElement).tagName === 'OL' ? `1. ` : '* ';
+      const parent = el.parentNode as HTMLElement;
+      const bullet = parent.tagName === 'OL' ? `1. ` : '* ';
       const nestingIdentLevel = Math.max(0, ctx.listNestingLevel - 1);
       el.textContent = `${' '.repeat(nestingIdentLevel * 4)}${bullet}${el.textContent}${ctx.elementIsLast ? '' : '\n'}`;
       return el;
     },
-    INPUT(el: HTMLInputElement) {
-      return el.checked ? '[x] ' : '[ ] ';
+    INPUT(el: HTMLElement) {
+      return (el as HTMLInputElement).checked ? '[x] ' : '[ ] ';
     },
     CODE(el: HTMLElement) {
       const text = el.textContent;
diff --git a/web_src/js/modules/tippy.ts b/web_src/js/modules/tippy.ts
index 4e7f1ac093..aaaf580de1 100644
--- a/web_src/js/modules/tippy.ts
+++ b/web_src/js/modules/tippy.ts
@@ -121,14 +121,14 @@ function switchTitleToTooltip(target: Element): void {
  * Some browsers like PaleMoon don't support "addEventListener('mouseenter', capture)"
  * The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy
  */
-function lazyTooltipOnMouseHover(e: MouseEvent): void {
+function lazyTooltipOnMouseHover(e: Event): void {
   e.target.removeEventListener('mouseover', lazyTooltipOnMouseHover, true);
   attachTooltip(this);
 }
 
 // Activate the tooltip for current element.
 // If the element has no aria-label, use the tooltip content as aria-label.
-function attachLazyTooltip(el: Element): void {
+function attachLazyTooltip(el: HTMLElement): void {
   el.addEventListener('mouseover', lazyTooltipOnMouseHover, {capture: true});
 
   // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
@@ -141,8 +141,8 @@ function attachLazyTooltip(el: Element): void {
 }
 
 // Activate the tooltip for all children elements.
-function attachChildrenLazyTooltip(target: Element): void {
-  for (const el of target.querySelectorAll<Element>('[data-tooltip-content]')) {
+function attachChildrenLazyTooltip(target: HTMLElement): void {
+  for (const el of target.querySelectorAll<HTMLElement>('[data-tooltip-content]')) {
     attachLazyTooltip(el);
   }
 }
@@ -160,7 +160,7 @@ export function initGlobalTooltips(): void {
     for (const mutation of [...mutationList, ...pending]) {
       if (mutation.type === 'childList') {
         // mainly for Vue components and AJAX rendered elements
-        for (const el of mutation.addedNodes as NodeListOf<Element>) {
+        for (const el of mutation.addedNodes as NodeListOf<HTMLElement>) {
           if (!isDocumentFragmentOrElementNode(el)) continue;
           attachChildrenLazyTooltip(el);
           if (el.hasAttribute('data-tooltip-content')) {
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index 6e830b9817..e24cb29bac 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -7,6 +7,7 @@ type ArrayLikeIterable<T> = ArrayLike<T> & Iterable<T>; // for NodeListOf and Ar
 type ElementArg = Element | string | ArrayLikeIterable<Element> | ReturnType<typeof $>;
 type ElementsCallback<T extends Element> = (el: T) => Promisable<any>;
 type ElementsCallbackWithArgs = (el: Element, ...args: any[]) => Promisable<any>;
+export type DOMEvent<E extends Event, T extends Element = HTMLElement> = E & { target: Partial<T>; };
 
 function elementsCall(el: ElementArg, func: ElementsCallbackWithArgs, ...args: any[]) {
   if (typeof el === 'string' || el instanceof String) {
@@ -87,7 +88,7 @@ export function queryElemChildren<T extends Element>(parent: Element | ParentNod
 
 // it works like parent.querySelectorAll: all descendants are selected
 // in the future, all "queryElems(document, ...)" should be refactored to use a more specific parent
-export function queryElems<T extends Element>(parent: Element | ParentNode, selector: string, fn?: ElementsCallback<T>): ArrayLikeIterable<T> {
+export function queryElems<T extends HTMLElement>(parent: Element | ParentNode, selector: string, fn?: ElementsCallback<T>): ArrayLikeIterable<T> {
   return applyElemsCallback<T>(parent.querySelectorAll(selector), fn);
 }