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 };

src/commons/sideContent/content/SideContentContestVoting.tsx

@@ -97,8 +97,8 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
     [currentDraggedItem]
   );
 
-  const contestEntryRefs = useRef({});
-  const tierContainerRefs = useRef({});
+  const contestEntryRefs = useRef<Record<number, HTMLDivElement | null>>({});
+  const tierContainerRefs = useRef<Record<number, HTMLDivElement | null>>({});
 
   const tierBoard = useMemo(() => {
     return TIERS.map((tier, index) => (

src/commons/utils/DisplayBufferService.ts

@@ -22,15 +22,17 @@ class BufferService {
 
   public attachConsole(workspaceLocation: WorkspaceLocation): () => void {
     const bufferCallback = (log: string) => this.push(log, workspaceLocation);
-    const defaultConsole = {};
+    const defaultConsole: Record<string, any> = {};
     Object.entries(consoleOverloads).forEach(([method, overload]) => {
-      defaultConsole[method] = console[method];
-      console[method] = overload(bufferCallback);
+      const key = method as keyof typeof consoleOverloads;
+      defaultConsole[method] = console[key];
+      console[key] = overload(bufferCallback);
     });
 
     return () => {
       Object.entries(consoleOverloads).forEach(([method]) => {
-        console[method] = defaultConsole[method];
+        const key = method as keyof typeof consoleOverloads;
+        console[key] = defaultConsole[key];
       });
     };
   }

src/commons/utils/JsSlangHelper.ts

@@ -180,7 +180,7 @@ export function makeElevatedContext(context: Context) {
       if (prop === 'head') {
         return fakeFrame;
       }
-      return target[prop];
+      return target[prop as keyof typeof target];
     }
   });
 
@@ -189,7 +189,7 @@ export function makeElevatedContext(context: Context) {
       if (prop === '0') {
         return proxyGlobalEnv;
       }
-      return target[prop];
+      return target[prop as keyof typeof target];
     }
   });
 
@@ -198,7 +198,7 @@ export function makeElevatedContext(context: Context) {
       if (prop === 'environments') {
         return proxyEnvs;
       }
-      return target[prop];
+      return target[prop as keyof typeof target];
     }
   });
 
@@ -210,7 +210,7 @@ export function makeElevatedContext(context: Context) {
         case 'runtime':
           return proxyRuntime;
         default:
-          return target[prop];
+          return target[prop as keyof typeof target];
       }
     }
   });

src/commons/utils/TypeHelper.ts

@@ -10,6 +10,32 @@ export type KeysOfType<O, T> = {
   [K in keyof O]: O[K] extends T ? K : never;
 }[keyof O];
 
+/**
+ * Does union(keyof <member>) for each member of T. This is unlike
+ * `keyof T` which would give keyof(union(<member>)).
+ * @param T - The union type to extract keys from
+ */
+export type DistributedKeyOf<T extends Record<any, any>> = T extends any ? keyof T : never;
+
+/**
+ * Generates a "set difference" of two types, keeping the properties of T that are not
+ * present in S.
+ * @param T - The type to extract keys from
+ * @param S - The type to compare against
+ */
+export type Diff<T extends Record<any, any>, S extends Record<any, any>> = Pick<
+  T,
+  Exclude<keyof T, keyof S>
+>;
+
+/**
+ * Merges two types together, keeping the properties of T and adding the
+ * properties of U that are not present in T.
+ * @param T - The first type
+ * @param U - The second type (also "universal" set of properties to add to T)
+ */
+export type Merge<T extends Record<any, any>, U extends Record<any, any>> = T & Diff<U, T>;
+
 // Adapted from https://github.com/piotrwitek/typesafe-actions/blob/a1fe54bb150ac1b935bb9ca78361d2d024d2efaf/src/type-helpers.ts#L117-L130
 export type ActionType<T extends Record<string, any>> = {
   [k in keyof T]: ReturnType<T[k]>;
@@ -100,3 +126,26 @@ export const assertType =
     // Keep the original type as inferred by TS
   ): T =>
     obj;
+
+/**
+ * Type safe `Object.keys`
+ */
+export function objectKeys<T extends string | number | symbol>(obj: Record<T, any>): T[] {
+  return Object.keys(obj) as T[];
+}
+
+/**
+ * Type safe `Object.values`
+ */
+export function objectValues<T>(obj: Record<any, T>) {
+  return Object.values(obj) as T[];
+}
+
+/**
+ * Type safe `Object.entries`
+ */
+export function objectEntries<K extends string | number | symbol, V>(
+  obj: Partial<Record<K, V>>
+): [K, V][] {
+  return Object.entries(obj) as [K, V][];
+}