fix: typescript errors

src/App.vue

@@ -52,9 +52,9 @@ function openImage() {
     }
     const reader = new FileReader();
     reader.onload = () => {
-        image.value.src = reader.result as string;
+        srcData.value = reader.result as string;
     };
-    reader.readAsDataURL(input.value.files[0]);
+    reader.readAsDataURL(input.value.files[0] as Blob);
 }
 
 function imageOnLoad() {
@@ -67,7 +67,8 @@ function imageOnLoad() {
     setTimeout(draw);
 }
 
-function randomElement(items) {
+function randomElement<T>(items: T[]): T {
+    // @ts-expect-error: arbitrary type bullshit
     return items[Math.floor(Math.random() * items.length)];
 }
 
@@ -100,12 +101,12 @@ function newImage() {
 
 function download() {
     const link = document.createElement("a");
-    link.download = "coverify.png";
+    link.download = `coverify-${new Date().getTime()}.png`;
-    link.href = canvas.value.toDataURL();
+    link.href = canvas.value?.toDataURL() ?? "#";
     link.click();
 }
 
-function applyFilter(f: Filter, r: number, g: number, b: number) {
+function applyFilter(f: Filter, r: number, g: number, b: number): [number, number, number] {
     switch (f) {
         case Filter.Gray:
             const gray = 0.21 * r + 0.72 * g + 0.07 * b;
@@ -123,8 +124,11 @@ function applyFilter(f: Filter, r: number, g: number, b: number) {
 }
 
 function draw() {
-    const ctx = canvas.value?.getContext("2d");
+    if (!canvas.value) {
-    if (!ctx) {
+        return;
+    }
+    const ctx = canvas.value.getContext("2d");
+    if (!ctx || !image.value) {
         return;
     }
     canvas.value.width = targetSize.value;
@@ -145,9 +149,9 @@ function draw() {
     );
     const pixelData = imageData.data;
     for (let i = 0; i < pixelData.length; i += 4) {
-        const r1 = pixelData[i];
+        const r1 = (pixelData[i] as number);
-        const g1 = pixelData[i + 1];
+        const g1 = (pixelData[i + 1] as number);
-        const b1 = pixelData[i + 2];
+        const b1 = (pixelData[i + 2] as number);
 
         const [r2, g2, b2] = applyFilter(filter.value, r1, g1, b1);
 
@@ -159,7 +163,7 @@ function draw() {
 
     ctx.putImageData(imageData, 0, 0);
 
-    if (paPos.value !== PAPosition.None) {
+    if (paPos.value !== PAPosition.None && parentalAdvisory.value) {
         const paWidth = targetSize.value * paScale.value;
         const paHeight = paWidth * PA_RATIO;
         let padx = paMargin.value * targetSize.value;
@@ -200,7 +204,7 @@ onMounted(() => {
         <img
             ref="image"
             style="display: none"
-            :src="srcData"
+            :src="srcData ?? undefined"
             @load="imageOnLoad"
         />
         <img
@@ -244,6 +248,7 @@ onMounted(() => {
                     <col />
                     <col style="width: 10%" />
                 </colgroup>
+                <tbody>
                 <tr>
                     <td><label for="center-x">Center X:</label></td>
                     <td>
@@ -347,6 +352,7 @@ onMounted(() => {
                     </td>
                     <td>{{ (paMargin * 100).toFixed(0) }}%</td>
                 </tr>
+                </tbody>
             </table>
         </template>
         <br />

src/components/LucideIcon.vue

@@ -25,6 +25,7 @@ function kebab2camel(kebab: string): string {
         .join("");
 }
 
+// @ts-expect-error: cannot infer type of all exported data
 const icon = computed(() => icons[kebab2camel(props.name)]);
 </script>