Remove and forbid @ts-expect-error

eslint.config.ts

@@ -15,6 +15,7 @@ import vue from 'eslint-plugin-vue';
 import vueScopedCss from 'eslint-plugin-vue-scoped-css';
 import wc from 'eslint-plugin-wc';
 import {defineConfig, globalIgnores} from 'eslint/config';
+import type {ESLint} from 'eslint';
 
 const jsExts = ['js', 'mjs', 'cjs'] as const;
 const tsExts = ['ts', 'mts', 'cts'] as const;
@@ -62,8 +63,7 @@ export default defineConfig([
       '@stylistic': stylistic,
       '@typescript-eslint': typescriptPlugin.plugin,
       'array-func': arrayFunc,
-      // @ts-expect-error -- https://github.com/un-ts/eslint-plugin-import-x/issues/203
-      'import-x': importPlugin,
+      'import-x': importPlugin as unknown as ESLint.Plugin, // https://github.com/un-ts/eslint-plugin-import-x/issues/203
       regexp,
       sonarjs,
       unicorn,
@@ -156,7 +156,7 @@ export default defineConfig([
       '@typescript-eslint/adjacent-overload-signatures': [0],
       '@typescript-eslint/array-type': [0],
       '@typescript-eslint/await-thenable': [2],
-      '@typescript-eslint/ban-ts-comment': [2, {'ts-expect-error': false, 'ts-ignore': true, 'ts-nocheck': false, 'ts-check': false}],
+      '@typescript-eslint/ban-ts-comment': [2, {'ts-expect-error': true, 'ts-ignore': true, 'ts-nocheck': false, 'ts-check': false}],
       '@typescript-eslint/ban-tslint-comment': [0],
       '@typescript-eslint/class-literal-property-style': [0],
       '@typescript-eslint/class-methods-use-this': [0],
@@ -924,8 +924,7 @@ export default defineConfig([
     },
     extends: [
       vue.configs['flat/recommended'],
-      // @ts-expect-error
-      vueScopedCss.configs['flat/recommended'],
+      vueScopedCss.configs['flat/recommended'] as any,
     ],
     rules: {
       'vue/attributes-order': [0],

tsconfig.json

@@ -13,7 +13,7 @@
     "target": "es2020",
     "module": "esnext",
     "moduleResolution": "bundler",
-    "lib": ["dom", "dom.iterable", "dom.asynciterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "dom.asynciterable", "esnext", "webworker"],
     "allowImportingTsExtensions": true,
     "allowJs": true,
     "allowSyntheticDefaultImports": true,

types.d.ts

@@ -2,18 +2,105 @@ declare module '@techknowlogick/license-checker-webpack-plugin' {
   const plugin: any;
   export = plugin;
 }
+
 declare module 'eslint-plugin-no-use-extend-native' {
   import type {Eslint} from 'eslint';
   const plugin: Eslint.Plugin;
   export = plugin;
 }
+
 declare module 'eslint-plugin-array-func' {
   import type {Eslint} from 'eslint';
   const plugin: Eslint.Plugin;
   export = plugin;
 }
+
 declare module 'eslint-plugin-github' {
   import type {Eslint} from 'eslint';
   const plugin: Eslint.Plugin;
   export = plugin;
 }
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.css' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.vue' {
+  import type {DefineComponent} from 'vue';
+  const component: DefineComponent<unknown, unknown, any>;
+  export default component;
+  // Here we declare all exports from vue files so `tsc` or `tsgo` can work for
+  // non-vue files. To lint .vue files, `vue-tsc` must be used.
+  export function initDashboardRepoList(): void;
+  export function initRepositoryActionView(): void;
+}
+
+declare module 'htmx.org/dist/htmx.esm.js' {
+  const value = await import('htmx.org');
+  export default value;
+}
+
+declare module 'swagger-ui-dist/swagger-ui-es-bundle.js' {
+  const value = await import('swagger-ui-dist');
+  export default value.SwaggerUIBundle;
+}
+
+declare module 'asciinema-player' {
+  interface AsciinemaPlayer {
+    create(src: string, element: HTMLElement, options?: Record<string, unknown>): void;
+  }
+  const exports: AsciinemaPlayer;
+  export = exports;
+}
+
+declare module '@citation-js/core' {
+  export class Cite {
+    constructor(data: string);
+    format(format: string, options?: Record<string, any>): string;
+  }
+  export const plugins: {
+    config: {
+      get(name: string): any;
+    };
+  };
+}
+
+declare module '@citation-js/plugin-software-formats' {}
+declare module '@citation-js/plugin-bibtex' {}
+declare module '@citation-js/plugin-csl' {}
+
+declare module 'vue-bar-graph' {
+  import type {DefineComponent} from 'vue';
+
+  interface BarGraphPoint {
+    value: number;
+    label: string;
+  }
+
+  export const VueBarGraph: DefineComponent<{
+    points?: Array<BarGraphPoint>;
+    barColor?: string;
+    textColor?: string;
+    textAltColor?: string;
+    height?: number;
+    labelHeight?: number;
+  }>;
+}
+
+declare module '@mcaptcha/vanilla-glue' {
+  export let INPUT_NAME: string;
+  export default class Widget {
+    constructor(options: {
+      siteKey: {
+        instanceUrl: URL;
+        key: string;
+      };
+    });
+  }
+}

web_src/js/bootstrap.ts

@@ -80,13 +80,12 @@ function initGlobalErrorHandler() {
   // we added an event handler for window error at the very beginning of <script> of page head the
   // handler calls `_globalHandlerErrors.push` (array method) to record all errors occur before
   // this init then in this init, we can collect all error events and show them.
-  for (const e of window._globalHandlerErrors || []) {
+  for (const e of (window._globalHandlerErrors as Iterable<ErrorEvent & PromiseRejectionEvent>) || []) {
     processWindowErrorEvent(e);
   }
   // then, change _globalHandlerErrors to an object with push method, to process further error
   // events directly
-  // @ts-expect-error -- this should be refactored to not use a fake array
-  window._globalHandlerErrors = {_inited: true, push: (e: ErrorEvent & PromiseRejectionEvent) => processWindowErrorEvent(e)};
+  window._globalHandlerErrors = {_inited: true, push: (e: ErrorEvent & PromiseRejectionEvent) => processWindowErrorEvent(e)} as any;
 }
 
 initGlobalErrorHandler();

web_src/js/components/RepoActionView.vue

@@ -13,6 +13,8 @@ import {localUserSettings} from '../modules/user-settings.ts';
 // see "models/actions/status.go", if it needs to be used somewhere else, move it to a shared file like "types/actions.ts"
 type RunStatus = 'unknown' | 'waiting' | 'running' | 'success' | 'failure' | 'cancelled' | 'skipped' | 'blocked';
 
+type StepContainerElement = HTMLElement & {_stepLogsActiveContainer?: HTMLElement}
+
 type LogLine = {
   index: number;
   timestamp: number;
@@ -221,19 +223,18 @@ export default defineComponent({
     },
 
     // get the job step logs container ('.job-step-logs')
-    getJobStepLogsContainer(stepIndex: number): HTMLElement {
+    getJobStepLogsContainer(stepIndex: number): StepContainerElement {
       return (this.$refs.logs as any)[stepIndex];
     },
 
     // get the active logs container element, either the `job-step-logs` or the `job-log-list` in the `job-log-group`
-    getActiveLogsContainer(stepIndex: number): HTMLElement {
+    getActiveLogsContainer(stepIndex: number): StepContainerElement {
       const el = this.getJobStepLogsContainer(stepIndex);
-      // @ts-expect-error - _stepLogsActiveContainer is a custom property
       return el._stepLogsActiveContainer ?? el;
     },
     // begin a log group
     beginLogGroup(stepIndex: number, startTime: number, line: LogLine, cmd: LogLineCommand) {
-      const el = (this.$refs.logs as any)[stepIndex];
+      const el = (this.$refs.logs as any)[stepIndex] as StepContainerElement;
       const elJobLogGroupSummary = createElementFromAttrs('summary', {class: 'job-log-group-summary'},
         this.createLogLine(stepIndex, startTime, {
           index: line.index,
@@ -395,7 +396,7 @@ export default defineComponent({
         }
 
         // auto-scroll to the last log line of the last step
-        let autoScrollJobStepElement: HTMLElement | undefined;
+        let autoScrollJobStepElement: StepContainerElement | undefined;
         for (let stepIndex = 0; stepIndex < this.currentJob.steps.length; stepIndex++) {
           if (!autoScrollStepIndexes.get(stepIndex)) continue;
           autoScrollJobStepElement = this.getJobStepLogsContainer(stepIndex);

web_src/js/components/RepoActivityTopAuthors.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// @ts-expect-error - module exports no types
 import {VueBarGraph} from 'vue-bar-graph';
 import {computed, onMounted, shallowRef, useTemplateRef, type ShallowRef} from 'vue';
 

web_src/js/components/RepoBranchTagSelector.vue

@@ -155,9 +155,8 @@ export default defineComponent({
       return -1;
     },
     getActiveItem() {
-      const el = this.$refs[`listItem${this.activeItemIndex}`];
-      // @ts-expect-error - el is unknown type
-      return (el && el.length) ? el[0] : null;
+      const el = this.$refs[`listItem${this.activeItemIndex}`] as Array<HTMLDivElement>;
+      return el?.length ? el[0] : null;
     },
     keydown(e: KeyboardEvent) {
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
@@ -174,7 +173,7 @@ export default defineComponent({
           return;
         }
         this.activeItemIndex = nextIndex;
-        this.getActiveItem().scrollIntoView({block: 'nearest'});
+        this.getActiveItem()!.scrollIntoView({block: 'nearest'});
       } else if (e.key === 'Enter') {
         e.preventDefault();
         this.getActiveItem()?.click();

web_src/js/components/RepoContributors.vue

@@ -41,6 +41,15 @@ const customEventListener: Plugin = {
   },
 };
 
+type LineOptions = ChartOptions<'line'> & {
+ plugins?: {
+   customEventListener?: {
+     chartType: string;
+     instance: unknown;
+   };
+ };
+}
+
 Chart.defaults.color = chartJsColors.text;
 Chart.defaults.borderColor = chartJsColors.border;
 
@@ -251,7 +260,7 @@ export default defineComponent({
       }
     },
 
-    getOptions(type: string): ChartOptions<'line'> {
+    getOptions(type: string): LineOptions {
       return {
         responsive: true,
         maintainAspectRatio: false,
@@ -264,7 +273,6 @@ export default defineComponent({
             position: 'top',
             align: 'center',
           },
-          // @ts-expect-error: bug in chart.js types
           customEventListener: {
             chartType: type,
             instance: this,

web_src/js/components/RepoRecentCommits.vue

@@ -8,6 +8,7 @@ import {
   TimeScale,
   type ChartOptions,
   type ChartData,
+  type ChartDataset,
 } from 'chart.js';
 import {GET} from '../modules/fetch.ts';
 import {Bar} from 'vue-chartjs';
@@ -83,13 +84,12 @@ function toGraphData(data: DayData[]): ChartData<'bar'> {
   return {
     datasets: [
       {
-        // @ts-expect-error -- bar chart expects one-dimensional data, but apparently x/y still works
         data: data.map((i) => ({x: i.week, y: i.commits})),
         label: 'Commits',
         backgroundColor: chartJsColors['commits'],
         borderWidth: 0,
         tension: 0.3,
-      },
+      } as unknown as ChartDataset<'bar'>,
     ],
   };
 }

web_src/js/features/captcha.ts

@@ -41,7 +41,6 @@ export async function initCaptcha() {
       // * the INPUT_NAME is a "const", it should not be changed.
       // * the "mCaptcha.default" is actually the "Widget".
 
-      // @ts-expect-error TS2540: Cannot assign to 'INPUT_NAME' because it is a read-only property.
       mCaptcha.INPUT_NAME = 'm-captcha-response';
       const instanceURL = captchaEl.getAttribute('data-instance-url')!;
 

web_src/js/features/citation.ts

@@ -6,13 +6,9 @@ const {pageData} = window.config;
 
 async function initInputCitationValue(citationCopyApa: HTMLButtonElement, citationCopyBibtex: HTMLButtonElement) {
   const [{Cite, plugins}] = await Promise.all([
-    // @ts-expect-error: module exports no types
     import(/* webpackChunkName: "citation-js-core" */'@citation-js/core'),
-    // @ts-expect-error: module exports no types
     import(/* webpackChunkName: "citation-js-formats" */'@citation-js/plugin-software-formats'),
-    // @ts-expect-error: module exports no types
     import(/* webpackChunkName: "citation-js-bibtex" */'@citation-js/plugin-bibtex'),
-    // @ts-expect-error: module exports no types
     import(/* webpackChunkName: "citation-js-csl" */'@citation-js/plugin-csl'),
   ]);
   const {citationFileContent} = pageData;

web_src/js/features/eventsource.sharedworker.ts

@@ -72,10 +72,9 @@ class Source {
 const sourcesByUrl = new Map<string, Source | null>();
 const sourcesByPort = new Map<MessagePort, Source | null>();
 
-// @ts-expect-error: typescript bug?
-self.addEventListener('connect', (e: MessageEvent) => {
+(self as unknown as SharedWorkerGlobalScope).addEventListener('connect', (e: MessageEvent) => {
   for (const port of e.ports) {
-    port.addEventListener('message', (event) => {
+    port.addEventListener('message', (event: MessageEvent) => {
       if (!self.EventSource) {
         // some browsers (like PaleMoon, Firefox<53) don't support EventSource in SharedWorkerGlobalScope.
         // this event handler needs EventSource when doing "new Source(url)", so just post a message back to the caller,

web_src/js/features/repo-diff.ts

@@ -56,8 +56,7 @@ function initRepoDiffConversationForm() {
       const idx = newConversationHolder.getAttribute('data-idx');
 
       form.closest('.conversation-holder')!.replaceWith(newConversationHolder);
-      // @ts-expect-error -- prevent further usage of the form because it should have been replaced
-      form = null;
+      (form as any) = null; // prevent further usage of the form because it should have been replaced
 
       if (trLineType) {
         // if there is a line-type for the "tr", it means the form is on the diff page

web_src/js/features/repo-issue-list.ts

@@ -201,7 +201,7 @@ async function pinMoveEnd(e: SortableEvent) {
 }
 
 async function initIssuePinSort() {
-  const pinDiv = document.querySelector('#issue-pins');
+  const pinDiv = document.querySelector<HTMLElement>('#issue-pins');
 
   if (pinDiv === null) return;
 

web_src/js/features/repo-projects.ts

@@ -38,7 +38,7 @@ async function moveIssue({item, from, to, oldIndex}: SortableEvent): Promise<voi
 
 async function initRepoProjectSortable(): Promise<void> {
   // the HTML layout is: #project-board.board > .project-column .cards > .issue-card
-  const mainBoard = document.querySelector('#project-board')!;
+  const mainBoard = document.querySelector<HTMLElement>('#project-board')!;
   let boardColumns = mainBoard.querySelectorAll<HTMLElement>('.project-column');
   createSortable(mainBoard, {
     group: 'project-column',
@@ -67,7 +67,7 @@ async function initRepoProjectSortable(): Promise<void> {
   });
 
   for (const boardColumn of boardColumns) {
-    const boardCardList = boardColumn.querySelector('.cards')!;
+    const boardCardList = boardColumn.querySelector<HTMLElement>('.cards')!;
     createSortable(boardCardList, {
       group: 'shared',
       onAdd: moveIssue, // eslint-disable-line @typescript-eslint/no-misused-promises

web_src/js/features/repo-settings-branches.test.ts

@@ -56,12 +56,11 @@ describe('Repository Branch Settings', () => {
     vi.mocked(POST).mockResolvedValue({ok: true} as Response);
 
     // Mock createSortable to capture and execute the onEnd callback
-    vi.mocked(createSortable).mockImplementation(async (_el: Element, options: SortableOptions | undefined) => {
+    vi.mocked(createSortable).mockImplementation(async (_el: HTMLElement, options: SortableOptions | undefined) => {
       if (options?.onEnd) {
         options.onEnd(new Event('SortableEvent') as SortableEvent);
       }
-      // @ts-expect-error: mock is incomplete
-      return {destroy: vi.fn()} as Sortable;
+      return {destroy: vi.fn()} as unknown as Sortable;
     });
 
     initRepoSettingsBranchesDrag();

web_src/js/features/repo-settings-branches.ts

@@ -4,7 +4,7 @@ import {showErrorToast} from '../modules/toast.ts';
 import {queryElemChildren} from '../utils/dom.ts';
 
 export function initRepoSettingsBranchesDrag() {
-  const protectedBranchesList = document.querySelector('#protected-branches-list');
+  const protectedBranchesList = document.querySelector<HTMLElement>('#protected-branches-list');
   if (!protectedBranchesList) return;
 
   createSortable(protectedBranchesList, {