Added support for TypeScript

.github/workflows/ci.yml

@@ -75,6 +75,9 @@ jobs:
           stack --allow-different-user build fourmolu
           stack --allow-different-user build hpc-lcov
 
+      - name: Run TypeScript typecheck
+        run: pnpm run typecheck
+
       - name: Run Frontend Tests and Generate Coverage
         run: |
           pnpm test --coverage --maxWorkers=4

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Fixed dynamic graph centering bug by updating `parseTransform` in `app/Svg/Parser.hs` to parse multiple transform functions and removing `getShapesMinXY` in `js/components/graph/Graph.js`
 - Switched CI provider from CircleCI to GitHub Actions
 - Cleared up documentation for various graph-related front-end functions
+- Adopted TypeScript v7 into build and CI pipelines and converted `js/components/graph/Button.js` to `Button.tsx` as a proof of concept
 
 ## [0.8.1] - 2026-08-10
 

README.md

@@ -62,6 +62,10 @@ $ stack build   # Compile Courseography and all Haskell dependencies (this will
 When running in production you should run `$ pnpm run build` instead of `$ pnpm run watch` to build the web assets.
 This will take longer but results in smaller asset files.
 
+#### Typechecking
+
+Run `$ pnpm run typecheck`, which uses [Typescript](https://www.typescriptlang.org/) to typecheck our codebase. Only `.ts`/`.tsx` files are checked; existing `.js`/`.jsx` files are ignored.
+
 #### Running front-end tests
 
 To run all tests, run `$ pnpm test`. However, if you need to run a specific file or folder of tests,

babel.config.json

@@ -6,7 +6,8 @@
       {
         "runtime": "automatic"
       }
-    ]
+    ],
+    "@babel/preset-typescript"
   ],
   "plugins": [
     [

eslint.config.cjs

@@ -42,6 +42,18 @@ module.exports = [
       },
     },
   },
+  {
+    // @babel/eslint-parser converts TypeScript syntax to an ESTree-shaped
+    // AST that core rules don't fully understand, so `no-undef` flags
+    // type-only identifiers as undefined.
+    // TypeScript's own compiler (`pnpm run typecheck`) already catches
+    // genuine undefined-reference errors, so disable the rule here — this
+    // is the same guidance typescript-eslint gives for `.ts`/`.tsx` files.
+    files: ["**/*.ts", "**/*.tsx"],
+    rules: {
+      "no-undef": "off",
+    },
+  },
   {
     files: ["cypress/**/*.js"],
     languageOptions: {

jest.config.js

@@ -185,7 +185,7 @@ const config = {
 
   // A map from regular expressions to paths to transformers
   transform: {
-    "\\.jsx?$": "babel-jest",
+    "\\.[jt]sx?$": "babel-jest",
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation

js/components/graph/Button.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+
+interface ButtonProps {
+  divId?: string
+  mouseDown?: () => void
+  mouseUp?: () => void
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+  disabled?: boolean
+  text?: string
+  children?: React.ReactNode
+}
+
+export default function Button({
+  divId,
+  mouseDown,
+  mouseUp,
+  onMouseEnter,
+  onMouseLeave,
+  disabled,
+  text,
+  children,
+}: ButtonProps) {
+  return (
+    <button
+      id={divId}
+      className="graph-control-button"
+      onMouseDown={mouseDown}
+      onMouseUp={mouseUp}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      disabled={disabled}
+    >
+      {text}
+      {children}
+    </button>
+  )
+}

package.json

@@ -9,6 +9,7 @@
     "watch": "webpack --watch --config webpack.dev.js --disable-interpret",
     "build": "cross-env NODE_ENV=production webpack --config webpack.prod.js --disable-interpret",
     "test": "jest",
+    "typecheck": "tsc",
     "prettier": "prettier --write .",
     "eslint": "eslint --fix js"
   },
@@ -19,7 +20,7 @@
   "browserslist": "defaults",
   "lint-staged": {
     "*": "pnpm prettier --ignore-unknown --write",
-    "*.js": "pnpm run eslint --cache --fix js",
+    "*.{js,ts,tsx}": "pnpm run eslint --cache --fix js",
     "*.css": "pnpm run stylelint --fix",
     "*.scss": "pnpm run stylelint --fix",
     "*.hs": [
@@ -56,11 +57,14 @@
     "@babel/eslint-parser": "^8.0.1",
     "@babel/preset-env": "^8.0.2",
     "@babel/preset-react": "^8.0.1",
+    "@babel/preset-typescript": "^8.0.1",
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^22.20.2",
     "babel-jest": "^30.4.1",
     "babel-loader": "^10.1.1",
     "babel-plugin-polyfill-corejs3": "^1.0.0",
@@ -90,6 +94,7 @@
     "style-loader": "^4.0.0",
     "stylelint": "^17.14.1",
     "stylelint-config-standard-scss": "^17.0.0",
+    "typescript": "^7.0.2",
     "webpack": "^5.105.3",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.6",