chore: setup typesript

frontend/index.html

@@ -18,6 +18,6 @@
         <div
             id="main-loader"
         ></div>
-        <script type="module" src="/src/main.jsx"></script>
+        <script type="module" src="/src/main.tsx"></script>
     </body>
 </html>

frontend/package.json

@@ -40,13 +40,14 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/react": "^18.0.37",
-        "@types/react-dom": "^18.0.11",
+        "@types/react": "^18.3.4",
+        "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.0.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.3.4",
         "jest": "^29.6.1",
         "jest-environment-jsdom": "^29.6.1",
+        "typescript": "^5.5.4",
         "vite": "^4.3.9",
         "vitest": "^0.33.0"
     }

frontend/src/main.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-import App from './App.jsx'
-import { MantineProvider } from '@mantine/styles'
-import UserDataContextProvider from './context/user-data-context.jsx'
-
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-    <MantineProvider theme={{ colorScheme: 'dark', fontFamily: 'monospace', primaryColor: 'lime' }}>
-        <UserDataContextProvider>
-            <App />
-        </UserDataContextProvider>
-    </MantineProvider>
-)

frontend/src/main.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App.jsx";
+import { MantineProvider } from "@mantine/styles";
+import UserDataContextProvider from "./context/user-data-context.jsx";
+
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <MantineProvider
+    theme={{
+      colorScheme: "dark",
+      fontFamily: "monospace",
+      primaryColor: "lime",
+    }}
+  >
+    <UserDataContextProvider>
+      <App />
+    </UserDataContextProvider>
+  </MantineProvider>
+);

frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "module": "ESNext",
+      "moduleResolution": "Node",
+      "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
+  }

frontend/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />