Fix errors & warnings in VS Code

Author: FileEX

web/src/components/AutoStarlightPage.astro

@@ -1,5 +1,6 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import type { MarkdownHeading } from 'astro';
 import { parse } from 'node-html-parser';
 
 const { frontmatter = {} } = Astro.props;
@@ -11,10 +12,10 @@ if (Astro.slots.has('default')) {
 
 const root = parse(slot ?? '', { lowerCaseTagName: false });
 
-const headings = [];
+const headings: MarkdownHeading[] = [];
 
 // AnchorHeading component source
-function renderAnchorHeading(level, id, text, classAttr = '', styleAttr = '') {
+function renderAnchorHeading(level: number, id: string, text: string, classAttr = '', styleAttr = '') {
   const accessibleLabel = `Section ${text}`;
 
   return `

web/src/components/CategoryList.astro

@@ -6,7 +6,7 @@ import { badgeConfig } from "@src/utils/badges";
 import { Badge } from "@astrojs/starlight/components";
 
 interface Props {
-  itemsByCategory: any;
+  itemsByCategory: Record<string, any[]>;
   what: string;
 }
 

web/src/components/CodeExamplesSection.astro

@@ -83,14 +83,15 @@ if (codeExamples.length === 0 && !examplesRequired) {
     const buttons = document.querySelectorAll('.tab-btn');
     const tabs = document.querySelectorAll('.tab-content');
 
-    function activateTab(tabIndex) {
-      buttons.forEach((b) => b.classList.toggle('active', b.dataset.tab === tabIndex));
-      tabs.forEach((t) => (t.style.display = t.dataset.tab === tabIndex ? 'block' : 'none'));
+    function activateTab(tabIndex: string) {
+      buttons.forEach((b) => (b as HTMLElement).classList.toggle('active', (b as HTMLElement).dataset.tab === tabIndex));
+      tabs.forEach((t) => ((t as HTMLElement).style.display = (t as HTMLElement).dataset.tab === tabIndex ? 'block' : 'none'));
     }
 
     buttons.forEach((btn) => {
       btn.addEventListener('click', () => {
-        const tab = btn.dataset.tab;
+        const tab = (btn as HTMLElement).dataset.tab;
+        if (!tab) return;
         activateTab(tab);
 
         history.replaceState(null, '', `#example${parseInt(tab) + 1}`);

web/src/components/PreviewImages.astro

@@ -29,7 +29,7 @@ if (images?.length) {
 }
 ---
 
-{images?.length > 0 && (
+{images && images.length > 0 && (
     <div id="preview-images-gallery">
         <h4>Gallery</h4>
         <p>Click on the image to view the full preview along with the description.</p>

web/src/pages/reference/ID_Lists/Blips.astro

@@ -38,7 +38,7 @@ import { blips } from "@src/data/blips";
                         src={getAssetImagePath(`Blips/radar_${blip.name}.png`)}
                         alt={blip.name}
                         class="blip-image"
-                        id={blip.id}
+                        id={String(blip.id)}
                     />
 
                     <p><code>{blip.id}</code></p>

web/src/pages/reference/ID_Lists/IDE.astro

@@ -43,8 +43,10 @@ import { ide_table } from '@src/data/ide_table';
 </div>
 
 <script>
-  const filterInput = document.getElementById('filterInput');
-  const tableBody = document.getElementById('tableBody');
+  const filterInput = document.getElementById('filterInput') as HTMLInputElement;
+  const tableBody = document.getElementById('tableBody') as HTMLTableElement;
+  if (!filterInput || !tableBody)
+    return;
 
   filterInput.addEventListener('input', () => {
     const filter = filterInput.value.toLowerCase();

web/src/pages/reference/ID_Lists/Vehicles.astro

@@ -32,7 +32,7 @@ import { vehicles } from '@src/data/vehicles';
           <li>
               <a href={`#${category}`}>{category}</a>
               <ul>
-                  {Object.keys(vehicles[category]).map(subcategory => (
+                  {Object.keys(vehicles[category as keyof typeof vehicles]).map(subcategory => (
                       <>
                           {subcategory !== 'Uncategorized' && (
                               <li>
@@ -82,6 +82,7 @@ import { vehicles } from '@src/data/vehicles';
           <h3 class="vehicle-category-title">{category}</h3>
           {
               Object.entries(subcategories).map(([subcategory, vehiclesList]) => (
+                <>
                   <div class="vehicle-subcategory" id={subcategory}>
                       {subcategory !== 'Uncategorized' && (
                           <h4 class="vehicle-subcategory-title">{subcategory}</h4>
@@ -102,6 +103,7 @@ import { vehicles } from '@src/data/vehicles';
                       ))}
                       </div>
                   </div>
+                  </>
               ))
           }
       </div>