chore: Update Typescript to 4.4.4 (#4188)

src/actions/actionClipboard.tsx

@@ -56,7 +56,7 @@ export const actionCopyAsSvg = register({
       return {
         commitToHistory: false,
       };
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       return {
         appState: {
@@ -106,7 +106,7 @@ export const actionCopyAsPng = register({
         },
         commitToHistory: false,
       };
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       return {
         appState: {

src/actions/actionExport.tsx

@@ -151,7 +151,7 @@ export const actionSaveToActiveFile = register({
             : null,
         },
       };
-    } catch (error) {
+    } catch (error: any) {
       if (error?.name !== "AbortError") {
         console.error(error);
       }
@@ -181,7 +181,7 @@ export const actionSaveFileToDisk = register({
         app.files,
       );
       return { commitToHistory: false, appState: { ...appState, fileHandle } };
-    } catch (error) {
+    } catch (error: any) {
       if (error?.name !== "AbortError") {
         console.error(error);
       }
@@ -219,7 +219,7 @@ export const actionLoadScene = register({
         files,
         commitToHistory: true,
       };
-    } catch (error) {
+    } catch (error: any) {
       if (error?.name === "AbortError") {
         return false;
       }

src/clipboard.ts

@@ -74,7 +74,7 @@ export const copyToClipboard = async (
   try {
     PREFER_APP_CLIPBOARD = false;
     await copyTextToSystemClipboard(json);
-  } catch (error) {
+  } catch (error: any) {
     PREFER_APP_CLIPBOARD = true;
     console.error(error);
   }
@@ -87,7 +87,7 @@ const getAppClipboard = (): Partial<ElementsClipboard> => {
 
   try {
     return JSON.parse(CLIPBOARD);
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
     return {};
   }
@@ -179,7 +179,7 @@ export const copyTextToSystemClipboard = async (text: string | null) => {
       // not focused
       await navigator.clipboard.writeText(text || "");
       copied = true;
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
     }
   }
@@ -219,7 +219,7 @@ const copyTextViaExecCommand = (text: string) => {
     textarea.setSelectionRange(0, textarea.value.length);
 
     success = document.execCommand("copy");
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
   }
 

src/components/App.tsx

@@ -621,7 +621,7 @@ class App extends React.Component<AppProps, AppState> {
     this.onBlur();
   };
 
-  private disableEvent: EventHandlerNonNull = (event) => {
+  private disableEvent: EventListener = (event) => {
     event.preventDefault();
   };
 
@@ -665,7 +665,7 @@ class App extends React.Component<AppProps, AppState> {
         }
         this.setState({ isLibraryOpen: true });
       }
-    } catch (error) {
+    } catch (error: any) {
       window.alert(t("alerts.errorLoadingLibrary"));
       console.error(error);
     } finally {
@@ -1294,8 +1294,8 @@ class App extends React.Component<AppProps, AppState> {
           if ((await this.props.onPaste(data, event)) === false) {
             return;
           }
-        } catch (e) {
-          console.error(e);
+        } catch (error: any) {
+          console.error(error);
         }
       }
       if (data.errorMessage) {
@@ -3705,7 +3705,7 @@ class App extends React.Component<AppProps, AppState> {
               this.actionManager.executeAction(actionFinalize);
             },
           );
-        } catch (error) {
+        } catch (error: any) {
           console.error(error);
           this.scene.replaceAllElements(
             this.scene
@@ -3974,7 +3974,7 @@ class App extends React.Component<AppProps, AppState> {
           await normalizeSVG(await imageFile.text()),
           imageFile.name,
         );
-      } catch (error) {
+      } catch (error: any) {
         console.warn(error);
         throw new Error(t("errors.svgImageInsertError"));
       }
@@ -4000,7 +4000,7 @@ class App extends React.Component<AppProps, AppState> {
           imageFile,
           DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
         );
-      } catch (error) {
+      } catch (error: any) {
         console.error("error trying to resing image file on insertion", error);
       }
 
@@ -4061,7 +4061,7 @@ class App extends React.Component<AppProps, AppState> {
             this.initializeImageDimensions(imageElement, true);
           }
           resolve(imageElement);
-        } catch (error) {
+        } catch (error: any) {
           console.error(error);
           reject(new Error(t("errors.imageInsertError")));
         } finally {
@@ -4092,7 +4092,7 @@ class App extends React.Component<AppProps, AppState> {
         imageElement,
         showCursorImagePreview,
       });
-    } catch (error) {
+    } catch (error: any) {
       mutateElement(imageElement, {
         isDeleted: true,
       });
@@ -4187,7 +4187,7 @@ class App extends React.Component<AppProps, AppState> {
           },
         );
       }
-    } catch (error) {
+    } catch (error: any) {
       if (error.name !== "AbortError") {
         console.error(error);
       }

src/components/ToolButton.tsx

@@ -61,7 +61,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
       try {
         setIsLoading(true);
         await ret;
-      } catch (error) {
+      } catch (error: any) {
         if (!(error instanceof AbortError)) {
           throw error;
         }

src/components/TopErrorBoundary.tsx

@@ -27,7 +27,7 @@ export class TopErrorBoundary extends React.Component<
     for (const [key, value] of Object.entries({ ...localStorage })) {
       try {
         _localStorage[key] = JSON.parse(value);
-      } catch (error) {
+      } catch (error: any) {
         _localStorage[key] = value;
       }
     }
@@ -60,7 +60,7 @@ export class TopErrorBoundary extends React.Component<
         )
       ).default;
       body = encodeURIComponent(templateStrFn(this.state.sentryEventId));
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
     }
 
@@ -86,7 +86,7 @@ export class TopErrorBoundary extends React.Component<
                 try {
                   localStorage.clear();
                   window.location.reload();
-                } catch (error) {
+                } catch (error: any) {
                   console.error(error);
                 }
               }}

src/data/blob.ts

@@ -24,7 +24,7 @@ const parseFileContents = async (blob: Blob | File) => {
       return await (
         await import(/* webpackChunkName: "image" */ "./image")
       ).decodePngMetadata(blob);
-    } catch (error) {
+    } catch (error: any) {
       if (error.message === "INVALID") {
         throw new DOMException(
           t("alerts.imageDoesNotContainScene"),
@@ -58,7 +58,7 @@ const parseFileContents = async (blob: Blob | File) => {
         ).decodeSvgMetadata({
           svg: contents,
         });
-      } catch (error) {
+      } catch (error: any) {
         if (error.message === "INVALID") {
           throw new DOMException(
             t("alerts.imageDoesNotContainScene"),
@@ -156,7 +156,7 @@ export const loadFromBlob = async (
     );
 
     return result;
-  } catch (error) {
+  } catch (error: any) {
     console.error(error.message);
     throw new Error(t("alerts.couldNotLoadInvalidFile"));
   }
@@ -187,7 +187,7 @@ export const canvasToBlob = async (
         }
         resolve(blob);
       });
-    } catch (error) {
+    } catch (error: any) {
       reject(error);
     }
   });
@@ -208,7 +208,7 @@ export const generateIdFromFile = async (file: File) => {
         // convert to hex string
         .map((byte) => byte.toString(16).padStart(2, "0"))
         .join("") as FileId;
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
     // length 40 to align with the HEX length of SHA-1 (which is 160 bit)
     id = nanoid(40) as FileId;

src/data/encode.ts

@@ -85,7 +85,7 @@ export const encode = async ({
   if (compress !== false) {
     try {
       deflated = await toByteString(deflate(text));
-    } catch (error) {
+    } catch (error: any) {
       console.error("encode: cannot deflate", error);
     }
   }
@@ -367,7 +367,7 @@ export const decompressData = async <T extends Record<string, any>>(
       /** data can be anything so the caller must decode it */
       data: contentsBuffer,
     };
-  } catch (error) {
+  } catch (error: any) {
     console.error(
       `Error during decompressing and decrypting the file.`,
       encodingMetadata,

src/data/image.ts

@@ -76,7 +76,7 @@ export const decodePngMetadata = async (blob: Blob) => {
         throw new Error("FAILED");
       }
       return await decode(encodedData);
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       throw new Error("FAILED");
     }
@@ -127,7 +127,7 @@ export const decodeSvgMetadata = async ({ svg }: { svg: string }) => {
         throw new Error("FAILED");
       }
       return await decode(encodedData);
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       throw new Error("FAILED");
     }

src/data/index.ts

@@ -93,7 +93,7 @@ export const exportCanvas = async (
   } else if (type === "clipboard") {
     try {
       await copyBlobToClipboardAsPng(blob);
-    } catch (error) {
+    } catch (error: any) {
       if (error.name === "CANVAS_POSSIBLY_TOO_BIG") {
         throw error;
       }

src/data/library.ts

@@ -90,7 +90,7 @@ class Library {
         this.libraryCache = JSON.parse(JSON.stringify(items));
 
         resolve(items);
-      } catch (error) {
+      } catch (error: any) {
         console.error(error);
         resolve([]);
       }
@@ -105,7 +105,7 @@ class Library {
       // immediately
       this.libraryCache = JSON.parse(serializedItems);
       await this.app.props.onLibraryChange?.(items);
-    } catch (error) {
+    } catch (error: any) {
       this.libraryCache = prevLibraryItems;
       throw error;
     }

src/element/image.ts

@@ -63,7 +63,7 @@ export const updateImageCache = async ({
               const image = await imagePromise;
 
               imageCache.set(fileId, { ...data, image });
-            } catch (error) {
+            } catch (error: any) {
               erroredFiles.set(fileId, true);
             }
           })(),

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -230,7 +230,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   ) => {
     try {
       await saveToFirebase(this.portal, syncableElements);
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
     }
   };
@@ -347,7 +347,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
             scrollToContent: true,
           });
         }
-      } catch (error) {
+      } catch (error: any) {
         // log the error and move on. other peers will sync us the scene.
         console.error(error);
       }

src/excalidraw-app/collab/Portal.tsx

@@ -95,7 +95,7 @@ class Portal {
         elements: this.collab.excalidrawAPI.getSceneElementsIncludingDeleted(),
         files: this.collab.excalidrawAPI.getFiles(),
       });
-    } catch (error) {
+    } catch (error: any) {
       if (error.name !== "AbortError") {
         this.collab.excalidrawAPI.updateScene({
           appState: {

src/excalidraw-app/collab/RoomDialog.tsx

@@ -53,7 +53,7 @@ const RoomDialog = ({
   const copyRoomLink = async () => {
     try {
       await copyTextToSystemClipboard(activeRoomLink);
-    } catch (error) {
+    } catch (error: any) {
       setErrorMessage(error.message);
     }
     if (roomLinkInput.current) {
@@ -68,7 +68,7 @@ const RoomDialog = ({
         text: t("roomDialog.shareTitle"),
         url: activeRoomLink,
       });
-    } catch (error) {
+    } catch (error: any) {
       // Just ignore.
     }
   };

src/excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -93,7 +93,7 @@ export const ExportToExcalidrawPlus: React.FC<{
         onClick={async () => {
           try {
             await exportToExcalidrawPlus(elements, appState, files);
-          } catch (error) {
+          } catch (error: any) {
             console.error(error);
             if (error.name !== "AbortError") {
               onError(new Error(t("exportDialog.excalidrawplus_exportError")));

src/excalidraw-app/data/firebase.ts

@@ -28,7 +28,7 @@ const _loadFirebase = async () => {
   if (!isFirebaseInitialized) {
     try {
       firebase.initializeApp(FIREBASE_CONFIG);
-    } catch (error) {
+    } catch (error: any) {
       // trying initialize again throws. Usually this is harmless, and happens
       // mainly in dev (HMR)
       if (error.code === "app/duplicate-app") {
@@ -172,7 +172,7 @@ export const saveFilesToFirebase = async ({
             },
           );
         savedFiles.set(id, true);
-      } catch (error) {
+      } catch (error: any) {
         erroredFiles.set(id, true);
       }
     }),
@@ -296,7 +296,7 @@ export const loadFilesFromFirebase = async (
         } else {
           erroredFiles.set(id, true);
         }
-      } catch (error) {
+      } catch (error: any) {
         erroredFiles.set(id, true);
         console.error(error);
       }

src/excalidraw-app/data/index.ts

@@ -122,7 +122,7 @@ export const decryptAESGEM = async (
       new Uint8Array(decrypted),
     );
     return JSON.parse(decodedData);
-  } catch (error) {
+  } catch (error: any) {
     window.alert(t("alerts.decryptFailed"));
     console.error(error);
   }
@@ -198,7 +198,7 @@ const importFromBackend = async (
         const iv = buffer.slice(0, IV_LENGTH_BYTES);
         const encrypted = buffer.slice(IV_LENGTH_BYTES, buffer.byteLength);
         decrypted = await decryptImported(iv, encrypted, privateKey);
-      } catch (error) {
+      } catch (error: any) {
         // Fixed IV (old format, backward compatibility)
         const fixedIv = new Uint8Array(IV_LENGTH_BYTES);
         decrypted = await decryptImported(fixedIv, buffer, privateKey);
@@ -218,7 +218,7 @@ const importFromBackend = async (
       elements: data.elements || null,
       appState: data.appState || null,
     };
-  } catch (error) {
+  } catch (error: any) {
     window.alert(t("alerts.importBackendFailed"));
     console.error(error);
     return {};
@@ -333,7 +333,7 @@ export const exportToBackend = async (
     } else {
       window.alert(t("alerts.couldNotCreateShareableLink"));
     }
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
     window.alert(t("alerts.couldNotCreateShareableLink"));
   }

src/excalidraw-app/data/localStorage.ts

@@ -20,7 +20,7 @@ export const saveUsernameToLocalStorage = (username: string) => {
       STORAGE_KEYS.LOCAL_STORAGE_COLLAB,
       JSON.stringify({ username }),
     );
-  } catch (error) {
+  } catch (error: any) {
     // Unable to access window.localStorage
     console.error(error);
   }
@@ -32,7 +32,7 @@ export const importUsernameFromLocalStorage = (): string | null => {
     if (data) {
       return JSON.parse(data).username;
     }
-  } catch (error) {
+  } catch (error: any) {
     // Unable to access localStorage
     console.error(error);
   }
@@ -53,7 +53,7 @@ export const saveToLocalStorage = (
       STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
       JSON.stringify(clearAppStateForLocalStorage(appState)),
     );
-  } catch (error) {
+  } catch (error: any) {
     // Unable to access window.localStorage
     console.error(error);
   }
@@ -66,7 +66,7 @@ export const importFromLocalStorage = () => {
   try {
     savedElements = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS);
     savedState = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_APP_STATE);
-  } catch (error) {
+  } catch (error: any) {
     // Unable to access localStorage
     console.error(error);
   }
@@ -75,7 +75,7 @@ export const importFromLocalStorage = () => {
   if (savedElements) {
     try {
       elements = clearElementsForLocalStorage(JSON.parse(savedElements));
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       // Do nothing because elements array is already empty
     }
@@ -90,7 +90,7 @@ export const importFromLocalStorage = () => {
           JSON.parse(savedState) as Partial<AppState>,
         ),
       };
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       // Do nothing because appState is already null
     }
@@ -103,7 +103,7 @@ export const getElementsStorageSize = () => {
     const elements = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS);
     const elementsSize = elements?.length || 0;
     return elementsSize;
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
     return 0;
   }
@@ -122,7 +122,7 @@ export const getTotalStorageSize = () => {
     const librarySize = library?.length || 0;
 
     return appStateSize + collabSize + librarySize + getElementsStorageSize();
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
     return 0;
   }

src/excalidraw-app/index.tsx

@@ -109,7 +109,7 @@ const localFileStorage = new FileManager({
         try {
           await set(id, fileData, filesStore);
           savedFiles.set(id, true);
-        } catch (error) {
+        } catch (error: any) {
           console.error(error);
           erroredFiles.set(id, true);
         }
@@ -228,7 +228,7 @@ const initializeScene = async (opts: {
       ) {
         return { scene: data, isExternalScene };
       }
-    } catch (error) {
+    } catch (error: any) {
       return {
         scene: {
           appState: {
@@ -377,8 +377,8 @@ const ExcalidrawWrapper = () => {
           JSON.parse(
             localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY) as string,
           ) || [];
-      } catch (e) {
-        console.error(e);
+      } catch (error: any) {
+        console.error(error);
       }
     };
 
@@ -508,7 +508,7 @@ const ExcalidrawWrapper = () => {
           },
           files,
         );
-      } catch (error) {
+      } catch (error: any) {
         if (error.name !== "AbortError") {
           const { width, height } = canvas;
           console.error(error, { width, height });

src/packages/excalidraw/package.json

@@ -63,7 +63,7 @@
     "sass-loader": "12.3.0",
     "terser-webpack-plugin": "5.2.4",
     "ts-loader": "9.2.6",
-    "typescript": "4.3.5",
+    "typescript": "4.4.4",
     "webpack": "5.61.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.9.1"

src/packages/excalidraw/yarn.lock

@@ -2615,10 +2615,10 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-typescript@4.3.5:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
-  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+typescript@4.4.4:
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
+  integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"

src/renderer/renderScene.ts

@@ -274,7 +274,7 @@ export const renderScene = (
   visibleElements.forEach((element) => {
     try {
       renderElement(element, rc, context, renderOptimizations, sceneState);
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
     }
   });
@@ -298,7 +298,7 @@ export const renderScene = (
         renderOptimizations,
         sceneState,
       );
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
     }
   }
@@ -822,7 +822,7 @@ export const renderSceneToSvg = (
           element.x + offsetX,
           element.y + offsetY,
         );
-      } catch (error) {
+      } catch (error: any) {
         console.error(error);
       }
     }

src/scene/export.ts

@@ -109,8 +109,8 @@ export const exportToSvg = async (
       ).encodeSvgMetadata({
         text: serializeAsJSON(elements, appState, files || {}, "local"),
       });
-    } catch (err) {
-      console.error(err);
+    } catch (error: any) {
+      console.error(error);
     }
   }
   const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);

src/tests/helpers/api.ts

@@ -197,7 +197,7 @@ export class API {
           resolve(reader.result as string);
         };
         reader.readAsText(blob);
-      } catch (error) {
+      } catch (error: any) {
         reject(error);
       }
     });

src/tests/reconciliation.test.ts

@@ -98,7 +98,7 @@ const test = <U extends `${string}:${"L" | "R"}`>(
           ),
         ),
       ).deep.equal(cleanElements(remoteReconciled), "local re-reconciliation");
-    } catch (error) {
+    } catch (error: any) {
       console.error("local original", __local);
       console.error("remote reconciled", __remote);
       throw error;