TS7 upgrade + write to TS over JS

frontend/src/pages/Home.tsx

@@ -1,8 +1,20 @@
-import { useState } from "react";
+import { useState, type ReactElement } from "react";
 import ProjectsReadme from "../components/ProjectsReadme";
 
-export default function Home() {
-    const projectList = [
+interface ProjectInfo {
+    id: string;
+    name: string;
+    url: string;
+}
+
+interface Section {
+    id: string;
+    title: string;
+    content: ReactElement;
+}
+
+export default function Home(): ReactElement {
+    const projectList: ProjectInfo[] = [
         {
             id: "site",
             name: "aramjonghu-site",
@@ -20,14 +32,14 @@ export default function Home() {
         },
     ];
 
-    const [projIdx, setProjIdx] = useState(0);
+    const [projIdx, setProjIdx] = useState<number>(0);
     const prevProject = () =>
         setProjIdx((i) => (i - 1 + projectList.length) % projectList.length);
     const nextProject = () => setProjIdx((i) => (i + 1) % projectList.length);
 
-    const [activeTab, setActiveTab] = useState("projects");
+    const [activeTab, setActiveTab] = useState<string>("projects");
 
-    const sections = [
+    const sections: Section[] = [
         {
             id: "projects",
             title: "Projects",

frontend/src/pages/Stream.tsx

@@ -1,14 +1,19 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, type ReactElement } from "react";
 
-const streams = [
+interface StreamInfo {
+    id: string;
+    label: string;
+}
+
+const streams: StreamInfo[] = [
     { id: "aramstream", label: "Aram" },
     { id: "generalstream", label: "General" },
     { id: "gueststream", label: "Guest" },
 ];
 
-export default function Stream() {
-    const [activeStream, setActiveStream] = useState("aramstream");
-    const headerRef = useRef(null);
+export default function Stream(): ReactElement {
+    const [activeStream, setActiveStream] = useState<string>("aramstream");
+    const headerRef = useRef<HTMLHeadingElement>(null);
 
     useEffect(() => {
         headerRef.current?.scrollIntoView({