Fix missed rename, and improve types (#276)

Fixes a missed rename, in `src/item-index.ts`: I'd renamed `coll` to
`item` but missed updating it in the `update` method's
`changedProperties` map.

This PR fixes that, and adds better typing to all of the instances of
`changedProperties` by using
[`PropertyValues<this>`](https://lit.dev/docs/components/lifecycle/#typescript-types-for-changedproperties),
and implementing class properties for missing Lit properties.

src/appmain.ts

@@ -1,4 +1,10 @@
-import { LitElement, html, css, type TemplateResult } from "lit";
+import {
+  LitElement,
+  html,
+  css,
+  type TemplateResult,
+  type PropertyValues,
+} from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import {
@@ -467,7 +473,7 @@ export class ReplayWebApp extends LitElement {
     });
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("sourceUrl")) {
       this.collTitle = null;
     }

src/chooser.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, type PropertyValues } from "lit";
 import { IS_APP, wrapCss } from "./misc";
 
 import fasUpload from "@fortawesome/fontawesome-free/svgs/solid/upload.svg";
@@ -47,7 +47,7 @@ export class Chooser extends LitElement {
 
   fileHandle?: FileSystemFileHandle;
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("droppedFile") && this.droppedFile) {
       this.onDropFile();
     }

src/embed-receipt.ts

@@ -14,7 +14,10 @@ import type { Item as ItemType } from "./types";
 
 // ===========================================================================
 export class RWPEmbedReceipt extends LitElement {
-  @property({ type: Object }) collInfo: ItemType | null = null;
+  @property({ type: Object }) collInfo:
+    | ItemType
+    | null
+    | Record<string, never> = null;
   @property({ type: Object }) appLogo = null;
   @property({ type: String }) ts: string | null = null;
   @property({ type: String }) url: string | null = null;

src/embed.ts

@@ -1,4 +1,10 @@
-import { LitElement, html, css, TemplateResult } from "lit";
+import {
+  LitElement,
+  html,
+  css,
+  TemplateResult,
+  type PropertyValues,
+} from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import { wrapCss, rwpLogo } from "./misc";
@@ -197,7 +203,7 @@ class Embed extends LitElement {
     }
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (
       changedProperties.has("url") ||
       changedProperties.has("ts") ||

src/gdrive.ts

@@ -1,19 +1,20 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, type PropertyValues } from "lit";
 import { wrapCss } from "./misc";
 
 import fabGoogleDrive from "@fortawesome/fontawesome-free/svgs/brands/google-drive.svg";
 
 // ===========================================================================
 class GDrive extends LitElement {
+  state: string;
+  sourceUrl: string;
+  scriptLoaded: boolean;
+  error: boolean;
+  reauth?: boolean;
   constructor() {
     super();
-    // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
     this.state = "trypublic";
-    // @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'.
     this.sourceUrl = "";
-    // @ts-expect-error - TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'.
     this.scriptLoaded = false;
-    // @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
     this.error = false;
   }
 
@@ -26,15 +27,12 @@ class GDrive extends LitElement {
     };
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("sourceUrl")) {
-      // @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
       this.error = false;
-      // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
       this.state = "trypublic";
       this.tryPublicAccess().then((result) => {
         if (!result) {
-          // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
           this.state = "tryauto";
           this.requestUpdate();
         }
@@ -44,19 +42,16 @@ class GDrive extends LitElement {
 
   async tryPublicAccess() {
     try {
-      // @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'.
       const sourceUrl = this.sourceUrl;
       const fileId = sourceUrl.slice("googledrive://".length);
       const publicCheckUrl = `${__HELPER_PROXY__}/g/${fileId}`;
 
-      let resp = null;
+      let resp: Response | null = null;
       try {
-        // @ts-expect-error - TS2322 - Type 'Response' is not assignable to type 'null'.
         resp = await fetch(publicCheckUrl);
       } catch (e) {
         return false;
       }
-      // @ts-expect-error - TS2531 - Object is possibly 'null'.
       const json = await resp.json();
       if (!json.url || !json.name || !json.size) {
         return false;
@@ -72,10 +67,8 @@ class GDrive extends LitElement {
       try {
         const abort = new AbortController();
         const signal = abort.signal;
-        // @ts-expect-error - TS2322 - Type 'Response' is not assignable to type 'null'.
         resp = await fetch(publicUrl, { signal });
         abort.abort();
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
         if (resp.status != 200) {
           return false;
         }
@@ -99,13 +92,10 @@ class GDrive extends LitElement {
   }
 
   onLoad() {
-    // @ts-expect-error - TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'.
     this.scriptLoaded = true;
     this.gauth("none", (response) => {
       if (response.error) {
-        // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
         if (this.state !== "implicitonly") {
-          // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
           this.state = "trymanual";
         }
       } else {
@@ -123,7 +113,6 @@ class GDrive extends LitElement {
   }
 
   async authed(response) {
-    // @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'.
     const sourceUrl = this.sourceUrl;
     const fileId = sourceUrl.slice("googledrive://".length);
     const metadataUrl = `https://www.googleapis.com/drive/v3/files/${fileId}`;
@@ -136,17 +125,13 @@ class GDrive extends LitElement {
     );
 
     if (resp.status === 404 || resp.status == 403) {
-      // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
       if (this.state !== "implicitonly") {
-        // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
         this.state = "trymanual";
       }
-      // @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
       this.error = true;
       return;
     }
 
-    // @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
     this.error = false;
 
     const metadata = await resp.json();
@@ -166,23 +151,16 @@ class GDrive extends LitElement {
 
   render() {
     return html` ${this.script()}
-    ${
+    ${this.state !== "trymanual"
-      // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
-      this.state !== "trymanual"
       ? html` <p>Connecting to Google Drive...</p> `
       : html`
-            ${
+          ${this.error
-              // @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
-              this.error
             ? html`
                 <div class="error has-text-danger">
                   <p>
-                        ${
+                    ${this.reauth
-                          // @ts-expect-error - TS2339 - Property 'reauth' does not exist on type 'GDrive'.
-                          this.reauth
                       ? "Some resources are loaded on demand from Google Drive, which requires reauthorization."
-                            : "Could not access this file with the current Google Drive account."
+                      : "Could not access this file with the current Google Drive account."}
-                        }
                   </p>
                   <p>
                     If you have multiple Google Drive accounts, be sure to
@@ -191,8 +169,7 @@ class GDrive extends LitElement {
                 </div>
                 <br />
               `
-                : ""
+            : ""}
-            }
           <button
             class="button is-warning is-rounded"
             @click="${this.onClickAuth}"
@@ -202,12 +179,10 @@ class GDrive extends LitElement {
             ></span>
             <span>Authorize Google Drive</span>
           </button>
-          `
+        `}`;
-    }`;
   }
 
   script() {
-    // @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. | TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'.
     if (this.state === "trypublic" || this.scriptLoaded) {
       return html``;
     }
@@ -218,9 +193,7 @@ class GDrive extends LitElement {
   }
 
   gauth(prompt, callback) {
-    // @ts-expect-error - TS2339 - Property 'gapi' does not exist on type 'Window & typeof globalThis'.
     self.gapi.load("auth2", () => {
-      // @ts-expect-error - TS2339 - Property 'gapi' does not exist on type 'Window & typeof globalThis'.
       self.gapi.auth2.authorize(
         {
           client_id: __GDRIVE_CLIENT_ID__,

src/index.d.ts

@@ -5,6 +5,9 @@ declare const __HELPER_PROXY__: string;
 declare const __GDRIVE_CLIENT_ID__: string;
 declare const __VERSION__: string;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type TODOFixMe = any;
+
 // showOpenFilePicker doesn't yet exist in Typescript's DOM lib
 // see https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker for details
 interface Window {
@@ -12,3 +15,7 @@ interface Window {
     types: { description: string; accept: Record<string, string[]> }[];
   }) => Promise<[FileSystemFileHandle]>;
 }
+
+interface Window {
+  gapi: TODOFixMe;
+}

src/item-index.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, type PropertyValues } from "lit";
 import { property, state } from "lit/decorators.js";
 import { wrapCss, apiPrefix } from "./misc";
 
@@ -20,16 +20,13 @@ class ItemIndex extends LitElement {
   query = "";
 
   @property({ type: Array })
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO fixme
+  filteredItems: Item[] = [];
-  filteredItems: any[] = [];
 
   @property({ type: Array })
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO fixme
+  sortedItems: Item[] = [];
-  sortedItems: any[] | null = null;
 
   @property({ type: Boolean })
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO fixme
+  hideHeader: boolean = false;
-  hideHeader: any = null;
 
   @property({ type: String })
   dateName = "Date Loaded";
@@ -66,11 +63,11 @@ class ItemIndex extends LitElement {
     this.loadItems();
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("hideHeader")) {
       localStorage.setItem("index:hideHeader", this.hideHeader ? "1" : "0");
     }
-    if (changedProperties.has("colls") || changedProperties.has("query")) {
+    if (changedProperties.has("items") || changedProperties.has("query")) {
       this.filter();
     }
   }

src/item.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, type PropertyValues } from "lit";
 import { property } from "lit/decorators.js";
 import { ref, createRef, type Ref } from "lit/directives/ref.js";
 import type {
@@ -51,7 +51,7 @@ import fasCaretDown from "@fortawesome/fontawesome-free/svgs/solid/caret-down.sv
 import { RWPEmbedReceipt } from "./embed-receipt";
 import Split from "split.js";
 
-import type { Item as ItemInfo } from "./types";
+import type { Item as ItemType } from "./types";
 import type { Replay } from "./replay";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -93,7 +93,7 @@ class Item extends LitElement {
   showSidebar: boolean | null = null;
 
   @property({ type: Object, attribute: false })
-  itemInfo: ItemInfo | Record<string, never> | null = null;
+  itemInfo: ItemType | Record<string, never> | null = null;
 
   @property({ type: String })
   item = "";
@@ -265,7 +265,7 @@ class Item extends LitElement {
     }
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     // if (changedProperties.has("url") || changedProperties.has("ts")) {
     //   if (this.url.startsWith("rwp?")) {
     //     this.tabData = Object.fromEntries(new URLSearchParams(this.url.slice(4)).entries());

src/loader.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, type PropertyValues } from "lit";
 import { wrapCss } from "./misc";
 
 import prettyBytes from "pretty-bytes";
@@ -258,7 +258,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
     }
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (
       (this.sourceUrl && changedProperties.has("sourceUrl")) ||
       changedProperties.has("tryFileHandle")

src/pageentry.ts

@@ -1,6 +1,6 @@
 import prettyBytes from "pretty-bytes";
 
-import { LitElement, html, css, unsafeCSS } from "lit";
+import { LitElement, html, css, unsafeCSS, type PropertyValues } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import "keyword-mark-element/lib/keyword-mark.js";
@@ -183,7 +183,7 @@ class PageEntry extends LitElement {
     `;
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("page") || changedProperties.has("query")) {
       this.updateSnippet();
       this.deleting = false;

src/pages.ts

@@ -165,9 +165,7 @@ class Pages extends LitElement {
       }
       const sorter = this.renderRoot.querySelector("wr-sorter") as Sorter;
       if (sorter) {
-        // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
         sorter.sortKey = this.sortKey;
-        // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
         sorter.sortDesc = this.sortDesc;
       }
     }

src/replay.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, type PropertyValues } from "lit";
 import { property } from "lit/decorators.js";
 
 import { wrapCss, rwpLogo } from "./misc";
@@ -95,7 +95,7 @@ class Replay extends LitElement {
         : "";
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (
       changedProperties.has("sourceUrl") ||
       changedProperties.has("collInfo")

src/sorter.ts

@@ -1,26 +1,28 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, type PropertyValues } from "lit";
 import { wrapCss } from "./misc";
 
 import fasSortDown from "@fortawesome/fontawesome-free/svgs/solid/sort-down.svg";
 import fasSortUp from "@fortawesome/fontawesome-free/svgs/solid/sort-up.svg";
 
 // ===========================================================================
-class Sorter extends LitElement {
+class Sorter<T = unknown> extends LitElement {
+  sortedData: T[];
+  data: T[];
+  pageResults: number;
+  numResults: number;
+
+  sortKey: string | null;
+  sortDesc: boolean | null;
+  sortKeys: { key: string; name: string }[] = [];
   constructor() {
     super();
-    // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
     this.sortedData = [];
-    // @ts-expect-error - TS2339 - Property 'data' does not exist on type 'Sorter'.
     this.data = [];
 
-    // @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'.
     this.pageResults = 0;
-    // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
     this.numResults = 0;
 
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
     this.sortKey = null;
-    // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
     this.sortDesc = null;
   }
 
@@ -42,31 +44,25 @@ class Sorter extends LitElement {
     if (this.id) {
       const sortKey = localStorage.getItem(`${this.id}:sortKey`);
       if (sortKey !== null) {
-        // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
         this.sortKey = sortKey;
       }
       const sortDesc = localStorage.getItem(`${this.id}:sortDesc`);
       if (sortDesc !== null) {
-        // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
         this.sortDesc = sortDesc === "1";
       }
     }
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     const keyChanged = changedProperties.has("sortKey");
     const descChanged = changedProperties.has("sortDesc");
     const dataChanged = changedProperties.has("data");
 
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
     if (keyChanged && this.sortKey !== null) {
-      // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
       localStorage.setItem(`${this.id}:sortKey`, this.sortKey);
     }
 
-    // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
     if (descChanged && this.sortDesc !== null) {
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
       localStorage.setItem(`${this.id}:sortDesc`, this.sortDesc ? "1" : "0");
     }
 
@@ -76,28 +72,20 @@ class Sorter extends LitElement {
   }
 
   sortData() {
-    // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'data' does not exist on type 'Sorter'.
     this.sortedData = [...this.data];
-    // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2339 - Property 'pageResults' does not exist on type 'Sorter'.
     this.numResults = this.pageResults;
 
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
+    if ((this.sortKey == null || this.sortKey) === "") {
-    if (this.sortKey === "") {
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
       if (this.sortDesc) {
-        // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
         this.sortedData.reverse();
       }
     } else {
-      // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
       this.sortedData.sort((first, second) => {
-        // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
+        if (first[this.sortKey!] === second[this.sortKey!]) {
-        if (first[this.sortKey] === second[this.sortKey]) {
           return 0;
         }
 
-        // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
+        return this.sortDesc == first[this.sortKey!] < second[this.sortKey!]
-        return this.sortDesc == first[this.sortKey] < second[this.sortKey]
           ? 1
           : -1;
       });
@@ -108,27 +96,20 @@ class Sorter extends LitElement {
 
   sendSortChanged() {
     const detail = {
-      // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
       sortKey: this.sortKey,
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
       sortDesc: this.sortDesc,
-      // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
       sortedData: this.numResults
-        ? // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'numResults' does not exist on type 'Sorter'.
+        ? this.sortedData.slice(0, this.numResults)
-          this.sortedData.slice(0, this.numResults)
+        : this.sortedData,
-        : // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
-          this.sortedData,
     };
     this.dispatchEvent(new CustomEvent("sort-changed", { detail }));
   }
 
   getMore(more = 100) {
-    // @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'. | TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
     if (this.pageResults && this.numResults >= this.sortedData.length) {
       return;
     }
 
-    // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
     this.numResults += more;
     this.sendSortChanged();
   }
@@ -149,37 +130,24 @@ class Sorter extends LitElement {
     return html`
     <div class="select is-small">
       <select id="sort-select" @change=${(e) =>
-        // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
         (this.sortKey = e.currentTarget.value)}>
 
-      ${
+      ${this.sortKeys.map(
-        // @ts-expect-error - TS2339 - Property 'sortKeys' does not exist on type 'Sorter'.
-        this.sortKeys.map(
         (sort) => html`
-            <option
+          <option value="${sort.key}" ?selected="${sort.key === this.sortKey}">
-              value="${sort.key}"
-              ?selected="${
-                // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
-                sort.key === this.sortKey
-              }"
-            >
             Sort By: ${sort.name}
           </option>
         `,
-        )
+      )}
-      }
       </select>
     </div>
     <button @click=${() =>
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. | TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
       (this.sortDesc = !this.sortDesc)} class="button is-small">
       <span>Order:</span>
       <span class="is-sr-only">${
-        // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
         this.sortDesc ? "Ascending" : "Descending"
       }</span>
       <span class="icon"><fa-icon aria-hidden="true" .svg=${
-        // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
         this.sortDesc ? fasSortUp : fasSortDown
       }></span>
     </button>`;

src/story.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, unsafeCSS } from "lit";
+import { LitElement, html, css, unsafeCSS, type PropertyValues } from "lit";
 import { wrapCss } from "./misc";
 
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -7,32 +7,33 @@ import { marked } from "marked";
 import { getTS, getReplayLink } from "./pageutils";
 
 import Split from "split.js";
+import { ItemInfo } from "./item-info";
 
 // ===========================================================================
 class Story extends LitElement {
+  collInfo: ItemInfo | Record<string, never> | null;
+  curatedPageMap: Record<string, unknown[]>;
+  currList: number;
+  active: boolean;
+  lastST: number;
+  clickTime: number;
+  isSidebar: boolean;
+  splitDirection: boolean | "vertical" | "horizontal";
   constructor() {
     super();
 
-    // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'Story'.
     this.collInfo = null;
 
-    // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
     this.curatedPageMap = {};
 
-    // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
     this.currList = 0;
 
-    // @ts-expect-error - TS2339 - Property 'active' does not exist on type 'Story'.
     this.active = false;
 
-    // @ts-expect-error - TS2339 - Property 'lastST' does not exist on type 'Story'.
     this.lastST = 0;
-    // @ts-expect-error - TS2339 - Property 'clickTime' does not exist on type 'Story'.
     this.clickTime = 0;
 
-    // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'Story'.
     this.isSidebar = false;
-    // @ts-expect-error - TS2339 - Property 'splitDirection' does not exist on type 'Story'.
     this.splitDirection = false;
   }
 
@@ -52,9 +53,7 @@ class Story extends LitElement {
   }
 
   recalcSplitter(width) {
-    // @ts-expect-error - TS2339 - Property 'splitDirection' does not exist on type 'Story'.
     this.splitDirection =
-      // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'Story'.
       this.isSidebar || width < 769 ? "vertical" : "horizontal";
   }
 
@@ -70,7 +69,7 @@ class Story extends LitElement {
     this.obs.observe(this);
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("collInfo")) {
       this.doLoadCurated();
     }
@@ -86,10 +85,8 @@ class Story extends LitElement {
       this.configureSplitter();
     }
 
-    // @ts-expect-error - TS2339 - Property 'active' does not exist on type 'Story'.
     if (changedProperties.has("currList") && this.active) {
       this.sendChangeEvent({
-        // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
         currList: this.currList,
       });
     }
@@ -118,7 +115,6 @@ class Story extends LitElement {
 
         gutterSize: 4,
 
-        // @ts-expect-error - TS2339 - Property 'splitDirection' does not exist on type 'Story'.
         direction: this.splitDirection,
       };
 
@@ -128,7 +124,6 @@ class Story extends LitElement {
   }
 
   async doLoadCurated() {
-    // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
     this.curatedPageMap = {};
 
     const pageMap = {};
@@ -140,9 +135,7 @@ class Story extends LitElement {
 
     // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'Story'.
     for (const curated of this.collInfo.curatedPages) {
-      // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
       if (!this.curatedPageMap[curated.list]) {
-        // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
         this.curatedPageMap[curated.list] = [];
       }
       const page = curated;
@@ -160,7 +153,6 @@ class Story extends LitElement {
       const title = page.title || page.url;
       const desc = curated.desc;
 
-      // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
       this.curatedPageMap[curated.list].push({ url, ts, title, desc });
     }
 
@@ -275,23 +267,15 @@ class Story extends LitElement {
   }
 
   render() {
-    // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
     const currListNum = this.currList;
 
     return html`
       <div
         class="is-sr-only"
         role="heading"
-        aria-level="${
+        aria-level="${this.isSidebar ? "2" : "1"}"
-          // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'Story'.
-          this.isSidebar ? "2" : "1"
-        }"
       >
-        Story for
+        Story for ${this.collInfo!.title}
-        ${
-          // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'Story'.
-          this.collInfo.title
-        }
       </div>
       <div class="columns">
         <div class="column sidebar is-one-fifth">
@@ -363,13 +347,9 @@ class Story extends LitElement {
             <h3>${list.title}</h3>
             <p>${list.desc}</p>
             <ol>
-              ${
+              ${this.curatedPageMap[list.id]
-                // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
+                ? this.curatedPageMap[list.id].map((p) => this.renderCPage(p))
-                this.curatedPageMap[list.id]
+                : html``}
-                  ? // @ts-expect-error - TS2339 - Property 'curatedPageMap' does not exist on type 'Story'.
-                    this.curatedPageMap[list.id].map((p) => this.renderCPage(p))
-                  : html``
-              }
             </ol>
           </div>
         </article>
@@ -417,7 +397,6 @@ class Story extends LitElement {
   onClickScroll(event) {
     event.preventDefault();
     //this.pageView = false;
-    // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
     this.currList = Number(event.currentTarget.getAttribute("data-list"));
     this.scrollToList();
     return false;
@@ -427,12 +406,10 @@ class Story extends LitElement {
     // lists are 1 based, 0 is header, 1 is first list
     // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'. | TS2339 - Property 'collInfo' does not exist on type 'Story'.
     if (this.currList > this.collInfo.lists.length) {
-      // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
       this.currList = 0;
     }
 
     const opts = { behavior: "smooth", block: "nearest", inline: "nearest" };
-    // @ts-expect-error - TS2339 - Property 'clickTime' does not exist on type 'Story'.
     this.clickTime = new Date().getTime();
     // @ts-expect-error - TS2339 - Property 'getElementById' does not exist on type 'HTMLElement | ShadowRoot'. | TS2339 - Property 'currList' does not exist on type 'Story'.
     const curr = this.renderRoot.getElementById("list-" + this.currList);
@@ -454,7 +431,6 @@ class Story extends LitElement {
     const target = scrollable.offsetTop;
     const currST = scrollable.scrollTop;
 
-    // @ts-expect-error - TS2339 - Property 'lastST' does not exist on type 'Story'.
     if (currST > this.lastST) {
       while (
         next.nextElementSibling &&
@@ -470,22 +446,18 @@ class Story extends LitElement {
         next = next.previousElementSibling;
       }
     }
-    // @ts-expect-error - TS2339 - Property 'lastST' does not exist on type 'Story'.
     this.lastST = currST;
     if (next && next != curr) {
       if (next.id.startsWith("list-")) {
-        // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
         this.currList = Number(next.id.slice(5));
       }
     }
 
-    // @ts-expect-error - TS2339 - Property 'clickTime' does not exist on type 'Story'.
     if (new Date().getTime() - this.clickTime < 1000) {
       return;
     }
 
     const sel = this.renderRoot.querySelector(
-      // @ts-expect-error - TS2339 - Property 'currList' does not exist on type 'Story'.
       `a[data-list="${this.currList}"]`,
     );
     if (sel) {

src/url-resources.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, type PropertyValues } from "lit";
 import { wrapCss, clickOnSpacebarPress } from "./misc";
 
 import { getReplayLink } from "./pageutils";
@@ -6,12 +6,35 @@ import { getReplayLink } from "./pageutils";
 import fasSearch from "@fortawesome/fontawesome-free/svgs/solid/search.svg";
 
 import "keyword-mark-element/lib/keyword-mark.js";
+import { type Item as ItemType } from "./types";
+
+type URLResource = {
+  url: string;
+  mime: string;
+  status: string;
+  date: string;
+  ts: string;
+};
 
 // ===========================================================================
 /**
  * @prop {boolean | undefined} active
  */
 class URLResources extends LitElement {
+  collInfo: ItemType | Record<string, never> | null = null;
+  isSidebar: boolean;
+  currMime: string;
+  query: string;
+  urlSearchType: string;
+  filteredResults: URLResource[];
+  sortedResults: URLResource[];
+  results: URLResource[];
+  newQuery: null;
+  tryMore: boolean;
+  loading: boolean;
+  sortKey: string;
+  sortDesc: boolean;
+  private _ival?: number;
   static get filters() {
     return [
       { name: "HTML", filter: "text/html,text/xhtml" },
@@ -58,37 +81,23 @@ class URLResources extends LitElement {
 
   constructor() {
     super();
-    // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'.
-    this.collInfo = null;
-    // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
     this.isSidebar = false;
 
-    // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
     this.currMime = "";
-    // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
     this.query = "";
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
     this.urlSearchType = "";
 
-    // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
     this.filteredResults = [];
-    // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
     this.sortedResults = [];
 
-    // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'.
     this.results = [];
 
-    // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
     this.newQuery = null;
 
-    // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'.
     this.tryMore = false;
-    // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
     this.loading = false;
 
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
     this.sortKey = "url";
-    // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
     this.sortDesc = false;
   }
 
@@ -109,24 +118,19 @@ class URLResources extends LitElement {
 
   firstUpdated() {
     //this.doLoadResources();
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
     if (this.urlSearchType === "") {
-      // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
       this.urlSearchType = "prefix";
     }
   }
 
   _timedUpdate() {
-    // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
     if (this.newQuery !== null) {
-      // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'. | TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
       this.query = this.newQuery;
-      // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
       this.newQuery = null;
     }
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (
       changedProperties.has("query") ||
       changedProperties.has("urlSearchType") ||
@@ -134,11 +138,8 @@ class URLResources extends LitElement {
     ) {
       this.doLoadResources();
       const data = {
-        // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
         query: this.query,
-        // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
         urlSearchType: this.urlSearchType,
-        // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
         currMime: this.currMime,
       };
       const replaceLoc =
@@ -156,22 +157,16 @@ class URLResources extends LitElement {
 
   async doLoadResources(isMore = false) {
     const count = 100;
-
-    // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'.
     if (isMore && (!this.tryMore || !this.results.length)) {
       return;
     }
 
-    // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
     if (this.loading) {
       return;
     }
 
-    // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
     this.loading = true;
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. | TS2339 - Property 'query' does not exist on type 'URLResources'.
     let url = this.urlSearchType !== "contains" ? this.query : "";
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
     const prefix = url && this.urlSearchType === "prefix" ? 1 : 0;
 
     // optimization: if not starting with http, likely won't have a match here, so just add https://
@@ -179,78 +174,60 @@ class URLResources extends LitElement {
       url = "https://" + url;
     }
 
-    // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
     const mime = this.currMime;
 
-    // @ts-expect-error - TS2345 - Argument of type '{ mime: any; url: any; prefix: number; count: number; }' is not assignable to parameter of type 'string | Record<string, string> | URLSearchParams | string[][] | undefined'.
     const params = new URLSearchParams({
       mime,
       url,
-      prefix,
+      prefix: String(prefix),
-      count,
+      count: String(count),
     });
 
     if (isMore) {
-      // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'.
       const last = this.results[this.results.length - 1];
       params.set("fromMime", last.mime);
       params.set("fromUrl", last.url);
       params.set("fromStatus", last.status);
-      // @ts-expect-error - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'.
+      params.set("fromTs", String(new Date(last.date).getTime()));
-      params.set("fromTs", new Date(last.date).getTime());
     }
 
-    let resp = await fetch(
+    const resp = await fetch(
-      // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'.
+      `${this.collInfo!.apiPrefix}/urls?${params.toString()}`,
-      `${this.collInfo.apiPrefix}/urls?${params.toString()}`,
     );
-    resp = await resp.json();
+    const data = await resp.json();
-    // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'? | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'?
+    this.results = isMore ? this.results.concat(data.urls) : data.urls;
-    this.results = isMore ? this.results.concat(resp.urls) : resp.urls;
     // can be more than count if multiple mimes
-    // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'. | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'?
+    this.tryMore = data.urls.length >= count;
-    this.tryMore = resp.urls.length >= count;
     this.filter();
 
-    // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
     this.loading = false;
   }
 
   onChangeTypeSearch(event) {
-    // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
     this.currMime = event.currentTarget.value;
   }
 
   onChangeQuery(event) {
-    // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
     this.newQuery = event.currentTarget.value;
-    // @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'.
     if (this._ival) {
-      // @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'.
       window.clearTimeout(this._ival);
     }
-    // @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'.
     this._ival = window.setTimeout(() => this._timedUpdate(), 250);
   }
 
   onClickUrlType(event) {
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
     this.urlSearchType = event.currentTarget.value;
   }
 
   filter() {
-    const filteredResults = [];
+    const filteredResults: URLResource[] = [];
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. | TS2339 - Property 'query' does not exist on type 'URLResources'.
     const filterText = this.urlSearchType === "contains" ? this.query : "";
-    // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'.
     for (const result of this.results) {
       if (!filterText || result.url.indexOf(filterText) >= 0) {
-        // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
         filteredResults.push(result);
       }
     }
 
-    // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
     this.filteredResults = filteredResults;
   }
 
@@ -258,7 +235,6 @@ class URLResources extends LitElement {
     const element = event.currentTarget;
     const diff =
       element.scrollHeight - element.scrollTop - element.clientHeight;
-    // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'.
     if (this.tryMore && diff < 40) {
       this.doLoadResources(true);
     }
@@ -365,25 +341,15 @@ class URLResources extends LitElement {
     return html`
       <div
         role="heading"
-        aria-level="${
+        aria-level="${this.isSidebar ? "2" : "1"}"
-          // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
-          this.isSidebar ? "2" : "1"
-        }"
         class="is-sr-only"
       >
-        URLs in
+        URLs in ${this.collInfo!.title}
-        ${
-          // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'.
-          this.collInfo.title
-        }
       </div>
 
       <div
         role="heading"
-        aria-level="${
+        aria-level="${this.isSidebar ? "3" : "2"}"
-          // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
-          this.isSidebar ? "3" : "2"
-        }"
         class="is-sr-only"
       >
         Search and Filter
@@ -398,10 +364,7 @@ class URLResources extends LitElement {
                   (filter) => html`
                     <option
                       value="${filter.filter}"
-                      ?selected="${
+                      ?selected="${filter.filter === this.currMime}"
-                        // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
-                        filter.filter === this.currMime
-                      }"
                     >
                       ${filter.name}
                     </option>
@@ -411,19 +374,15 @@ class URLResources extends LitElement {
             </div>
             <div class="field flex-auto">
               <div
-                class="control has-icons-left ${
+                class="control has-icons-left ${this.loading
-                  // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
+                  ? "is-loading"
-                  this.loading ? "is-loading" : ""
+                  : ""}"
-                }"
               >
                 <input
                   type="text"
                   class="input"
                   @input="${this.onChangeQuery}"
-                  .value="${
+                  .value="${this.query}"
-                    // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
-                    this.query
-                  }"
                   placeholder="Enter URL to Search"
                 />
                 <span class="icon is-left"
@@ -440,10 +399,7 @@ class URLResources extends LitElement {
                 type="radio"
                 name="urltype"
                 value="contains"
-                ?checked="${
+                ?checked="${this.urlSearchType === "contains"}"
-                  // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
-                  this.urlSearchType === "contains"
-                }"
                 @click="${this.onClickUrlType}"
               />&nbsp;Contains</label
             >
@@ -452,10 +408,7 @@ class URLResources extends LitElement {
                 type="radio"
                 name="urltype"
                 value="prefix"
-                ?checked="${
+                ?checked="${this.urlSearchType === "prefix"}"
-                  // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
-                  this.urlSearchType === "prefix"
-                }"
                 @click="${this.onClickUrlType}"
               />&nbsp;Prefix</label
             >
@@ -464,10 +417,7 @@ class URLResources extends LitElement {
                 type="radio"
                 name="urltype"
                 value="exact"
-                ?checked="${
+                ?checked="${this.urlSearchType === "exact"}"
-                  // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
-                  this.urlSearchType === "exact"
-                }"
                 @click="${this.onClickUrlType}"
               />&nbsp;Exact</label
             >
@@ -477,11 +427,7 @@ class URLResources extends LitElement {
               is-pulled-right
               aria-live="polite"
               aria-atomic="true"
-              >${
+              >${this.filteredResults.length} Result(s)</span
-                // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
-                this.filteredResults.length
-              }
-              Result(s)</span
             >
           </div>
         </div>
@@ -490,19 +436,10 @@ class URLResources extends LitElement {
       <div class="sort-header is-hidden-tablet">
         <wr-sorter
           id="urls"
-          .sortKey="${
+          .sortKey="${this.sortKey}"
-            // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
+          .sortDesc="${this.sortDesc}"
-            this.sortKey
-          }"
-          .sortDesc="${
-            // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
-            this.sortDesc
-          }"
           .sortKeys="${URLResources.sortKeys}"
-          .data="${
+          .data="${this.filteredResults}"
-            // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
-            this.filteredResults
-          }"
           @sort-changed="${this.onSortChanged}"
         >
         </wr-sorter>
@@ -510,10 +447,7 @@ class URLResources extends LitElement {
 
       <div
         role="heading"
-        aria-level="${
+        aria-level="${this.isSidebar ? "3" : "2"}"
-          // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
-          this.isSidebar ? "3" : "2"
-        }"
         id="results-heading"
         class="is-sr-only"
       >
@@ -530,15 +464,11 @@ class URLResources extends LitElement {
                 @click="${this.onSort}"
                 @keyup="${clickOnSpacebarPress}"
                 data-key="url"
-                class="${
+                class="${this.sortKey === "url"
-                  // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
+                  ? this.sortDesc
-                  this.sortKey === "url"
-                    ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
-                      this.sortDesc
                     ? "desc"
                     : "asc"
-                    : ""
+                  : ""}"
-                }"
                 >URL</a
               >
             </th>
@@ -549,15 +479,11 @@ class URLResources extends LitElement {
                 @click="${this.onSort}"
                 @keyup="${clickOnSpacebarPress}"
                 data-key="ts"
-                class="${
+                class="${this.sortKey === "ts"
-                  // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
+                  ? this.sortDesc
-                  this.sortKey === "ts"
-                    ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
-                      this.sortDesc
                     ? "desc"
                     : "asc"
-                    : ""
+                  : ""}"
-                }"
                 >Date</a
               >
             </th>
@@ -568,15 +494,11 @@ class URLResources extends LitElement {
                 @click="${this.onSort}"
                 @keyup="${clickOnSpacebarPress}"
                 data-key="mime"
-                class="${
+                class="${this.sortKey === "mime"
-                  // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
+                  ? this.sortDesc
-                  this.sortKey === "mime"
-                    ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
-                      this.sortDesc
                     ? "desc"
                     : "asc"
-                    : ""
+                  : ""}"
-                }"
                 >Mime Type</a
               >
             </th>
@@ -587,15 +509,11 @@ class URLResources extends LitElement {
                 @click="${this.onSort}"
                 @keyup="${clickOnSpacebarPress}"
                 data-key="status"
-                class="${
+                class="${this.sortKey === "status"
-                  // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
+                  ? this.sortDesc
-                  this.sortKey === "status"
-                    ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
-                      this.sortDesc
                     ? "desc"
                     : "asc"
-                    : ""
+                  : ""}"
-                }"
                 >Status</a
               >
             </th>
@@ -603,11 +521,8 @@ class URLResources extends LitElement {
         </thead>
 
         <tbody class="main-scroll" @scroll="${this.onScroll}">
-          ${
+          ${this.sortedResults.length
-            // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
+            ? this.sortedResults.map(
-            this.sortedResults.length
-              ? // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
-                this.sortedResults.map(
                 (result) => html`
                   <tr class="columns result">
                     <td class="column col-url is-6">
@@ -622,11 +537,7 @@ class URLResources extends LitElement {
                           result.ts,
                         )}"
                       >
-                          <keyword-mark
+                        <keyword-mark keywords="${this.query}"
-                            keywords="${
-                              // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
-                              this.query
-                            }"
                           >${result.url}</keyword-mark
                         >
                       </a>
@@ -648,8 +559,7 @@ class URLResources extends LitElement {
               )
             : html`<tr class="section">
                 <td colspan="4"><i>No Results Found.</i></td>
-                </tr>`
+              </tr>`}
-          }
         </tbody>
       </table>
     `;
@@ -659,24 +569,17 @@ class URLResources extends LitElement {
     event.preventDefault();
 
     const key = event.currentTarget.getAttribute("data-key");
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
     if (key === this.sortKey) {
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. | TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
       this.sortDesc = !this.sortDesc;
     } else {
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
       this.sortDesc = false;
-      // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
       this.sortKey = key;
     }
   }
 
   onSortChanged(event) {
-    // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
     this.sortedResults = event.detail.sortedData;
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
     this.sortKey = event.detail.sortKey;
-    // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
     this.sortDesc = event.detail.sortDesc;
   }