chore: Add typescript support to eslint, fix errors (#2923)

docs/src/components/columns.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, CSSProperties } from "react";
+import { ReactNode, CSSProperties } from "react";
 import clsx from "clsx";
 
 interface ColumnsProps {

docs/src/components/hardware-list.tsx

@@ -18,11 +18,11 @@ function itemHasMultiple(item: HardwareMetadata) {
 
 function itemIds(item: HardwareMetadata) {
   if (item.type == "board" || item.type == "shield") {
-    let nodes = (item.siblings ?? [item.id])
-      .map<ElementOrString>((id) => <code key={id}>{id}</code>)
-      .reduce(
+    const nodes = (item.siblings ?? [item.id])
+      .map((id) => <code key={id}>{id}</code>)
+      .reduce<ElementOrString[]>(
         (prev, curr, index) => [...prev, index > 0 ? ", " : "", curr],
-        [] as ElementOrString[]
+        []
       );
     return <span key={item.id}>{nodes}</span>;
   } else {
@@ -81,7 +81,7 @@ function mapInterconnect({
 }
 
 function HardwareList({ items }: HardwareListProps) {
-  let grouped = groupedMetadata(items);
+  const grouped = groupedMetadata(items);
 
   return (
     <>

docs/src/components/hardware-utils.ts

@@ -21,7 +21,7 @@ function groupedBoard(agg: GroupedMetadata, board: Board) {
     agg.onboard.push(board);
   } else if (board.exposes) {
     board.exposes.forEach((element) => {
-      let ic = agg.interconnects[element] ?? {
+      const ic = agg.interconnects[element] ?? {
         boards: [],
         shields: [],
       };
@@ -37,12 +37,12 @@ function groupedBoard(agg: GroupedMetadata, board: Board) {
 
 function groupedShield(agg: GroupedMetadata, shield: Shield) {
   shield.requires.forEach((id) => {
-    let ic = agg.interconnects[id] ?? { boards: [], shields: [] };
+    const ic = agg.interconnects[id] ?? { boards: [], shields: [] };
     ic.shields.push(shield);
     agg.interconnects[id] = ic;
   });
   shield.exposes?.forEach((id) => {
-    let ic = agg.interconnects[id] ?? { boards: [], shields: [] };
+    const ic = agg.interconnects[id] ?? { boards: [], shields: [] };
     ic.shields.push(shield);
     agg.interconnects[id] = ic;
   });
@@ -50,7 +50,7 @@ function groupedShield(agg: GroupedMetadata, shield: Shield) {
 }
 
 function groupedInterconnect(agg: GroupedMetadata, item: Interconnect) {
-  let ic = agg.interconnects[item.id] ?? { boards: [], shields: [] };
+  const ic = agg.interconnects[item.id] ?? { boards: [], shields: [] };
   ic.interconnect = item;
   agg.interconnects[item.id] = ic;
 

docs/src/components/interconnect-tabs.tsx

@@ -2,16 +2,16 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
 import { HardwareMetadata, Interconnect } from "../hardware-metadata";
-import { groupedMetadata, InterconnectDetails } from "./hardware-utils";
+import { groupedMetadata } from "./hardware-utils";
 
 interface InterconnectTabsProps {
   items: HardwareMetadata[];
-  gpio: Boolean;
+  gpio: boolean;
 }
 
-function mapInterconnect(interconnect: Interconnect, gpio: Boolean) {
-  let content = require(`@site/src/data/interconnects/${interconnect.id}/design_guideline.md`);
-  let imageUrl = require(`@site/docs/assets/interconnects/${interconnect.id}/pinout.png`);
+function mapInterconnect(interconnect: Interconnect, gpio: boolean) {
+  const content = require(`@site/src/data/interconnects/${interconnect.id}/design_guideline.md`);
+  const imageUrl = require(`@site/docs/assets/interconnects/${interconnect.id}/pinout.png`);
   return (
     <TabItem value={interconnect.id} key={interconnect.id}>
       <img src={imageUrl.default} />
@@ -53,7 +53,7 @@ function mapInterconnectValue(interconnect: Interconnect) {
 }
 
 function InterconnectTabs({ items, gpio }: InterconnectTabsProps) {
-  let grouped = Object.values(groupedMetadata(items).interconnects)
+  const grouped = Object.values(groupedMetadata(items).interconnects)
     .map((i) => i?.interconnect as Interconnect)
     .filter((i) => i?.design_guideline)
     .sort((a, b) => a.id.localeCompare(b.id));