Migrate to TypeScript v5 (#2850)

* Bump TypeScript to v5.4

Also updated tsconfig.json to remove a deprecated config.

* Fix type error

* Fix type error

* Fix type error

* Fix type error

* Fix type error

* Fix lint dependencies and config

* Fix type errors

* Fix type error

* Fix format

* Fix type errors

Also standardized React hooks import style.

* Fix type error

* Fix type error

* Fix format

* Bump typescript to v5.4.3

* Fix type errors

* Add some `as any` assertions

FIXMEs were also incorporated for future refactoring.

* Update lockfile post-merge

* Bump dependencies

* Update lockfile post-merge

* Create type-safe object helpers

* Fix type error

* Fix type error

* Fix type error

* Create more type helpers

* Fix type error

* Fix type error

Also removed unnecessary type annotation.

* Fix type error

* Fix type error

* Fix type errors

* Fix type error

* Fix type error

* Fix type errors

* Fix type error

* Fix type error

* Refactor filter logic to fix type error

* Fix types

* Address comments

Author: RichDom2185

.eslintrc.json

@@ -1,5 +1,11 @@
 {
-  "extends": ["react-app", "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    // "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+    // "plugin:react/recommended",
+    // "plugin:react/jsx-runtime"
+  ],
   "plugins": ["simple-import-sort"],
   "rules": {
     "no-restricted-imports": [
@@ -18,6 +24,8 @@
         ]
       }
     ],
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-duplicate-enum-values": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/camelcase": "off",

package.json

@@ -127,13 +127,16 @@
     "@types/showdown": "^2.0.1",
     "@types/uuid": "^9.0.0",
     "@types/xml2js": "^0.4.11",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
     "babel-core": "6",
     "babel-runtime": "^6.26.0",
     "buffer": "^6.0.3",
     "canvas": "^2.11.2",
     "constants-browserify": "^1.0.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "https-browserify": "^1.0.0",
     "husky": "^9.0.0",
@@ -151,7 +154,7 @@
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",
-    "typescript": "~4.9.0",
+    "typescript": "^5.4.3",
     "url": "^0.11.1",
     "webpack-bundle-analyzer": "^4.9.0"
   },

src/commons/XMLParser/XMLParserHelper.ts

@@ -167,7 +167,11 @@ const makeQuestions = (task: XmlParseStrTask): [Question[], number] => {
 
 const makeMCQ = (problem: XmlParseStrCProblem, question: BaseQuestion): IMCQQuestion => {
   const choicesVal: MCQChoice[] = [];
-  const solution = problem.SNIPPET ? problem.SNIPPET[0].SOLUTION : undefined;
+  const snippet = problem.SNIPPET;
+  // FIXME: I think `XmlParseStrCProblem` type definition is incorrect
+  // FIXME: Remove `as unknown as keyof typeof snippet` when fixed
+  // @ts-expect-error broken type definition to be fixed above
+  const solution = snippet ? snippet[0 as unknown as keyof typeof snippet].SOLUTION : undefined;
   let solutionVal = 0;
   problem.CHOICE.forEach((choice: XmlParseStrProblemChoice, i: number) => {
     choicesVal.push({
@@ -269,7 +273,8 @@ const exportLibrary = (library: Library) => {
         name: library.external.name
       }
     }
-  };
+    // FIXME: Replace any with proper type
+  } as any;
 
   if (library.external.symbols.length !== 0) {
     /* tslint:disable:no-string-literal */
@@ -327,7 +332,8 @@ export const assessmentToXml = (
       },
       TEXT: question.content,
       CHOICE: [] as any[]
-    };
+      // FIXME: Replace any with proper type
+    } as any;
 
     if (question.library.chapter !== -1) {
       /* tslint:disable:no-string-literal */

src/commons/collabEditing/CollabEditingHelper.ts

@@ -1,14 +1,14 @@
 import Constants from '../utils/Constants';
 
-const protocolMap = {
+const protocolMap = Object.freeze({
   'http:': 'ws:',
   'https:': 'wss:'
-};
+});
 
 export function getSessionUrl(sessionId: string, ws?: boolean): string {
   const url = new URL(sessionId, Constants.sharedbBackendUrl);
-  if (ws) {
-    url.protocol = protocolMap[url.protocol];
+  if (ws && Object.keys(protocolMap).includes(url.protocol)) {
+    url.protocol = protocolMap[url.protocol as keyof typeof protocolMap];
   }
   return url.toString();
 }

src/commons/documentation/Documentation.ts

@@ -3,7 +3,14 @@ import { deviceTypes } from 'src/features/remoteExecution/RemoteExecutionTypes';
 
 import { externalLibraries } from '../application/types/ExternalTypes';
 
-const externalLibrariesDocumentation = {};
+type DocType = {
+  caption: string;
+  value: string;
+  meta: string;
+  docHTML?: string;
+};
+
+const externalLibrariesDocumentation: Record<string, DocType[]> = {};
 
 const MAX_CAPTION_LENGTH = 27;
 
@@ -15,13 +22,14 @@ function shortenCaption(name: string): string {
   return (name = name.substring(0, MAX_CAPTION_LENGTH - 3) + '...');
 }
 
-function mapExternalLibraryName(name: string) {
+function mapExternalLibraryName(name: string): DocType {
   if (name in SourceDocumentation.ext_lib) {
+    const key = name as keyof typeof SourceDocumentation.ext_lib;
     return {
-      caption: shortenCaption(name),
-      value: name,
-      meta: SourceDocumentation.ext_lib[name].meta,
-      docHTML: SourceDocumentation.ext_lib[name].description
+      caption: shortenCaption(key),
+      value: key,
+      meta: SourceDocumentation.ext_lib[key].meta,
+      docHTML: SourceDocumentation.ext_lib[key].description
     };
   } else {
     return {
@@ -42,7 +50,7 @@ for (const deviceType of deviceTypes) {
     deviceType.internalFunctions.map(mapExternalLibraryName);
 }
 
-const builtinDocumentation = {};
+const builtinDocumentation: Record<string, DocType[]> = {};
 
 Object.entries(SourceDocumentation.builtins).forEach((chapterDoc: any) => {
   const [chapter, docs] = chapterDoc;

src/commons/editingWorkspace/EditingWorkspace.tsx

@@ -723,7 +723,7 @@ const EditingWorkspace: React.FC<EditingWorkspaceProps> = props => {
 };
 
 function uniq(a: string[]) {
-  const seen = {};
+  const seen: Record<string, boolean> = {};
   return a.filter(item => (seen.hasOwnProperty(item) ? false : (seen[item] = true)));
 }
 

src/commons/editor/Editor.tsx

@@ -15,6 +15,7 @@ import { IAceEditor } from 'react-ace/lib/types';
 import { HotKeys } from 'react-hotkeys';
 import { EditorBinding } from '../WorkspaceSettingsContext';
 import { getModeString, selectMode } from '../utils/AceHelper';
+import { objectEntries } from '../utils/TypeHelper';
 import { KeyFunction, keyBindings } from './EditorHotkeys';
 import { AceMouseEvent, HighlightedLines, Position } from './EditorTypes';
 
@@ -537,7 +538,7 @@ const EditorBase = React.memo((props: EditorProps & LocalStateProps) => {
     ]
   );
 
-  aceEditorProps.commands = Object.entries(keyHandlers)
+  aceEditorProps.commands = objectEntries(keyHandlers)
     .filter(([_, exec]) => exec)
     .map(([name, exec]) => ({ name, bindKey: keyBindings[name], exec: exec! }));
 

src/commons/editor/tabs/utils.ts

@@ -27,7 +27,9 @@ export const getShortestUniqueFilePaths = (originalFilePaths: string[]): string[
   // Split each original file path into path segments and store the mapping from file
   // path to path segments for O(1) lookup. Since we only deal with the BrowserFS file
   // system, the path separator will always be '/'.
-  const filePathSegments: Record<string, string[]> = originalFilePaths.reduce(
+  const filePathSegments: Record<string, string[]> = originalFilePaths.reduce<
+    typeof filePathSegments
+  >(
     (segments, filePath) => ({
       ...segments,
       // It is necessary to remove empty segments to deal with the very first '/' in
@@ -48,15 +50,18 @@ export const getShortestUniqueFilePaths = (originalFilePaths: string[]): string[
     // to any original file path which transforms into it.
     const shortenedToOriginalFilePaths: Record<string, string[]> = Object.entries(
       filePathSegments
-    ).reduce((filePaths, [originalFilePath, filePathSegments]) => {
-      // Note that if there are fewer path segments than the number being sliced,
-      // all of the path segments will be returned without error.
-      const shortenedFilePath = '/' + filePathSegments.slice(-numOfPathSegments).join('/');
-      return {
-        ...filePaths,
-        [shortenedFilePath]: (filePaths[shortenedFilePath] ?? []).concat(originalFilePath)
-      };
-    }, {});
+    ).reduce<typeof shortenedToOriginalFilePaths>(
+      (filePaths, [originalFilePath, filePathSegments]) => {
+        // Note that if there are fewer path segments than the number being sliced,
+        // all of the path segments will be returned without error.
+        const shortenedFilePath = '/' + filePathSegments.slice(-numOfPathSegments).join('/');
+        return {
+          ...filePaths,
+          [shortenedFilePath]: (filePaths[shortenedFilePath] ?? []).concat(originalFilePath)
+        };
+      },
+      {}
+    );
     // Each shortened file path that only has a single corresponding original file
     // path is added to the unique shortened file paths record and their entry in
     // the file path segments record is removed to prevent further processing.

src/commons/sagas/WorkspaceSaga/index.ts

@@ -490,7 +490,7 @@ export default function* WorkspaceSaga(): SagaIterator {
       yield call([CseMachine, CseMachine.clear]);
       const globals: Array<[string, any]> = action.payload.library.globals as Array<[string, any]>;
       for (const [key, value] of globals) {
-        window[key] = value;
+        window[key as any] = value;
       }
       yield put(
         actions.endClearContext(

src/commons/sideContent/SideContentHelper.ts

@@ -40,7 +40,7 @@ const requireProvider = (x: string) => {
   };
 
   if (!(x in exports)) throw new Error(`Dynamic require of ${x} is not supported`);
-  return exports[x];
+  return exports[x as keyof typeof exports] as any;
 };
 
 type RawTab = (provider: ReturnType<typeof requireProvider>) => { default: ModuleSideContent };