diff --git a/src/components/Canvas.svelte b/src/components/Canvas.svelte
index 32fdbff..deba905 100644
--- a/src/components/Canvas.svelte
+++ b/src/components/Canvas.svelte
@@ -32,7 +32,7 @@
     }
   });
 
-  handle.on("change", ({ doc }) => {
+  handle.on("change", ({ doc }: { doc: AppDocument | undefined }) => {
     if (doc) {
       console.log("Document changed:", doc.shapes); // Debug log
       // it looks like Svelte is clever enough to make only the necessary DOM changes
@@ -85,12 +85,12 @@
       {#if shape.type === "circle"}
         <Circle
           {...shape}
-          handleDragStart={(e, shape) => handleDragStart(e, shape)}
+          handleDragStart={(e: MouseEvent, shape: Shape) => handleDragStart(e, shape)}
         />
       {:else if shape.type === "triangle"}
         <Triangle
           {...shape}
-          handleDragStart={(e, shape) => handleDragStart(e, shape)}
+          handleDragStart={(e: MouseEvent, shape: Shape) => handleDragStart(e, shape)}
         />
       {/if}
     {/each}
diff --git a/src/components/shapes/Triangle.svelte b/src/components/shapes/Triangle.svelte
index 8e7078e..f2838b8 100644
--- a/src/components/shapes/Triangle.svelte
+++ b/src/components/shapes/Triangle.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
-  const { id, coordinates, color, handleDragStart } = $props<{
-    id: string;
-    coordinates: [number, number, number, number, number, number];
-    color: string;
-    handleDragStart: (e: MouseEvent, shape: any) => void;
-  }>();
+  const { id, coordinates, color, handleDragStart } = $props();
 
   let points = $state('');
   $effect(() => {
     points = coordinates
-            .map(p => `${p.x},${p.y}`)
+            .map((p: { x: any; y: any; }) => `${p.x},${p.y}`)
             .join(" ");
   });