Fix some typescript issues (#32586)

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

web_src/js/modules/dirauto.ts

@@ -13,7 +13,7 @@ function attachDirAuto(el: DirElement) {
   }
 }
 
-export function initDirAuto() {
+export function initDirAuto(): void {
   const observer = new MutationObserver((mutationList) => {
     const len = mutationList.length;
     for (let i = 0; i < len; i++) {

web_src/js/modules/fetch.ts

@@ -9,7 +9,7 @@ const safeMethods = new Set(['GET', 'HEAD', 'OPTIONS', 'TRACE']);
 // fetch wrapper, use below method name functions and the `data` option to pass in data
 // which will automatically set an appropriate headers. For json content, only object
 // and array types are currently supported.
-export function request(url: string, {method = 'GET', data, headers = {}, ...other}: RequestOpts = {}) {
+export function request(url: string, {method = 'GET', data, headers = {}, ...other}: RequestOpts = {}): Promise<Response> {
   let body: RequestData;
   let contentType: string;
   if (data instanceof FormData || data instanceof URLSearchParams) {

web_src/js/modules/fomantic.ts

@@ -19,7 +19,7 @@ export function initGiteaFomantic() {
   // Do not use "cursor: pointer" for dropdown labels
   $.fn.dropdown.settings.className.label += ' tw-cursor-default';
   // Always use Gitea's SVG icons
-  $.fn.dropdown.settings.templates.label = function(_value, text, preserveHTML, className) {
+  $.fn.dropdown.settings.templates.label = function(_value: any, text: any, preserveHTML: any, className: Record<string, string>) {
     const escape = $.fn.dropdown.settings.templates.escape;
     return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`);
   };

web_src/js/modules/fomantic/api.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import type {FomanticInitFunction} from '../../types.ts';
 
 export function initFomanticApiPatch() {
   //
@@ -15,7 +16,7 @@ export function initFomanticApiPatch() {
   //
   const patchKey = '_giteaFomanticApiPatch';
   const oldApi = $.api;
-  $.api = $.fn.api = function(...args) {
+  $.api = $.fn.api = function(...args: Parameters<FomanticInitFunction>) {
     const apiCall = oldApi.bind(this);
     const ret = oldApi.apply(this, args);
 
@@ -23,7 +24,7 @@ export function initFomanticApiPatch() {
       const internalGet = apiCall('internal', 'get');
       if (!internalGet.urlEncodedValue[patchKey]) {
         const oldUrlEncodedValue = internalGet.urlEncodedValue;
-        internalGet.urlEncodedValue = function (value) {
+        internalGet.urlEncodedValue = function (value: any) {
           try {
             return oldUrlEncodedValue(value);
           } catch {

web_src/js/modules/fomantic/base.ts

@@ -5,7 +5,7 @@ export function generateAriaId() {
   return `_aria_auto_id_${ariaIdCounter++}`;
 }
 
-export function linkLabelAndInput(label, input) {
+export function linkLabelAndInput(label: Element, input: Element) {
   const labelFor = label.getAttribute('for');
   const inputId = input.getAttribute('id');
 

web_src/js/modules/fomantic/dimmer.ts

@@ -3,7 +3,7 @@ import {queryElemChildren} from '../../utils/dom.ts';
 
 export function initFomanticDimmer() {
   // stand-in for removed dimmer module
-  $.fn.dimmer = function (arg0, arg1) {
+  $.fn.dimmer = function (arg0: string, arg1: any) {
     if (arg0 === 'add content') {
       const $el = arg1;
       const existingDimmer = document.querySelector('body > .ui.dimmer');

web_src/js/modules/fomantic/dropdown.ts

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {generateAriaId} from './base.ts';
+import type {FomanticInitFunction} from '../../types.ts';
 
 const ariaPatchKey = '_giteaAriaPatchDropdown';
 const fomanticDropdownFn = $.fn.dropdown;
@@ -8,13 +9,13 @@ const fomanticDropdownFn = $.fn.dropdown;
 export function initAriaDropdownPatch() {
   if ($.fn.dropdown === ariaDropdownFn) throw new Error('initAriaDropdownPatch could only be called once');
   $.fn.dropdown = ariaDropdownFn;
-  ariaDropdownFn.settings = fomanticDropdownFn.settings;
+  (ariaDropdownFn as FomanticInitFunction).settings = fomanticDropdownFn.settings;
 }
 
 // the patched `$.fn.dropdown` function, it passes the arguments to Fomantic's `$.fn.dropdown` function, and:
 // * it does the one-time attaching on the first call
 // * it delegates the `onLabelCreate` to the patched `onLabelCreate` to add necessary aria attributes
-function ariaDropdownFn(...args) {
+function ariaDropdownFn(...args: Parameters<FomanticInitFunction>) {
   const ret = fomanticDropdownFn.apply(this, args);
 
   // if the `$().dropdown()` call is without arguments, or it has non-string (object) argument,
@@ -33,7 +34,7 @@ function ariaDropdownFn(...args) {
 
 // make the item has role=option/menuitem, add an id if there wasn't one yet, make items as non-focusable
 // the elements inside the dropdown menu item should not be focusable, the focus should always be on the dropdown primary element.
-function updateMenuItem(dropdown, item) {
+function updateMenuItem(dropdown: HTMLElement, item: HTMLElement) {
   if (!item.id) item.id = generateAriaId();
   item.setAttribute('role', dropdown[ariaPatchKey].listItemRole);
   item.setAttribute('tabindex', '-1');
@@ -43,7 +44,7 @@ function updateMenuItem(dropdown, item) {
  * make the label item and its "delete icon" have correct aria attributes
  * @param {HTMLElement} label
  */
-function updateSelectionLabel(label) {
+function updateSelectionLabel(label: HTMLElement) {
   // the "label" is like this: "<a|div class="ui label" data-value="1">the-label-name <i|svg class="delete icon"/></a>"
   if (!label.id) {
     label.id = generateAriaId();
@@ -59,7 +60,7 @@ function updateSelectionLabel(label) {
 }
 
 // delegate the dropdown's template functions and callback functions to add aria attributes.
-function delegateOne($dropdown) {
+function delegateOne($dropdown: any) {
   const dropdownCall = fomanticDropdownFn.bind($dropdown);
 
   // If there is a "search input" in the "menu", Fomantic will only "focus the input" but not "toggle the menu" when the "dropdown icon" is clicked.
@@ -74,7 +75,7 @@ function delegateOne($dropdown) {
   // the "template" functions are used for dynamic creation (eg: AJAX)
   const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()};
   const dropdownTemplatesMenuOld = dropdownTemplates.menu;
-  dropdownTemplates.menu = function(response, fields, preserveHTML, className) {
+  dropdownTemplates.menu = function(response: any, fields: any, preserveHTML: any, className: Record<string, string>) {
     // when the dropdown menu items are loaded from AJAX requests, the items are created dynamically
     const menuItems = dropdownTemplatesMenuOld(response, fields, preserveHTML, className);
     const div = document.createElement('div');
@@ -89,7 +90,7 @@ function delegateOne($dropdown) {
 
   // the `onLabelCreate` is used to add necessary aria attributes for dynamically created selection labels
   const dropdownOnLabelCreateOld = dropdownCall('setting', 'onLabelCreate');
-  dropdownCall('setting', 'onLabelCreate', function(value, text) {
+  dropdownCall('setting', 'onLabelCreate', function(value: any, text: string) {
     const $label = dropdownOnLabelCreateOld.call(this, value, text);
     updateSelectionLabel($label[0]);
     return $label;
@@ -97,7 +98,7 @@ function delegateOne($dropdown) {
 
   const oldSet = dropdownCall('internal', 'set');
   const oldSetDirection = oldSet.direction;
-  oldSet.direction = function($menu) {
+  oldSet.direction = function($menu: any) {
     oldSetDirection.call(this, $menu);
     const classNames = dropdownCall('setting', 'className');
     $menu = $menu || $dropdown.find('> .menu');
@@ -113,7 +114,7 @@ function delegateOne($dropdown) {
 }
 
 // for static dropdown elements (generated by server-side template), prepare them with necessary aria attributes
-function attachStaticElements(dropdown, focusable, menu) {
+function attachStaticElements(dropdown: HTMLElement, focusable: HTMLElement, menu: HTMLElement) {
   // prepare static dropdown menu list popup
   if (!menu.id) {
     menu.id = generateAriaId();
@@ -125,7 +126,7 @@ function attachStaticElements(dropdown, focusable, menu) {
   menu.setAttribute('role', dropdown[ariaPatchKey].listPopupRole);
 
   // prepare selection label items
-  for (const label of dropdown.querySelectorAll('.ui.label')) {
+  for (const label of dropdown.querySelectorAll<HTMLElement>('.ui.label')) {
     updateSelectionLabel(label);
   }
 
@@ -142,7 +143,7 @@ function attachStaticElements(dropdown, focusable, menu) {
   }
 }
 
-function attachInit(dropdown) {
+function attachInit(dropdown: HTMLElement) {
   dropdown[ariaPatchKey] = {};
   if (dropdown.classList.contains('custom')) return;
 
@@ -161,7 +162,7 @@ function attachInit(dropdown) {
 
   // TODO: multiple selection is only partially supported. Check and test them one by one in the future.
 
-  const textSearch = dropdown.querySelector('input.search');
+  const textSearch = dropdown.querySelector<HTMLElement>('input.search');
   const focusable = textSearch || dropdown; // the primary element for focus, see comment above
   if (!focusable) return;
 
@@ -191,7 +192,7 @@ function attachInit(dropdown) {
   attachStaticElements(dropdown, focusable, menu);
 }
 
-function attachDomEvents(dropdown, focusable, menu) {
+function attachDomEvents(dropdown: HTMLElement, focusable: HTMLElement, menu: HTMLElement) {
   // when showing, it has class: ".animating.in"
   // when hiding, it has class: ".visible.animating.out"
   const isMenuVisible = () => (menu.classList.contains('visible') && !menu.classList.contains('out')) || menu.classList.contains('in');
@@ -215,7 +216,7 @@ function attachDomEvents(dropdown, focusable, menu) {
     }
   };
 
-  dropdown.addEventListener('keydown', (e) => {
+  dropdown.addEventListener('keydown', (e: KeyboardEvent) => {
     // here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler
     if (e.key === 'Enter') {
       const dropdownCall = fomanticDropdownFn.bind($(dropdown));
@@ -260,7 +261,7 @@ function attachDomEvents(dropdown, focusable, menu) {
       deferredRefreshAriaActiveItem(100);
     }, 0);
   }, true);
-  dropdown.addEventListener('click', (e) => {
+  dropdown.addEventListener('click', (e: MouseEvent) => {
     if (isMenuVisible() &&
       ignoreClickPreVisible !== 2 && // dropdown is switch from invisible to visible
       ignoreClickPreEvents === 2 // the click event is related to mousedown+focus

web_src/js/modules/fomantic/modal.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import type {FomanticInitFunction} from '../../types.ts';
 
 const fomanticModalFn = $.fn.modal;
 
@@ -6,12 +7,12 @@ const fomanticModalFn = $.fn.modal;
 export function initAriaModalPatch() {
   if ($.fn.modal === ariaModalFn) throw new Error('initAriaModalPatch could only be called once');
   $.fn.modal = ariaModalFn;
-  ariaModalFn.settings = fomanticModalFn.settings;
+  (ariaModalFn as FomanticInitFunction).settings = fomanticModalFn.settings;
 }
 
 // the patched `$.fn.modal` modal function
 // * it does the one-time attaching on the first call
-function ariaModalFn(...args) {
+function ariaModalFn(...args: Parameters<FomanticInitFunction>) {
   const ret = fomanticModalFn.apply(this, args);
   if (args[0] === 'show' || args[0]?.autoShow) {
     for (const el of this) {

web_src/js/modules/fomantic/transition.ts

@@ -8,13 +8,13 @@ export function initFomanticTransition() {
     'set duration', 'save conditions', 'restore conditions',
   ]);
   // stand-in for removed transition module
-  $.fn.transition = function (arg0, arg1, arg2) {
+  $.fn.transition = function (arg0: any, arg1: any, arg2: any) {
     if (arg0 === 'is supported') return true;
     if (arg0 === 'is animating') return false;
     if (arg0 === 'is inward') return false;
     if (arg0 === 'is outward') return false;
 
-    let argObj;
+    let argObj: Record<string, any>;
     if (typeof arg0 === 'string') {
       // many behaviors are no-op now. https://fomantic-ui.com/modules/transition.html#/usage
       if (transitionNopBehaviors.has(arg0)) return this;

web_src/js/modules/sortable.ts

@@ -1,17 +1,18 @@
-import type {SortableOptions} from 'sortablejs';
+import type {SortableOptions, SortableEvent} from 'sortablejs';
 
-export async function createSortable(el, opts: {handle?: string} & SortableOptions = {}) {
+export async function createSortable(el: HTMLElement, opts: {handle?: string} & SortableOptions = {}) {
+  // @ts-expect-error: wrong type derived by typescript
   const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs');
 
   return new Sortable(el, {
     animation: 150,
     ghostClass: 'card-ghost',
-    onChoose: (e) => {
+    onChoose: (e: SortableEvent) => {
       const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item;
       handle.classList.add('tw-cursor-grabbing');
       opts.onChoose?.(e);
     },
-    onUnchoose: (e) => {
+    onUnchoose: (e: SortableEvent) => {
       const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item;
       handle.classList.remove('tw-cursor-grabbing');
       opts.onUnchoose?.(e);

web_src/js/modules/tippy.ts

@@ -1,7 +1,7 @@
 import tippy, {followCursor} from 'tippy.js';
 import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
 import {formatDatetime} from '../utils/time.ts';
-import type {Content, Instance, Props} from 'tippy.js';
+import type {Content, Instance, Placement, Props} from 'tippy.js';
 
 type TippyOpts = {
   role?: string,
@@ -16,6 +16,7 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance {
   // because we should use our own wrapper functions to handle them, do not let the user override them
   const {onHide, onShow, onDestroy, role, theme, arrow, ...other} = opts;
 
+  // @ts-expect-error: wrong type derived by typescript
   const instance: Instance = tippy(target, {
     appendTo: document.body,
     animation: false,
@@ -65,7 +66,7 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance {
  *
  * Note: "tooltip" doesn't equal to "tippy". "tooltip" means a auto-popup content, it just uses tippy as the implementation.
  */
-function attachTooltip(target: Element, content: Content = null) {
+function attachTooltip(target: Element, content: Content = null): Instance {
   switchTitleToTooltip(target);
 
   content = content ?? target.getAttribute('data-tooltip-content');
@@ -77,16 +78,16 @@ function attachTooltip(target: Element, content: Content = null) {
   const hasClipboardTarget = target.hasAttribute('data-clipboard-target');
   const hideOnClick = !hasClipboardTarget;
 
-  const props = {
+  const props: TippyOpts = {
     content,
     delay: 100,
     role: 'tooltip',
     theme: 'tooltip',
     hideOnClick,
-    placement: target.getAttribute('data-tooltip-placement') || 'top-start',
-    followCursor: target.getAttribute('data-tooltip-follow-cursor') || false,
+    placement: target.getAttribute('data-tooltip-placement') as Placement || 'top-start',
+    followCursor: target.getAttribute('data-tooltip-follow-cursor') as Props['followCursor'] || false,
     ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),
-  } as TippyOpts;
+  };
 
   if (!target._tippy) {
     createTippy(target, props);
@@ -96,7 +97,7 @@ function attachTooltip(target: Element, content: Content = null) {
   return target._tippy;
 }
 
-function switchTitleToTooltip(target: Element) {
+function switchTitleToTooltip(target: Element): void {
   let title = target.getAttribute('title');
   if (title) {
     // apply custom formatting to relative-time's tooltips
@@ -121,14 +122,14 @@ function switchTitleToTooltip(target: Element) {
  * 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) {
+function lazyTooltipOnMouseHover(e: MouseEvent): 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) {
+function attachLazyTooltip(el: Element): void {
   el.addEventListener('mouseover', lazyTooltipOnMouseHover, {capture: true});
 
   // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
@@ -141,13 +142,13 @@ function attachLazyTooltip(el: Element) {
 }
 
 // Activate the tooltip for all children elements.
-function attachChildrenLazyTooltip(target: Element) {
+function attachChildrenLazyTooltip(target: Element): void {
   for (const el of target.querySelectorAll<Element>('[data-tooltip-content]')) {
     attachLazyTooltip(el);
   }
 }
 
-export function initGlobalTooltips() {
+export function initGlobalTooltips(): void {
   // use MutationObserver to detect new "data-tooltip-content" elements added to the DOM, or attributes changed
   const observerConnect = (observer: MutationObserver) => observer.observe(document, {
     subtree: true,
@@ -178,7 +179,7 @@ export function initGlobalTooltips() {
   attachChildrenLazyTooltip(document.documentElement);
 }
 
-export function showTemporaryTooltip(target: Element, content: Content) {
+export function showTemporaryTooltip(target: Element, content: Content): void {
   // if the target is inside a dropdown, the menu will be hidden soon
   // so display the tooltip on the dropdown instead
   target = target.closest('.ui.dropdown') || target;

web_src/js/modules/worker.ts

@@ -2,7 +2,7 @@ import {sleep} from '../utils.ts';
 
 const {appSubUrl} = window.config;
 
-export async function logoutFromWorker() {
+export async function logoutFromWorker(): Promise<void> {
   // wait for a while because other requests (eg: logout) may be in the flight
   await sleep(5000);
   window.location.href = `${appSubUrl}/`;