Add typescript checker plugin for vite, fixed typing errors

src/Display.tsx

@@ -29,7 +29,7 @@ const Display = () => {
 
       <Stack
         direction="horizontal"
-        gap={10}
+        gap={5}
         className="position-absolute bottom-0 w-100 d-flex justify-content-center"
       >
         {Object.entries(contestants).map(([sid, contestant]) => (

src/DrawPad.tsx

@@ -15,11 +15,11 @@ const cursorPos = (e: PointerEvent<HTMLCanvasElement>) => {
 };
 
 const DrawPad = ({ height, lines, onUpdateImage, readonly = false }: Props) => {
-  const parent = useRef<HTMLElement>();
-  const canvas = useRef<HTMLCanvasElement>();
+  const parent = useRef<HTMLDivElement>(null);
+  const canvas = useRef<HTMLCanvasElement>(null);
   const [width, setWidth] = useState(0);
   const [down, setDown] = useState(false);
-  const [path, setPath] = useState([]);
+  const [path, setPath] = useState<number[]>([]);
   const pen = canvas.current?.getContext("2d");
 
   const render = () => {
@@ -43,18 +43,18 @@ const DrawPad = ({ height, lines, onUpdateImage, readonly = false }: Props) => {
   };
 
   useEffect(() => {
-    setWidth(parent.current?.getBoundingClientRect().width);
+    setWidth(parent.current?.getBoundingClientRect().width || 0);
     render();
   }, [parent, pen, lines]);
 
   const beginLine = () => {
-    if (readonly) return;
+    if (readonly || !pen) return;
     pen.beginPath();
     setDown(true);
   };
 
   const drawLine = (e: PointerEvent<HTMLCanvasElement>) => {
-    if (!down) return;
+    if (!down || !pen) return;
     const [x, y] = cursorPos(e);
     setPath([...path, x, y]);
     pen.lineTo(x, y);

src/host/ActiveClue.tsx

@@ -15,7 +15,7 @@ const ActiveClue = ({ activeClue }: Props) => {
   return (
     <Container>
       <p>{activeClue.question}</p>
-      <Stack gap="3" className="text-center">
+      <Stack gap={3} className="text-center">
         <Button onClick={() => dispatch(setActiveClue(null))}>
           Start Timer
         </Button>

src/socket.ts

@@ -23,7 +23,7 @@ export const setup = () => {
     }
   );
 
-  socket.on("categories", (data: Record<string, Clue>) => {
+  socket.on("categories", (data: Record<string, Clue[]>) => {
     store.dispatch(setCategories(data));
   });
 

src/utils.ts

@@ -1,4 +1,6 @@
 import { debounce as lodashDebounce } from "lodash";
 
-export const debounce = (fn: (...args: unknown[]) => unknown) =>
+type DebounceableFunction = Parameters<typeof lodashDebounce>[0];
+
+export const debounce = (fn: DebounceableFunction) =>
   lodashDebounce(fn, 1000, { leading: true, trailing: false });