fix(ui): clear Astro check typing errors

Author: Noveris-Teams

src/components/LanguageToggle.astro

@@ -71,14 +71,14 @@ const currentLabel = locale === 'zh' ? t(locale, 'languageZh') : t(locale, 'lang
 
 <script>
   const key = 'passion-blog-locale';
-  const root = /** @type {HTMLElement | null} */ (document.querySelector('[data-lang-dropdown]'));
-  const trigger = /** @type {HTMLButtonElement | null} */ (root?.querySelector('[data-lang-trigger]'));
-  const menu = /** @type {HTMLElement | null} */ (root?.querySelector('[data-lang-menu]'));
-  const label = /** @type {HTMLElement | null} */ (root?.querySelector('[data-lang-label]'));
-  const caret = /** @type {HTMLElement | null} */ (root?.querySelector('[data-lang-caret]'));
-  const options = /** @type {HTMLButtonElement[]} */ ([...(root?.querySelectorAll('[data-lang-option]') || [])]);
+  const root = document.querySelector<HTMLElement>('[data-lang-dropdown]');
+  const trigger = root?.querySelector<HTMLButtonElement>('[data-lang-trigger]') ?? null;
+  const menu = root?.querySelector<HTMLElement>('[data-lang-menu]') ?? null;
+  const label = root?.querySelector<HTMLElement>('[data-lang-label]') ?? null;
+  const caret = root?.querySelector<HTMLElement>('[data-lang-caret]') ?? null;
+  const options = Array.from(root?.querySelectorAll<HTMLButtonElement>('[data-lang-option]') ?? []);
 
-  function setOpen(open) {
+  function setOpen(open: boolean) {
     if (!trigger || !menu || !caret) return;
     trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
     menu.classList.toggle('hidden', !open);

src/components/ThemeToggle.astro

@@ -62,23 +62,26 @@ const { locale } = Astro.props;
 </div>
 
 <script>
+  type ThemeMode = 'system' | 'light' | 'dark';
+  type ThemeValue = 'light' | 'dark';
+
   const root = document.documentElement;
   const modeKey = 'passion-blog-theme-mode';
   const legacyKey = 'passion-blog-theme';
-  const dropdown = /** @type {HTMLElement | null} */ (document.querySelector('[data-theme-dropdown]'));
-  const trigger = /** @type {HTMLButtonElement | null} */ (dropdown?.querySelector('[data-theme-trigger]'));
-  const menu = /** @type {HTMLElement | null} */ (dropdown?.querySelector('[data-theme-menu]'));
-  const label = /** @type {HTMLElement | null} */ (dropdown?.querySelector('[data-theme-label]'));
-  const caret = /** @type {HTMLElement | null} */ (dropdown?.querySelector('[data-theme-caret]'));
-  const options = /** @type {HTMLButtonElement[]} */ ([...(dropdown?.querySelectorAll('[data-theme-option]') || [])]);
+  const dropdown = document.querySelector<HTMLElement>('[data-theme-dropdown]');
+  const trigger = dropdown?.querySelector<HTMLButtonElement>('[data-theme-trigger]') ?? null;
+  const menu = dropdown?.querySelector<HTMLElement>('[data-theme-menu]') ?? null;
+  const label = dropdown?.querySelector<HTMLElement>('[data-theme-label]') ?? null;
+  const caret = dropdown?.querySelector<HTMLElement>('[data-theme-caret]') ?? null;
+  const options = Array.from(dropdown?.querySelectorAll<HTMLButtonElement>('[data-theme-option]') ?? []);
   const media = window.matchMedia('(prefers-color-scheme: dark)');
 
-  function resolveTheme(mode) {
+  function resolveTheme(mode: ThemeMode): ThemeValue {
     if (mode === 'light' || mode === 'dark') return mode;
     return media.matches ? 'dark' : 'light';
   }
 
-  function detectMode() {
+  function detectMode(): ThemeMode {
     const saved = localStorage.getItem(modeKey);
     if (saved === 'system' || saved === 'light' || saved === 'dark') {
       return saved;
@@ -92,21 +95,21 @@ const { locale } = Astro.props;
     return 'system';
   }
 
-  function apply(mode) {
+  function apply(mode: ThemeMode) {
     const theme = resolveTheme(mode);
     root.setAttribute('data-theme', theme);
     root.dataset.themeMode = mode;
     window.dispatchEvent(new CustomEvent('theme-change', { detail: theme }));
   }
 
-  function setOpen(open) {
+  function setOpen(open: boolean) {
     if (!trigger || !menu || !caret) return;
     trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
     menu.classList.toggle('hidden', !open);
     caret.textContent = open ? '▴' : '▾';
   }
 
-  function syncOptionState(mode) {
+  function syncOptionState(mode: ThemeMode) {
     for (const option of options) {
       const selected = option.dataset.mode === mode;
       option.setAttribute('aria-checked', selected ? 'true' : 'false');
@@ -117,7 +120,7 @@ const { locale } = Astro.props;
     }
   }
 
-  let activeMode = detectMode();
+  let activeMode: ThemeMode = detectMode();
   apply(activeMode);
   if (label) {
     const selectedLabel = options.find((option) => option.dataset.mode === activeMode)?.dataset.label;
@@ -134,7 +137,7 @@ const { locale } = Astro.props;
 
   options.forEach((option) => {
     option.addEventListener('click', () => {
-      const nextMode = option.dataset.mode;
+      const nextMode = option.dataset.mode as ThemeMode | undefined;
       if (!nextMode || !['system', 'light', 'dark'].includes(nextMode)) return;
 
       activeMode = nextMode;