Fix some typescript issues (#32586)

Fixes around 30 or so typescript errors. No runtime changes.

Author: silverwind

.eslintrc.yaml

@@ -642,7 +642,7 @@ rules:
   no-this-before-super: [2]
   no-throw-literal: [2]
   no-undef-init: [2]
-  no-undef: [2, {typeof: true}]
+  no-undef: [2, {typeof: true}] # TODO: disable this rule after tsc passes
   no-undefined: [0]
   no-underscore-dangle: [0]
   no-unexpected-multiline: [2]

web_src/js/features/autofocus-end.ts

@@ -1,5 +1,5 @@
 export function initAutoFocusEnd() {
-  for (const el of document.querySelectorAll('.js-autofocus-end')) {
+  for (const el of document.querySelectorAll<HTMLInputElement>('.js-autofocus-end')) {
     el.focus(); // expects only one such element on one page. If there are many, then the last one gets the focus.
     el.setSelectionRange(el.value.length, el.value.length);
   }

web_src/js/features/captcha.ts

@@ -35,9 +35,11 @@ export async function initCaptcha() {
     }
     case 'm-captcha': {
       const {default: mCaptcha} = await import(/* webpackChunkName: "mcaptcha-vanilla-glue" */'@mcaptcha/vanilla-glue');
+      // @ts-expect-error
       mCaptcha.INPUT_NAME = 'm-captcha-response';
       const instanceURL = captchaEl.getAttribute('data-instance-url');
 
+      // @ts-expect-error
       mCaptcha.default({
         siteKey: {
           instanceUrl: new URL(instanceURL),

web_src/js/features/citation.ts

@@ -3,7 +3,7 @@ import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const {pageData} = window.config;
 
-async function initInputCitationValue(citationCopyApa, citationCopyBibtex) {
+async function initInputCitationValue(citationCopyApa: HTMLButtonElement, citationCopyBibtex: HTMLButtonElement) {
   const [{Cite, plugins}] = await Promise.all([
     import(/* webpackChunkName: "citation-js-core" */'@citation-js/core'),
     import(/* webpackChunkName: "citation-js-formats" */'@citation-js/plugin-software-formats'),
@@ -27,9 +27,9 @@ export async function initCitationFileCopyContent() {
 
   if (!pageData.citationFileContent) return;
 
-  const citationCopyApa = document.querySelector('#citation-copy-apa');
-  const citationCopyBibtex = document.querySelector('#citation-copy-bibtex');
-  const inputContent = document.querySelector('#citation-copy-content');
+  const citationCopyApa = document.querySelector<HTMLButtonElement>('#citation-copy-apa');
+  const citationCopyBibtex = document.querySelector<HTMLButtonElement>('#citation-copy-bibtex');
+  const inputContent = document.querySelector<HTMLInputElement>('#citation-copy-content');
 
   if ((!citationCopyApa && !citationCopyBibtex) || !inputContent) return;
 
@@ -41,7 +41,7 @@ export async function initCitationFileCopyContent() {
     citationCopyApa.classList.toggle('primary', !isBibtex);
   };
 
-  document.querySelector('#cite-repo-button')?.addEventListener('click', async (e) => {
+  document.querySelector('#cite-repo-button')?.addEventListener('click', async (e: MouseEvent & {target: HTMLAnchorElement}) => {
     const dropdownBtn = e.target.closest('.ui.dropdown.button');
     dropdownBtn.classList.add('is-loading');
 

web_src/js/features/clipboard.ts

@@ -9,15 +9,15 @@ 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) => {
+  document.addEventListener('click', async (e: MouseEvent & {target: HTMLElement}) => {
     const target = e.target.closest('[data-clipboard-text], [data-clipboard-target]');
     if (!target) return;
 
     e.preventDefault();
 
     let text = target.getAttribute('data-clipboard-text');
     if (!text) {
-      text = document.querySelector(target.getAttribute('data-clipboard-target'))?.value;
+      text = document.querySelector<HTMLInputElement>(target.getAttribute('data-clipboard-target'))?.value;
     }
 
     if (text && target.getAttribute('data-clipboard-text-type') === 'url') {

web_src/js/features/codeeditor.ts

@@ -21,7 +21,7 @@ const baseOptions = {
   automaticLayout: true,
 };
 
-function getEditorconfig(input) {
+function getEditorconfig(input: HTMLInputElement) {
   try {
     return JSON.parse(input.getAttribute('data-editorconfig'));
   } catch {
@@ -58,7 +58,7 @@ function exportEditor(editor) {
   if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor);
 }
 
-export async function createMonaco(textarea, filename, editorOpts) {
+export async function createMonaco(textarea: HTMLTextAreaElement, filename: string, editorOpts: Record<string, any>) {
   const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
 
   initLanguages(monaco);
@@ -72,7 +72,7 @@ export async function createMonaco(textarea, filename, editorOpts) {
   // https://github.com/microsoft/monaco-editor/issues/2427
   // also, monaco can only parse 6-digit hex colors, so we convert the colors to that format
   const styles = window.getComputedStyle(document.documentElement);
-  const getColor = (name) => tinycolor(styles.getPropertyValue(name).trim()).toString('hex6');
+  const getColor = (name: string) => tinycolor(styles.getPropertyValue(name).trim()).toString('hex6');
 
   monaco.editor.defineTheme('gitea', {
     base: isDarkTheme() ? 'vs-dark' : 'vs',
@@ -127,13 +127,13 @@ export async function createMonaco(textarea, filename, editorOpts) {
   return {monaco, editor};
 }
 
-function getFileBasedOptions(filename, lineWrapExts) {
+function getFileBasedOptions(filename: string, lineWrapExts: string[]) {
   return {
     wordWrap: (lineWrapExts || []).includes(extname(filename)) ? 'on' : 'off',
   };
 }
 
-function togglePreviewDisplay(previewable) {
+function togglePreviewDisplay(previewable: boolean) {
   const previewTab = document.querySelector('a[data-tab="preview"]');
   if (!previewTab) return;
 
@@ -152,7 +152,7 @@ function togglePreviewDisplay(previewable) {
   }
 }
 
-export async function createCodeEditor(textarea, filenameInput) {
+export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameInput: HTMLInputElement) {
   const filename = basename(filenameInput.value);
   const previewableExts = new Set((textarea.getAttribute('data-previewable-extensions') || '').split(','));
   const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(',');
@@ -177,10 +177,10 @@ export async function createCodeEditor(textarea, filenameInput) {
   return editor;
 }
 
-function getEditorConfigOptions(ec) {
+function getEditorConfigOptions(ec: Record<string, any>): Record<string, any> {
   if (!isObject(ec)) return {};
 
-  const opts = {};
+  const opts: Record<string, any> = {};
   opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec);
   if ('indent_size' in ec) opts.indentSize = Number(ec.indent_size);
   if ('tab_width' in ec) opts.tabSize = Number(ec.tab_width) || opts.indentSize;

web_src/js/features/colorpicker.ts

@@ -1,7 +1,7 @@
 import {createTippy} from '../modules/tippy.ts';
 
 export async function initColorPickers() {
-  const els = document.querySelectorAll('.js-color-picker-input');
+  const els = document.querySelectorAll<HTMLElement>('.js-color-picker-input');
   if (!els.length) return;
 
   await Promise.all([
@@ -14,15 +14,15 @@ export async function initColorPickers() {
   }
 }
 
-function updateSquare(el, newValue) {
+function updateSquare(el: HTMLElement, newValue: string): void {
   el.style.color = /#[0-9a-f]{6}/i.test(newValue) ? newValue : 'transparent';
 }
 
-function updatePicker(el, newValue) {
+function updatePicker(el: HTMLElement, newValue: string): void {
   el.setAttribute('color', newValue);
 }
 
-function initPicker(el) {
+function initPicker(el: HTMLElement): void {
   const input = el.querySelector('input');
 
   const square = document.createElement('div');
@@ -37,7 +37,7 @@ function initPicker(el) {
     updateSquare(square, e.detail.value);
   });
 
-  input.addEventListener('input', (e) => {
+  input.addEventListener('input', (e: Event & {target: HTMLInputElement}) => {
     updateSquare(square, e.target.value);
     updatePicker(picker, e.target.value);
   });
@@ -56,7 +56,7 @@ function initPicker(el) {
 
   // init precolors
   for (const colorEl of el.querySelectorAll('.precolors .color')) {
-    colorEl.addEventListener('click', (e) => {
+    colorEl.addEventListener('click', (e: MouseEvent & {target: HTMLAnchorElement}) => {
       const newValue = e.target.getAttribute('data-color-hex');
       input.value = newValue;
       input.dispatchEvent(new Event('input', {bubbles: true}));

web_src/js/features/common-button.ts

@@ -3,7 +3,7 @@ import {POST} from '../modules/fetch.ts';
 import {hideElem, showElem, toggleElem} from '../utils/dom.ts';
 import {showErrorToast} from '../modules/toast.ts';
 
-export function initGlobalButtonClickOnEnter() {
+export function initGlobalButtonClickOnEnter(): void {
   $(document).on('keypress', 'div.ui.button,span.ui.button', (e) => {
     if (e.code === ' ' || e.code === 'Enter') {
       $(e.target).trigger('click');
@@ -12,13 +12,13 @@ export function initGlobalButtonClickOnEnter() {
   });
 }
 
-export function initGlobalDeleteButton() {
+export function initGlobalDeleteButton(): void {
   // ".delete-button" shows a confirmation modal defined by `data-modal-id` attribute.
   // Some model/form elements will be filled by `data-id` / `data-name` / `data-data-xxx` attributes.
   // If there is a form defined by `data-form`, then the form will be submitted as-is (without any modification).
   // If there is no form, then the data will be posted to `data-url`.
   // TODO: it's not encouraged to use this method. `show-modal` does far better than this.
-  for (const btn of document.querySelectorAll('.delete-button')) {
+  for (const btn of document.querySelectorAll<HTMLElement>('.delete-button')) {
     btn.addEventListener('click', (e) => {
       e.preventDefault();
 
@@ -46,7 +46,7 @@ export function initGlobalDeleteButton() {
           // if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
           if (btn.getAttribute('data-type') === 'form') {
             const formSelector = btn.getAttribute('data-form');
-            const form = document.querySelector(formSelector);
+            const form = document.querySelector<HTMLFormElement>(formSelector);
             if (!form) throw new Error(`no form named ${formSelector} found`);
             form.submit();
           }
@@ -73,7 +73,7 @@ export function initGlobalDeleteButton() {
   }
 }
 
-export function initGlobalButtons() {
+export function initGlobalButtons(): void {
   // There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
   // However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
   // There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content")

web_src/js/globals.d.ts

@@ -58,4 +58,8 @@ interface Window {
     push: (e: ErrorEvent & PromiseRejectionEvent) => void | number,
   },
   __webpack_public_path__: string;
+  grecaptcha: any,
+  turnstile: any,
+  hcaptcha: any,
+  codeEditors: any[],
 }

web_src/js/markup/math.ts

@@ -6,7 +6,7 @@ function targetElement(el: Element) {
   return el.classList.contains('is-loading') ? el : el.closest('pre');
 }
 
-export async function renderMath(): void {
+export async function renderMath(): Promise<void> {
   const els = document.querySelectorAll('.markup code.language-math');
   if (!els.length) return;