Reduce use of type casting (#3723)

ts/editable/mathjax.ts

@@ -18,7 +18,7 @@ function getCSS(nightMode: boolean, fontSize: number): string {
 }
 
 function getStyle(css: string): HTMLStyleElement {
-    const style = document.createElement("style") as HTMLStyleElement;
+    const style = document.createElement("style");
     style.appendChild(document.createTextNode(css));
     return style;
 }

ts/editor/NoteEditor.svelte

@@ -386,9 +386,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
      * Enable/Disable add-on buttons that do not have the `perm` class
      */
     function setAddonButtonsDisabled(disabled: boolean): void {
-        document.querySelectorAll("button.linkb:not(.perm)").forEach((button) => {
+        document
-            (button as HTMLButtonElement).disabled = disabled;
+            .querySelectorAll<HTMLButtonElement>("button.linkb:not(.perm)")
-        });
+            .forEach((button) => {
+                button.disabled = disabled;
+            });
     }
 
     import { ImageOcclusionFieldIndexes } from "@generated/anki/image_occlusion_pb";

ts/editor/rich-text-input/RichTextStyles.svelte

@@ -43,17 +43,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: setStyling("fontSize", fontSize + "px");
     $: setStyling("direction", direction);
 
-    const styles = [
+    const styles: StyleLinkType[] = [
         {
             id: "rootStyle",
-            type: "link" as "link",
+            type: "link",
             href: "./_anki/css/editable.css",
-        } as StyleLinkType,
+        },
     ];
 
     function attachToShadow(element: Element) {
         const customStyles = mount(CustomStyles, {
-            target: element.shadowRoot as any,
+            target: element.shadowRoot!,
             props: { styles },
         });
         customStyles.addStyleTag("userBase").then((styleTag) => {

ts/html-filter/styling.ts

@@ -16,7 +16,7 @@ function filterStyling(
 ): (element: HTMLElement) => void {
     return (element: HTMLElement): void => {
         // jsdom does not support @@iterator, so manually iterate
-        const toRemove = [] as string[];
+        const toRemove: string[] = [];
         for (let i = 0; i < element.style.length; i++) {
             const key = element.style.item(i);
             const value = element.style.getPropertyValue(key);

ts/lib/components/WithFloating.svelte

@@ -35,7 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { placement as preferredPlacement };
 
     /* Used by Popover to set animation direction depending on placement */
-    const placementPromise = writable(undefined as Promise<Placement> | undefined);
+    const placementPromise = writable<Promise<Placement> | undefined>();
     setContext(floatingKey, placementPromise);
 
     export let offset = 5;

ts/lib/components/WithOverlay.svelte

@@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { overlayKey } from "./context-keys";
 
     /* Used by Popover to set animation direction depending on placement */
-    const placementPromise = writable(undefined as Promise<Placement> | undefined);
+    const placementPromise = writable<Promise<Placement> | undefined>();
     setContext(overlayKey, placementPromise);
 
     export let padding = 0;

ts/lib/components/WithState.svelte

@@ -17,7 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         callback: (key: KeyType) => Promise<boolean>,
     ): void {
         stateStore.update((map: StateMap): StateMap => {
-            const newMap = new Map() as StateMap;
+            const newMap: StateMap = new Map();
 
             for (const key of map.keys()) {
                 newMap.set(key, callback(key));

ts/lib/domlib/location/document.ts

@@ -50,7 +50,7 @@ export function restoreSelection(base: Node, location: SelectionLocation): void
             base,
             selection,
             range,
-            location as SelectionLocationContent,
+            location,
         );
     }
 }

ts/lib/tag-editor/TagEditor.svelte

@@ -375,10 +375,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     function deleteSelectedTags() {
         tagTypes
-            .map((tag, index) => [tag.selected, index])
+            .map((tag, index): [boolean, number] => [tag.selected, index])
             .filter(([selected]) => selected)
             .reverse()
-            .forEach(([, index]) => deleteTagAt(index as number));
+            .forEach(([, index]) => deleteTagAt(index));
         deselect();
         saveTags();
     }

ts/reviewer/images.ts

@@ -19,8 +19,8 @@ function imageLoaded(img: HTMLImageElement): Promise<void> {
 }
 
 function extractImageSrcs(fragment: DocumentFragment): string[] {
-    const srcs = [...fragment.querySelectorAll("img[src]")].map(
+    const srcs = [...fragment.querySelectorAll<HTMLImageElement>("img[src]")].map(
-        (img) => (img as HTMLImageElement).src,
+        (img) => img.src,
     );
     return srcs;
 }

ts/reviewer/lib.test.ts

@@ -85,7 +85,7 @@ function exampleInput(): SchedulingStatesWithContext {
 
 test("can change oneof", () => {
     let states = exampleInput().states!;
-    const jsonStates = states.toJson({ "emitDefaultValues": true }) as any;
+    const jsonStates = states.toJson({ "emitDefaultValues": true });
     // again should be a relearning state
     const inner = states.again?.kind?.value?.kind;
     assert(inner?.case === "relearning");

ts/reviewer/preload.ts

@@ -34,7 +34,7 @@ function createPreloadLink(href: string, as: string): HTMLLinkElement {
 }
 
 function extractExternalStyleSheets(fragment: DocumentFragment): CSSElement[] {
-    return ([...fragment.querySelectorAll("style, link")] as CSSElement[])
+    return [...fragment.querySelectorAll<CSSElement>("style, link")]
         .filter((css) =>
             (css instanceof HTMLStyleElement && css.innerHTML.includes("@import"))
             || (css instanceof HTMLLinkElement && css.rel === "stylesheet")

ts/routes/card-info/ForgettingCurve.svelte

@@ -21,7 +21,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let revlog: RevlogEntry[];
     export let desiredRetention: number;
-    let svg = null as HTMLElement | SVGElement | null;
+    let svg: HTMLElement | SVGElement | null = null;
     const bounds = defaultGraphBounds();
     const title = tr.cardStatsFsrsForgettingCurveTitle();
 

ts/routes/change-notetype/lib.ts

@@ -93,12 +93,12 @@ export class ChangeNotetypeInfoWrapper {
     }
 
     input(): ChangeNotetypeRequest {
-        return this.info.input as ChangeNotetypeRequest;
+        return this.info.input!;
     }
 
     /** Pack changes back into input message for saving. */
     intoInput(): ChangeNotetypeRequest {
-        const input = this.info.input as ChangeNotetypeRequest;
+        const input = this.info.input!;
         input.newFields = nullToNegativeOne(this.fields);
         if (this.templates) {
             input.newTemplates = nullToNegativeOne(this.templates);
@@ -194,7 +194,7 @@ export class ChangeNotetypeState {
                 idx,
                 name: entry.name,
                 current: entry.id === currentId,
-            } as NotetypeListEntry),
+            } satisfies NotetypeListEntry),
         );
     }
 }

ts/routes/deck-options/AdvancedOptions.svelte

@@ -81,7 +81,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             url: "https://faqs.ankiweb.net/the-2021-scheduler.html#add-ons-and-custom-scheduling",
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
 
     let modal: Modal;
     let carousel: Carousel;

ts/routes/deck-options/AudioOptions.svelte

@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             help: tr.deckConfigAlwaysIncludeQuestionAudioTooltip(),
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
 
     let modal: Modal;
     let carousel: Carousel;

ts/routes/deck-options/AutoAdvance.svelte

@@ -49,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             help: tr.deckConfigAnswerActionTooltip2(),
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
 
     let modal: Modal;
     let carousel: Carousel;

ts/routes/deck-options/BuryOptions.svelte

@@ -40,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             help: tr.deckConfigBuryInterdayLearningTooltip() + priorityTooltip,
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
 
     let modal: Modal;
     let carousel: Carousel;

ts/routes/deck-options/DailyLimits.svelte

@@ -143,7 +143,7 @@
             url: HelpPage.DeckOptions.newCardsday,
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
 
     let modal: Modal;
     let carousel: Carousel;

ts/routes/deck-options/DisplayOrder.svelte

@@ -97,7 +97,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             help: tr.deckConfigReviewSortOrderTooltip() + currentDeck,
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
 
     let modal: Modal;
     let carousel: Carousel;

ts/routes/deck-options/FsrsOptions.svelte

@@ -300,10 +300,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return tr.deckConfigPredictedOptimalRetention({ num: retention.toFixed(2) });
     }
 
-    let tableData: TableDatum[] = [] as any;
+    let tableData: TableDatum[] = [];
     const bounds = defaultGraphBounds();
     bounds.marginLeft += 8;
-    let svg = null as HTMLElement | SVGElement | null;
+    let svg: HTMLElement | SVGElement | null = null;
     let simulationNumber = 0;
 
     let points: Point[] = [];

ts/routes/deck-options/FsrsOptionsOuter.svelte

@@ -55,7 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             sched: HelpItemScheduler.FSRS,
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
 
     let modal: Modal;
     let carousel: Carousel;

ts/routes/deck-options/LapseOptions.svelte

@@ -68,7 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             url: HelpPage.Leeches.waiting,
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
 
     let modal: Modal;
     let carousel: Carousel;

ts/routes/deck-options/NewOptions.svelte

@@ -80,7 +80,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             url: HelpPage.DeckOptions.insertionOrder,
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
 
     let modal: Modal;
     let carousel: Carousel;

ts/routes/deck-options/TimerOptions.svelte

@@ -45,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             help: tr.deckConfigStopTimerOnAnswerTooltip(),
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
 
     let modal: Modal;
     let carousel: Carousel;

ts/routes/graphs/AddedGraph.svelte

@@ -22,7 +22,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let sourceData: GraphsResponse | null = null;
     export let prefs: GraphPrefs;
 
-    let histogramData = null as HistogramData | null;
+    let histogramData: HistogramData | null = null;
     let tableData: TableDatum[] = [];
     let graphRange: GraphRange = GraphRange.Month;
 

ts/routes/graphs/ButtonsGraph.svelte

@@ -23,7 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const bounds = defaultGraphBounds();
 
-    let svg = null as HTMLElement | SVGElement | null;
+    let svg: HTMLElement | SVGElement | null = null;
 
     $: if (sourceData) {
         renderButtons(svg as SVGElement, bounds, sourceData, graphRange);

ts/routes/graphs/CalendarGraph.svelte

@@ -30,13 +30,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bounds.marginLeft = 20;
     bounds.marginRight = 20;
 
-    let svg = null as HTMLElement | SVGElement | null;
+    let svg: HTMLElement | SVGElement | null = null;
     const maxYear = new Date().getFullYear();
     let minYear = 0;
     let targetYear = maxYear;
 
     $: if (sourceData) {
-        graphData = gatherData(sourceData, $prefs.calendarFirstDayOfWeek as number);
+        graphData = gatherData(sourceData, $prefs.calendarFirstDayOfWeek);
         renderCalendar(
             svg as SVGElement,
             bounds,
@@ -52,7 +52,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: {
         if (revlogRange < RevlogRange.Year) {
             minYear = maxYear;
-        } else if ((revlogRange as RevlogRange) === RevlogRange.Year) {
+        } else if (revlogRange === RevlogRange.Year) {
             minYear = maxYear - 1;
         } else {
             minYear = 2000;

ts/routes/graphs/CardCounts.svelte

@@ -20,14 +20,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const dispatch = createEventDispatcher<SearchEventMap>();
 
-    let svg = null as HTMLElement | SVGElement | null;
+    let svg: HTMLElement | SVGElement | null = null;
 
     const bounds = defaultGraphBounds();
     bounds.width = 225;
     bounds.marginBottom = 0;
 
-    let graphData = null as unknown as GraphData;
+    let graphData: GraphData = null!;
-    let tableData = null as unknown as TableDatum[];
+    let tableData: TableDatum[] = null!;
 
     $: {
         graphData = gatherData(sourceData, $prefs.cardCountsSeparateInactive);

ts/routes/graphs/DifficultyGraph.svelte

@@ -20,7 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const dispatch = createEventDispatcher<SearchEventMap>();
 
-    let histogramData = null as HistogramData | null;
+    let histogramData: HistogramData | null = null;
     let tableData: TableDatum[] = [];
 
     $: if (sourceData) {

ts/routes/graphs/EaseGraph.svelte

@@ -20,7 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const dispatch = createEventDispatcher<SearchEventMap>();
 
-    let histogramData = null as HistogramData | null;
+    let histogramData: HistogramData | null = null;
     let tableData: TableDatum[] = [];
 
     $: if (sourceData) {

ts/routes/graphs/FutureDue.svelte

@@ -24,9 +24,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const dispatch = createEventDispatcher<SearchEventMap>();
 
-    let graphData = null as GraphData | null;
+    let graphData: GraphData | null = null;
-    let histogramData = null as HistogramData | null;
+    let histogramData: HistogramData | null = null;
-    let tableData: TableDatum[] = [] as any;
+    let tableData: TableDatum[] = [];
     let graphRange: GraphRange = GraphRange.Month;
 
     $: if (sourceData) {

ts/routes/graphs/HistogramGraph.svelte

@@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let data: HistogramData | null = null;
 
     const bounds = defaultGraphBounds();
-    let svg = null as HTMLElement | SVGElement | null;
+    let svg: HTMLElement | SVGElement | null = null;
 
     $: histogramGraph(svg as SVGElement, bounds, data);
 </script>

ts/routes/graphs/HourGraph.svelte

@@ -23,7 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const bounds = defaultGraphBounds();
 
-    let svg = null as HTMLElement | SVGElement | null;
+    let svg: HTMLElement | SVGElement | null = null;
 
     $: if (sourceData) {
         renderHours(svg as SVGElement, bounds, sourceData, graphRange);

ts/routes/graphs/IntervalsGraph.svelte

@@ -28,7 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher<SearchEventMap>();
 
     let intervalData: IntervalGraphData | null = null;
-    let histogramData = null as HistogramData | null;
+    let histogramData: HistogramData | null = null;
     let tableData: TableDatum[] = [];
     let range = IntervalRange.Percentile95;
 

ts/routes/graphs/RangeBox.svelte

@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let displayedSearch = $search;
 
     $: {
-        switch (searchRange as SearchRange) {
+        switch (searchRange) {
             case SearchRange.Deck:
                 $search = displayedSearch = "deck:current";
                 break;
@@ -45,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     $: {
-        switch (revlogRange as RevlogRange) {
+        switch (revlogRange) {
             case RevlogRange.Year:
                 $days = 365;
                 break;

ts/routes/graphs/RetrievabilityGraph.svelte

@@ -20,7 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const dispatch = createEventDispatcher<SearchEventMap>();
 
-    let histogramData = null as HistogramData | null;
+    let histogramData: HistogramData | null = null;
     let tableData: TableDatum[] = [];
 
     $: if (sourceData) {

ts/routes/graphs/ReviewsGraph.svelte

@@ -25,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let graphData: GraphData | null = null;
 
     const bounds = defaultGraphBounds();
-    let svg = null as HTMLElement | SVGElement | null;
+    let svg: HTMLElement | SVGElement | null = null;
     let graphRange: GraphRange = GraphRange.Month;
     let showTime = false;
 
@@ -33,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         graphData = gatherData(sourceData);
     }
 
-    let tableData: TableDatum[] = [] as any;
+    let tableData: TableDatum[] = [];
     $: if (graphData) {
         tableData = renderReviews(
             svg as SVGElement,

ts/routes/graphs/StabilityGraph.svelte

@@ -28,7 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher<SearchEventMap>();
 
     let intervalData: IntervalGraphData | null = null;
-    let histogramData = null as HistogramData | null;
+    let histogramData: HistogramData | null = null;
     let tableData: TableDatum[] = [];
     let range = IntervalRange.Percentile95;
 

ts/routes/graphs/Tooltip.svelte

@@ -10,7 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let y: number = 0;
     export let show = true;
 
-    let container = null as unknown as HTMLDivElement;
+    let container: HTMLDivElement | null = null;
 
     let adjustedX: number, adjustedY: number;
 

ts/routes/graphs/WithGraphData.svelte

@@ -23,7 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         setGraphPreferences,
     );
 
-    let sourceData = null as null | GraphsResponse;
+    let sourceData: GraphsResponse | null = null;
     let loading = true;
     $: updateSourceData($search, $days);
 

ts/routes/graphs/buttons.ts

@@ -75,21 +75,21 @@ export function renderButtons(
                 buttonNum: idx + 1,
                 group: "learning",
                 count,
-            } as Datum;
+            } satisfies Datum;
         }),
         ...sourceData.young.map((count: number, idx: number) => {
             return {
                 buttonNum: idx + 1,
                 group: "young",
                 count,
-            } as Datum;
+            } satisfies Datum;
         }),
         ...sourceData.mature.map((count: number, idx: number) => {
             return {
                 buttonNum: idx + 1,
                 group: "mature",
                 count,
-            } as Datum;
+            } satisfies Datum;
         }),
     ];
 

ts/routes/graphs/calendar.ts

@@ -98,7 +98,7 @@ export function renderCalendar(
         const weekNumber = sourceData.timeFunction.count(timeYear(date), date);
         const weekDay = timeDay.count(sourceData.timeFunction(date), date);
         const yearDay = timeDay.count(timeYear(date), date);
-        dayMap.set(yearDay, { day, count, weekNumber, weekDay, date } as DayDatum);
+        dayMap.set(yearDay, { day, count, weekNumber, weekDay, date });
     }
 
     if (!maxCount) {
@@ -132,7 +132,7 @@ export function renderCalendar(
                 weekNumber,
                 weekDay,
                 date,
-            } as DayDatum);
+            });
         }
     }
     const data = Array.from(dayMap.values());

ts/routes/graphs/card-counts.ts

@@ -130,9 +130,8 @@ export function renderCards(
             count: count[1],
             show: count[2],
             query: count[3],
-            idx,
             total: n,
-        } as SummedDatum;
+        } satisfies SummedDatum;
     });
     // ensuring a non-zero range makes the percentages not break
     // in an empty collection
@@ -181,7 +180,7 @@ export function renderCards(
                 percent: `${percent}%`,
                 colour: barColours[idx],
                 query: d.query,
-            } as TableDatum)
+            } satisfies TableDatum)
             : [];
     });
 

ts/routes/graphs/histogram-graph.ts

@@ -46,7 +46,7 @@ export function histogramGraph(
         setDataAvailable(svg, true);
     }
 
-    const binValue = data.binValue ?? ((bin: any): number => bin.length as number);
+    const binValue = data.binValue ?? ((bin: Bin<any, any>) => bin.length);
 
     const x = data.scale.range([bounds.marginLeft, bounds.width - bounds.marginRight]);
     svg.select<SVGGElement>(".x-ticks")

ts/routes/graphs/index.ts

@@ -20,7 +20,7 @@ export async function setupGraphs(
     {
         search = "deck:current",
         days = 365,
-        controller = null as typeof SvelteComponent<any> | null,
+        controller = null satisfies typeof SvelteComponent<any> | null,
     } = {},
 ): Promise<GraphsPage> {
     checkNightMode();

ts/routes/graphs/reviews.ts

@@ -291,7 +291,7 @@ export function renderReviews(
             .attr("direction", "ltr");
 
         svg.select("path.cumulative-overlay")
-            .datum(areaData as any)
+            .datum(areaData)
             .attr(
                 "d",
                 area()

ts/routes/image-occlusion/review.ts

@@ -53,9 +53,9 @@ async function setupImageOcclusion(setupOptions?: SetupImageOcclusionOptions): P
 /** We must make sure the image has loaded before we can access its dimensions.
  * This can happen if not preloading, or if preloading takes too long. */
 async function waitForImage(): Promise<void> {
-    const image = document.querySelector(
+    const image = document.querySelector<HTMLImageElement>(
         "#image-occlusion-container img",
-    ) as HTMLImageElement | null;
+    );
     if (!image) {
         // error will be handled later
         return;
@@ -116,9 +116,9 @@ function calculateContainerSize(
 let oneTimeSetupDone = false;
 
 async function setupImageOcclusionInner(setupOptions?: SetupImageOcclusionOptions): Promise<void> {
-    const canvas = document.querySelector(
+    const canvas = document.querySelector<HTMLCanvasElement>(
         "#image-occlusion-canvas",
-    ) as HTMLCanvasElement | null;
+    );
     if (canvas == null) {
         return;
     }
@@ -126,9 +126,9 @@ async function setupImageOcclusionInner(setupOptions?: SetupImageOcclusionOption
     const container = document.getElementById(
         "image-occlusion-container",
     ) as HTMLDivElement;
-    const image = document.querySelector(
+    const image = document.querySelector<HTMLImageElement>(
         "#image-occlusion-container img",
-    ) as HTMLImageElement;
+    );
     if (image == null) {
         await setupI18n({
             modules: [

ts/routes/image-occlusion/shapes/to-cloze.ts

@@ -60,7 +60,7 @@ export function exportShapesToClozeDeletions(occludeInactive: boolean): {
             if (shapeOrShapes instanceof Text) {
                 ordinal = 0;
             } else if (missingOrdinals.length > 0) {
-                ordinal = missingOrdinals.shift() as number;
+                ordinal = missingOrdinals.shift()!;
             } else {
                 ordinal = nextOrdinal;
                 nextOrdinal++;
@@ -96,7 +96,7 @@ export function baseShapesFromFabric(): ShapeOrShapes[] {
             && (activeObject.size() > 1)
         ? activeObject
         : null;
-    const objects = canvas.getObjects() as fabric.Object[];
+    const objects = canvas.getObjects();
     const boundingBox = getBoundingBoxSize();
     // filter transparent rectangles
     return objects

ts/routes/image-occlusion/tools/tool-zoom.ts

@@ -66,7 +66,7 @@ const zoomResetInner = (canvas: fabric.Canvas): void => {
 };
 
 export const enablePinchZoom = (canvas: fabric.Canvas) => {
-    const hammer = new Hammer(upperCanvasElement(canvas)) as any;
+    const hammer = new Hammer(upperCanvasElement(canvas));
     hammer.get("pinch").set({ enable: true });
     hammer.on("pinchin pinchout", ev => {
         currentScale = Math.min(Math.max(minScale, ev.scale * zoomScale), maxScale);

ts/routes/import-anki-package/ImportAnkiPackagePage.svelte

@@ -51,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             url: HelpPage.PackageImporting.updating,
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
     let modal: Modal;
     let carousel: Carousel;
 

ts/routes/import-csv/FileOptions.svelte

@@ -35,7 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             url: HelpPage.TextImporting.html,
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
     let modal: Modal;
     let carousel: Carousel;
 

ts/routes/import-csv/ImportOptions.svelte

@@ -56,7 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             url: HelpPage.TextImporting.root,
         },
     };
-    const helpSections = Object.values(settings) as HelpItem[];
+    const helpSections: HelpItem[] = Object.values(settings);
     let modal: Modal;
     let carousel: Carousel;
 

ts/routes/import-page/[...path]/+page.svelte

@@ -10,9 +10,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let data: PageData;
 
-    const importer = {
+    const importer: Importer = {
         doImport: () => importJsonFile({ val: data.path }, {}),
-    } as Importer;
+    };
 </script>
 
 <ImportPage path={data.path} {importer} />