Fix remaining typescript issues, enable tsc (#32840)

Fixes 79 typescript errors. Discovered at least two bugs in
`notifications.ts`, and I'm pretty sure this feature was at least
partially broken and may still be, I don't really know how to test it.

After this, only like ~10 typescript errors remain in the codebase but
those are harder to solve.

---------

Co-authored-by: wxiaoguang <[email protected]>

Author: silverwind

Makefile

@@ -377,12 +377,12 @@ lint-backend-fix: lint-go-fix lint-go-vet lint-editorconfig
 .PHONY: lint-js
 lint-js: node_modules
 	npx eslint --color --max-warnings=0 --ext js,ts,vue $(ESLINT_FILES)
-#	npx vue-tsc
+	npx vue-tsc
 
 .PHONY: lint-js-fix
 lint-js-fix: node_modules
 	npx eslint --color --max-warnings=0 --ext js,ts,vue $(ESLINT_FILES) --fix
-#	npx vue-tsc
+	npx vue-tsc
 
 .PHONY: lint-css
 lint-css: node_modules
@@ -451,10 +451,6 @@ lint-templates: .venv node_modules
 lint-yaml: .venv
 	@poetry run yamllint .
 
-.PHONY: tsc
-tsc:
-	npx vue-tsc
-
 .PHONY: watch
 watch:
 	@bash tools/watch.sh

package-lock.json

@@ -66,6 +66,7 @@
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "4.4.1",
     "@playwright/test": "1.49.0",
+    "@silverwind/vue-tsc": "2.1.13",
     "@stoplight/spectral-cli": "6.14.2",
     "@stylistic/eslint-plugin-js": "2.11.0",
     "@stylistic/stylelint-plugin": "3.1.1",
@@ -110,8 +111,7 @@
     "type-fest": "4.30.0",
     "updates": "16.4.0",
     "vite-string-plugin": "1.3.4",
-    "vitest": "2.1.8",
-    "vue-tsc": "2.1.10"
+    "vitest": "2.1.8"
   },
   "browserslist": [
     "defaults"

package.json

@@ -7,7 +7,8 @@
   ],
   "compilerOptions": {
     "target": "es2020",
-    "module": "nodenext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "lib": ["dom", "dom.iterable", "dom.asynciterable", "esnext"],
     "allowImportingTsExtensions": true,
     "allowJs": true,

tsconfig.json

@@ -7,21 +7,20 @@ const reIssueSharpIndex = /^#(\d+)$/; // eg: "#123"
 const reIssueOwnerRepoIndex = /^([-.\w]+)\/([-.\w]+)#(\d+)$/;  // eg: "{owner}/{repo}#{index}"
 
 // if the searchText can be parsed to an "issue goto link", return the link, otherwise return empty string
-export function parseIssueListQuickGotoLink(repoLink, searchText) {
+export function parseIssueListQuickGotoLink(repoLink: string, searchText: string) {
   searchText = searchText.trim();
   let targetUrl = '';
   if (repoLink) {
     // try to parse it in current repo
     if (reIssueIndex.test(searchText)) {
       targetUrl = `${repoLink}/issues/${searchText}`;
     } else if (reIssueSharpIndex.test(searchText)) {
-      targetUrl = `${repoLink}/issues/${searchText.substr(1)}`;
+      targetUrl = `${repoLink}/issues/${searchText.substring(1)}`;
     }
   } else {
     // try to parse it for a global search (eg: "owner/repo#123")
-    const matchIssueOwnerRepoIndex = searchText.match(reIssueOwnerRepoIndex);
-    if (matchIssueOwnerRepoIndex) {
-      const [_, owner, repo, index] = matchIssueOwnerRepoIndex;
+    const [_, owner, repo, index] = reIssueOwnerRepoIndex.exec(searchText) || [];
+    if (owner) {
       targetUrl = `${appSubUrl}/${owner}/${repo}/issues/${index}`;
     }
   }
@@ -33,7 +32,7 @@ export function initCommonIssueListQuickGoto() {
   if (!goto) return;
 
   const form = goto.closest('form');
-  const input = form.querySelector('input[name=q]');
+  const input = form.querySelector<HTMLInputElement>('input[name=q]');
   const repoLink = goto.getAttribute('data-repo-link');
 
   form.addEventListener('submit', (e) => {

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

@@ -283,8 +283,8 @@ export class ComboMarkdownEditor {
     ];
   }
 
-  parseEasyMDEToolbar(EasyMDE, actions) {
-    this.easyMDEToolbarActions = this.easyMDEToolbarActions || easyMDEToolbarActions(EasyMDE, this);
+  parseEasyMDEToolbar(easyMde: typeof EasyMDE, actions) {
+    this.easyMDEToolbarActions = this.easyMDEToolbarActions || easyMDEToolbarActions(easyMde, this);
     const processed = [];
     for (const action of actions) {
       const actionButton = this.easyMDEToolbarActions[action];

web_src/js/features/comp/ComboMarkdownEditor.ts

@@ -1,100 +1,102 @@
 import {svg} from '../../svg.ts';
+import type EasyMDE from 'easymde';
+import type {ComboMarkdownEditor} from './ComboMarkdownEditor.ts';
 
-export function easyMDEToolbarActions(EasyMDE, editor) {
-  const actions = {
+export function easyMDEToolbarActions(easyMde: typeof EasyMDE, editor: ComboMarkdownEditor): Record<string, Partial<EasyMDE.ToolbarIcon | string>> {
+  const actions: Record<string, Partial<EasyMDE.ToolbarIcon> | string> = {
     '|': '|',
     'heading-1': {
-      action: EasyMDE.toggleHeading1,
+      action: easyMde.toggleHeading1,
       icon: svg('octicon-heading'),
       title: 'Heading 1',
     },
     'heading-2': {
-      action: EasyMDE.toggleHeading2,
+      action: easyMde.toggleHeading2,
       icon: svg('octicon-heading'),
       title: 'Heading 2',
     },
     'heading-3': {
-      action: EasyMDE.toggleHeading3,
+      action: easyMde.toggleHeading3,
       icon: svg('octicon-heading'),
       title: 'Heading 3',
     },
     'heading-smaller': {
-      action: EasyMDE.toggleHeadingSmaller,
+      action: easyMde.toggleHeadingSmaller,
       icon: svg('octicon-heading'),
       title: 'Decrease Heading',
     },
     'heading-bigger': {
-      action: EasyMDE.toggleHeadingBigger,
+      action: easyMde.toggleHeadingBigger,
       icon: svg('octicon-heading'),
       title: 'Increase Heading',
     },
     'bold': {
-      action: EasyMDE.toggleBold,
+      action: easyMde.toggleBold,
       icon: svg('octicon-bold'),
       title: 'Bold',
     },
     'italic': {
-      action: EasyMDE.toggleItalic,
+      action: easyMde.toggleItalic,
       icon: svg('octicon-italic'),
       title: 'Italic',
     },
     'strikethrough': {
-      action: EasyMDE.toggleStrikethrough,
+      action: easyMde.toggleStrikethrough,
       icon: svg('octicon-strikethrough'),
       title: 'Strikethrough',
     },
     'quote': {
-      action: EasyMDE.toggleBlockquote,
+      action: easyMde.toggleBlockquote,
       icon: svg('octicon-quote'),
       title: 'Quote',
     },
     'code': {
-      action: EasyMDE.toggleCodeBlock,
+      action: easyMde.toggleCodeBlock,
       icon: svg('octicon-code'),
       title: 'Code',
     },
     'link': {
-      action: EasyMDE.drawLink,
+      action: easyMde.drawLink,
       icon: svg('octicon-link'),
       title: 'Link',
     },
     'unordered-list': {
-      action: EasyMDE.toggleUnorderedList,
+      action: easyMde.toggleUnorderedList,
       icon: svg('octicon-list-unordered'),
       title: 'Unordered List',
     },
     'ordered-list': {
-      action: EasyMDE.toggleOrderedList,
+      action: easyMde.toggleOrderedList,
       icon: svg('octicon-list-ordered'),
       title: 'Ordered List',
     },
     'image': {
-      action: EasyMDE.drawImage,
+      action: easyMde.drawImage,
       icon: svg('octicon-image'),
       title: 'Image',
     },
     'table': {
-      action: EasyMDE.drawTable,
+      action: easyMde.drawTable,
       icon: svg('octicon-table'),
       title: 'Table',
     },
     'horizontal-rule': {
-      action: EasyMDE.drawHorizontalRule,
+      action: easyMde.drawHorizontalRule,
       icon: svg('octicon-horizontal-rule'),
       title: 'Horizontal Rule',
     },
     'preview': {
-      action: EasyMDE.togglePreview,
+      action: easyMde.togglePreview,
       icon: svg('octicon-eye'),
       title: 'Preview',
     },
     'fullscreen': {
-      action: EasyMDE.toggleFullScreen,
+      action: easyMde.toggleFullScreen,
       icon: svg('octicon-screen-full'),
       title: 'Fullscreen',
     },
     'side-by-side': {
-      action: EasyMDE.toggleSideBySide,
+      action: easyMde.toggleSideBySide,
       icon: svg('octicon-columns'),
       title: 'Side by Side',
     },

web_src/js/features/comp/EasyMDEToolbarActions.ts

@@ -3,7 +3,7 @@ import {fomanticQuery} from '../../modules/fomantic/base.ts';
 
 export function initCompReactionSelector(parent: ParentNode = document) {
   for (const container of parent.querySelectorAll('.issue-content, .diff-file-body')) {
-    container.addEventListener('click', async (e) => {
+    container.addEventListener('click', async (e: MouseEvent & {target: HTMLElement}) => {
       // 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;

web_src/js/features/comp/ReactionSelector.ts

@@ -23,7 +23,7 @@ export function initCompWebHookEditor() {
   }
 
   // some webhooks (like Gitea) allow to set the request method (GET/POST), and it would toggle the "Content Type" field
-  const httpMethodInput = document.querySelector('#http_method');
+  const httpMethodInput = document.querySelector<HTMLInputElement>('#http_method');
   if (httpMethodInput) {
     const updateContentType = function () {
       const visible = httpMethodInput.value === 'POST';