improve typing for handlerRectangles

src/element/handlerRectangles.ts

@@ -1,6 +1,8 @@
 import { SceneState } from "../scene/types";
 import { ExcalidrawElement } from "./types";
 
+type Sides = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
+
 export function handlerRectangles(
   element: ExcalidrawElement,
   sceneState: SceneState
@@ -12,7 +14,7 @@ export function handlerRectangles(
 
   const margin = 4;
   const minimumSize = 40;
-  const handlers: { [handler: string]: number[] } = {};
+  const handlers = {} as { [T in Sides]: number[] };
 
   const marginX = element.width < 0 ? 8 : -8;
   const marginY = element.height < 0 ? 8 : -8;
@@ -78,7 +80,7 @@ export function handlerRectangles(
     return {
       nw: handlers.nw,
       se: handlers.se
-    };
+    } as typeof handlers;
   }
 
   return handlers;

src/element/resizeTest.ts

@@ -3,18 +3,20 @@ import { SceneState } from "../scene/types";
 
 import { handlerRectangles } from "./handlerRectangles";
 
+type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>;
+
 export function resizeTest(
   element: ExcalidrawElement,
   x: number,
   y: number,
   sceneState: SceneState
-): string | false {
+): HandlerRectanglesRet | false {
   if (element.type === "text") return false;
 
   const handlers = handlerRectangles(element, sceneState);
 
   const filter = Object.keys(handlers).filter(key => {
-    const handler = handlers[key];
+    const handler = handlers[key as HandlerRectanglesRet]!;
 
     return (
       x + sceneState.scrollX >= handler[0] &&
@@ -25,7 +27,7 @@ export function resizeTest(
   });
 
   if (filter.length > 0) {
-    return filter[0];
+    return filter[0] as HandlerRectanglesRet;
   }
 
   return false;

src/index.tsx

@@ -638,7 +638,7 @@ class App extends React.Component<{}, AppState> {
               1,
               100
             );
-            let resizeHandle: string | false = false;
+            let resizeHandle: ReturnType<typeof resizeTest> = false;
             let isDraggingElements = false;
             let isResizingElements = false;
             if (this.state.elementType === "selection") {