full typescript convesion, no outstanding errors

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
-	"js/ts.implicitProjectConfig.checkJs": false,
-	"typescript.validate.enable": false,
+	"js/ts.implicitProjectConfig.checkJs": true,
 	"javascript.suggestionActions.enabled": false,
-	"vue.server.hybridMode": true
+	"vue.server.hybridMode": true,
+	"typescript.validate.enable": true,
 }

TODO.md

@@ -1,6 +1,6 @@
 - [x] **consistent naming** replace 'folder' with 'directory' globally
 - [x] **checkpoint!** make it to feature parity with original vanilla js prototype
-- [ ] **typing** convert codebase to typescript, remove redundant JSDOC
+- [x] **typing** convert codebase to typescript, remove redundant JSDOC
 - [ ] **consistent typing** evaluate usage of null versus undefined throughout (undefined is incidentally nothing / 'missing', null is nothing on purpose?)
 - [ ] **testing** unit testing, especially in util funcs
 - [ ] **testing** api mocks

index.html

@@ -43,6 +43,6 @@
 			</div>
 		</noscript>
 
-		<script type="module" src="/src/index.jsx"></script>
+		<script type="module" src="/src/index.tsx"></script>
 	</body>
 </html>

jsconfig.json

@@ -1,15 +1,14 @@
 {
 	"compilerOptions": {
 		"lib": [
-			"es2017",
+			"es2021",
 			"dom"
 		],
 		"checkJs": true,
 		"jsx": "react-jsx",
 		"resolveJsonModule": true,
 		"esModuleInterop": true,
-		"noImplicitAny": false,
-		"strict": false // Disable all strict TypeScript checks
+		//	"noImplicitAny": false,
 	},
 	"exclude": [
 		"node_modules",

package.json

@@ -15,18 +15,21 @@
 	"license": "CC0-1.0",
 	"dependencies": {
 		"@reduxjs/toolkit": "^2.5.0",
+		"@types/react-redux": "^7.1.34",
+		"@types/reselect": "^2.2.0",
 		"@vitejs/plugin-react": "^4.3.4",
 		"ms": "^2.1.3",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
 		"react-redux": "^9.2.0",
 		"reselect": "^5.1.1",
+		"typescript": "^5.7.3",
 		"vite": "^6.0.3"
 	},
 	"devDependencies": {
 		"@types/ms": "^0.7.34",
-		"@types/react": "^19.0.1",
-		"@types/react-dom": "^19.0.2",
+		"@types/react": "^19.0.7",
+		"@types/react-dom": "^19.0.3",
 		"vite-plugin-html": "^3.2.2"
 	}
 }

src/App.jsx → src/App.tsx

@@ -1,9 +1,9 @@
-import CurrentBattlesContainer from "./components/CurrentBattlesContainer.jsx";
-import BattleURLInput from "./components/BattleURLInput.jsx";
-import BattleDetails from "./components/BattleDetails.jsx";
-import DirectoryNameOptions from "./components/DirectoryNameOptions.jsx";
-import DirectoryNameResults from "./components/DirectoryNameResults.jsx";
-import DirectoryNameTemplate from "./components/DirectoryNameTemplate.jsx";
+import CurrentBattlesContainer from "./components/CurrentBattlesContainer";
+import BattleURLInput from "./components/BattleURLInput";
+import BattleDetails from "./components/BattleDetails";
+import DirectoryNameOptions from "./components/DirectoryNameOptions";
+import DirectoryNameResults from "./components/DirectoryNameResults";
+import DirectoryNameTemplate from "./components/DirectoryNameTemplate";
 
 export default function App() {
 	return (

src/components/BattleDetails.jsx → src/components/BattleDetails.tsx

@@ -1,9 +1,5 @@
 import { useSelector } from "react-redux";
-import {
-	APIBattleTypeLabels,
-	getAvatarURL,
-	getUserProfileURL,
-} from "../constants.js";
+import { APIBattleTypeLabels, getAvatarURL } from "../constants.js";
 import selectBattleDetails from "../state/selectBattleDetails.js";
 
 export default function BattleDetails() {

src/components/BattleURLInput.jsx → src/components/BattleURLInput.tsx

@@ -1,19 +1,24 @@
 import { useDispatch, useSelector } from "react-redux"; // Example: if using Redux for global state
-import { selectBattleURL, setBattleURL } from "../state/battleURLSlice.js";
-import { fetchBattleData } from "../state/battleDataSlice.js";
-import { MatchBattleIdFromBattleURL } from "../utils.js";
-import { APIDomain } from "../constants.js";
+import { selectBattleURL, setBattleURL } from "../state/battleURLSlice";
+import { fetchBattleData } from "../state/battleDataSlice";
+import { MatchBattleIdFromBattleURL } from "../utils";
+import { APIDomain } from "../constants";
+import store from "../state/store";
 
 export default function BattleURLInput() {
-	const dispatch = useDispatch();
+	const dispatch: typeof store.dispatch = useDispatch();
 	const battleURL = useSelector(selectBattleURL);
 	return (
 		<form
 			onSubmitCapture={(e) => {
-				const battleId = (
-					battleURL.match(MatchBattleIdFromBattleURL) ?? []
-				).pop();
-				dispatch(fetchBattleData(battleId));
+				if (battleURL !== null) {
+					const battleId = (
+						battleURL.match(MatchBattleIdFromBattleURL) ?? []
+					).pop();
+					if (battleId !== undefined) {
+						dispatch(fetchBattleData(parseInt(battleId)));
+					}
+				}
 				e.preventDefault();
 			}}>
 			<label>