conversion to type script

public/caspar.ts

@@ -202,7 +202,10 @@ function applyStageOptions(options) {
   document.body.classList.toggle("transparent", options.transparent);
   document.documentElement.classList.toggle("transparent", options.transparent);
 
-  const stage = document.querySelector(".stage");
+  const stage = document.querySelector<HTMLElement>(".stage");
+  if (!stage) {
+    return;
+  }
   stage.classList.toggle("fit-cover", options.fit === "cover");
   stage.classList.toggle("fit-contain", options.fit !== "cover");
 }
@@ -242,7 +245,10 @@ function startAutoplayAssist(root, options) {
 }
 
 function renderEmbed(oembed, sourceUrl, options) {
-  const embed = document.querySelector(".embed");
+  const embed = document.querySelector<HTMLElement>(".embed");
+  if (!embed) {
+    return;
+  }
   const providerClass = `provider-${slugify(oembed.provider_name)}`;
   const embedWidth = Math.min(Number(oembed.width) || 500, 500);
   const embedHeight = Number(oembed.height);

public/collage.ts

@@ -1,8 +1,12 @@
-const dataElement = document.getElementById("collage-data");
-const stage = document.querySelector(".collage-stage");
-const track = document.querySelector(".collage-track");
+const dataElement = document.getElementById("collage-data") as HTMLScriptElement;
+const stage = document.querySelector<HTMLElement>(".collage-stage");
+const track = document.querySelector<HTMLElement>(".collage-track");
 const config = JSON.parse(dataElement.textContent);
 
+if (!stage || !track) {
+  throw new Error("Collage stage could not be initialized.");
+}
+
 let lastFrame = performance.now();
 let itemCursor = 0;
 const columns = [];
@@ -15,7 +19,7 @@ let trackTop = 0;
 let hydrationTimer;
 const cardObserver = new ResizeObserver((entries) => {
   for (const entry of entries) {
-    const card = entry.target;
+    const card = entry.target as HTMLElement;
     const column = cardColumns.get(card);
     const previousExtent = cardExtent(card);
 

public/globals.d.ts

@@ -0,0 +1,20 @@
+type ProviderWidgetRoot = Element | Document;
+
+interface Window {
+  update?: (payload: unknown) => void;
+  play?: () => void;
+  stop?: () => void;
+  twttr?: {
+    widgets?: {
+      load?: (root?: ProviderWidgetRoot) => void;
+    };
+  };
+  instgrm?: {
+    Embeds?: {
+      process?: () => void;
+    };
+  };
+  bluesky?: {
+    scan?: (root?: ProviderWidgetRoot) => void;
+  };
+}