eslintrc: add typescript-eslint recommended config

.eslintrc.js

@@ -1,11 +1,19 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ["eslint:recommended", "plugin:react-hooks/recommended", "prettier"],
+  extends: [
+    "eslint:recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
   env: {
     node: true,
     "cypress/globals": true,
   },
   plugins: ["cypress"],
+  rules: {
+    "@typescript-eslint/no-namespace": ["error", { allowDeclarations: true }],
+  },
   // We're using vitest which has a very similar API to jest
   // (so the linting plugins work nicely), but we have to
   // set the jest version explicitly.

app/components/prompt/countdown.tsx

@@ -25,7 +25,7 @@ export function Countdown({
   const center = (numBars - 1) / 2;
 
   const [count, setCount] = React.useState(numBars / 2);
-  const animationRef = React.useRef<number>();
+  const animationRef = React.useRef(0);
 
   React.useEffect(() => {
     const animate = (timeMs: number) => {
@@ -44,7 +44,7 @@ export function Countdown({
       animationRef.current = requestAnimationFrame(() => animate(startTime));
     }
 
-    return () => cancelAnimationFrame(animationRef.current!);
+    return () => cancelAnimationFrame(animationRef.current);
   }, [count, startTime, durationSec, numBars]);
 
   const bars = Array.from({ length: numBars }, (_, i) => (

app/db.server.ts

@@ -7,6 +7,7 @@ import { NODE_ENV, SUPABASE_ANON_KEY, SUPABASE_URL } from "~/utils";
 let db: SupabaseClient<Database>;
 
 declare global {
+  // eslint-disable-next-line no-var
   var __db__: SupabaseClient<Database>;
 }
 

app/engine/engine.ts

@@ -412,7 +412,7 @@ export function gameEngine(state: State, action: Action): State {
         const players = new Map(state.players);
         const clueValue = state.getClueValue([i, j], userId);
 
-        let isAnswered = setIsAnswered(state.isAnswered, i, j, (prev) => {
+        const isAnswered = setIsAnswered(state.isAnswered, i, j, (prev) => {
           prev.answeredBy.set(userId, correct);
         });
         const numExpectedChecks = isLongForm ? state.answers.size : 1;

app/models/convert.server.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-prototype-builtins */
+/* eslint-disable no-empty */
 // To parse this data:
 //
 //   import { Convert, Game } from "./file";

app/routes/howto.tsx

@@ -32,7 +32,7 @@ export default function HowTo() {
   const [lockout, setLockout] = React.useState(false);
   const [hadLockout, setHadLockout] = React.useState(false);
   const [msLeft, setMsLeft] = React.useState<number | undefined>();
-  const animationRef = React.useRef<number>();
+  const animationRef = React.useRef(0);
 
   const buzzDurationMs =
     buzzedAt !== undefined && buzzerOpenAt !== undefined
@@ -99,7 +99,7 @@ export default function HowTo() {
       animationRef.current = requestAnimationFrame(() => animate(buzzerOpenAt));
     }
 
-    return () => cancelAnimationFrame(animationRef.current!);
+    return () => cancelAnimationFrame(animationRef.current);
   }, [buzzerOpenAt, buzzedAt]);
 
   return (

app/utils/env.ts

@@ -8,9 +8,7 @@ declare global {
       SUPABASE_ANON_KEY: string;
     };
   }
-}
 
-declare global {
   namespace NodeJS {
     interface ProcessEnv {
       BASE_URL: string;

app/utils/use-scroll.ts

@@ -5,7 +5,7 @@ import * as React from "react";
  */
 export default function useScrollToBottom(
   callback: () => void,
-  thresholdPx: number = 50,
+  thresholdPx = 50,
 ) {
   const [isNearBottom, setIsNearBottom] = React.useState(false);