Adopt TypeScript 7 (#4017)

* Adopt TypeScript 7

* update AGENTS.ms

---------

Co-authored-by: Aman Mahajan <amahajan@stratag.com>

Author: nstepien

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "oxc.oxc-vscode"]
+  "recommendations": ["dbaeumer.vscode-eslint", "oxc.oxc-vscode", "typescriptteam.native-preview"]
 }

.vscode/settings.json

@@ -10,6 +10,7 @@
   "editor.formatOnSaveMode": "file",
   "js/ts.tsdk.promptToUseWorkspaceVersion": true,
   "js/ts.tsdk.path": "node_modules/typescript/lib",
+  "js/ts.experimental.useTsgo": true,
   "files.readonlyInclude": {
     "**/routeTree.gen.ts": true
   },

AGENTS.md

@@ -5,7 +5,7 @@
 ```shell
 npm install                  # setup (requires Node.js ≥ 22 for `node --run`)
 node --run build             # library → lib/
-node --run typecheck         # tsc --build
+node --run typecheck         # tsgo --build
 node --run eslint            # eslint --max-warnings 0
 node --run eslint:fix        # eslint --fix
 node --run format            # oxfmt

package.json

@@ -44,7 +44,7 @@
     "format:check": "oxfmt --check",
     "eslint": "eslint --max-warnings 0 --cache --cache-location .cache/eslint --cache-strategy content",
     "eslint:fix": "node --run eslint -- --fix",
-    "typecheck": "tsc --build"
+    "typecheck": "tsgo --build"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^4.2.1",
@@ -56,6 +56,7 @@
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@typescript/native-preview": "^7.0.0-dev.20260327.2",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.2",
     "@vitest/coverage-istanbul": "^4.1.2",

src/EditCell.tsx

@@ -21,7 +21,7 @@ import type {
  * The event can be `stopPropagation()`ed halfway through, so they may not always bubble back up to the window,
  * so an alternative check must be used. The check must happen after the event can reach the "inside" container,
  * and not before it run to completion. `postTask`/`requestAnimationFrame` are the best way we know to achieve this.
- * Usually we want click event handlers from parent components to access the latest commited values,
+ * Usually we want click event handlers from parent components to access the latest committed values,
  * so `mousedown` is used instead of `click`.
  *
  * We must also rely on React's event capturing/bubbling to handle elements rendered in a portal.