Typescript

src/ml/gridSize/GridSizeModel.ts

@@ -9,8 +9,7 @@ class GridSizeModel extends Model {
   // Store model as static to prevent extra network requests
   static model: LayersModel;
   // Load tensorflow dynamically
-
+  static tf: any;
-  static tf;
   constructor() {
     super(config as ModelJSON, { "group1-shard1of1.bin": weights });
   }

src/modals/AddPartyMemberModal.tsx

@@ -2,15 +2,19 @@ import { Box, Label, Text } from "theme-ui";
 
 import Modal from "../components/Modal";
 
+import { RequestCloseEventHandler } from "../types/Events";
+
+type AddPartyMemberModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  gameId: string;
+};
+
 function AddPartyMemberModal({
   isOpen,
   onRequestClose,
   gameId,
-}: {
+}: AddPartyMemberModalProps) {
-  isOpen: boolean;
-  onRequestClose;
-  gameId: string;
-}) {
   return (
     <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
       <Box>

src/modals/ChangeNicknameModal.tsx

@@ -3,12 +3,14 @@ import { Box, Input, Button, Label, Flex } from "theme-ui";
 
 import Modal from "../components/Modal";
 
+import { RequestCloseEventHandler } from "../types/Events";
+
 type ChangeNicknameModalProps = {
   isOpen: boolean;
-  onRequestClose;
+  onRequestClose: RequestCloseEventHandler;
-  onChangeSubmit;
+  onChangeSubmit: React.FormEventHandler<HTMLDivElement>;
   nickname: string;
-  onChange;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
 };
 
 function ChangeNicknameModal({

src/modals/EditMapModal.tsx

@@ -101,11 +101,13 @@ function EditMapModal({
     }
   }
 
-  const selectedMapWithChanges = map && {
+  const selectedMapWithChanges =
-    ...map,
+    map &&
-    ...mapSettingChanges,
+    ({
-  };
+      ...map,
-  const selectedMapStateWithChanges = mapState && {
+      ...mapSettingChanges,
+    } as Map);
+  const selectedMapStateWithChanges: MapState = mapState && {
     ...mapState,
     ...mapStateSettingChanges,
   };

src/modals/ImportExportModal.tsx

@@ -22,6 +22,7 @@ import { MapState } from "../types/MapState";
 import { Token } from "../types/Token";
 import { Group } from "../types/Group";
 import { RequestCloseEventHandler } from "../types/Events";
+import { Asset } from "../types/Asset";
 
 const importDBName = "OwlbearRodeoImportDB";
 
@@ -46,7 +47,7 @@ function ImportExportModal({
   const [error, setError] = useState<Error>();
 
   const backgroundTaskRunningRef = useRef(false);
-  const fileInputRef = useRef();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const [showImportSelector, setShowImportSelector] = useState(false);
   const [showExportSelector, setShowExportSelector] = useState(false);
@@ -115,7 +116,7 @@ function ImportExportModal({
     }
     // Set file input to null to allow adding the same data 2 times in a row
     if (fileInputRef.current) {
-      fileInputRef.current.value = null;
+      fileInputRef.current.value = "";
     }
   }
 
@@ -124,7 +125,7 @@ function ImportExportModal({
   }
 
   useEffect(() => {
-    function handleBeforeUnload(event) {
+    function handleBeforeUnload(event: BeforeUnloadEvent) {
       if (backgroundTaskRunningRef.current) {
         event.returnValue =
           "Database is still processing, are you sure you want to leave?";
@@ -257,7 +258,7 @@ function ImportExportModal({
       const assetsToAdd = await importDB
         .table("assets")
         .bulkGet(Object.keys(newAssetIds));
-      let newAssets = [];
+      let newAssets: Asset[] = [];
       for (let asset of assetsToAdd) {
         if (asset) {
           newAssets.push({
@@ -271,7 +272,7 @@ function ImportExportModal({
       }
 
       // Add map groups with new ids
-      let newMapGroups = [];
+      let newMapGroups: Group[] = [];
       if (checkedMapGroups.length > 0) {
         for (let group of checkedMapGroups) {
           if (group.type === "item") {
@@ -290,7 +291,7 @@ function ImportExportModal({
       }
 
       // Add token groups with new ids
-      let newTokenGroups = [];
+      let newTokenGroups: Group[] = [];
       if (checkedTokenGroups.length > 0) {
         for (let group of checkedTokenGroups) {
           if (group.type === "item") {

src/modals/SelectMapModal.tsx

@@ -81,7 +81,7 @@ function SelectMapModal({
    * Image Upload
    */
 
-  const fileInputRef = useRef();
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [isLoading, setIsLoading] = useState(false);
 
   const [isLargeImageWarningModalOpen, setShowLargeImageWarning] =
@@ -120,7 +120,7 @@ function SelectMapModal({
   function clearFileInput() {
     // Set file input to null to allow adding the same image 2 times in a row
     if (fileInputRef.current) {
-      fileInputRef.current.value = null;
+      fileInputRef.current.value = "";
     }
   }
 

src/modals/SelectTokensModal.tsx

@@ -76,7 +76,7 @@ function SelectTokensModal({
    * Image Upload
    */
 
-  const fileInputRef = useRef();
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [isLoading, setIsLoading] = useState(false);
 
   const [isLargeImageWarningModalOpen, setShowLargeImageWarning] =
@@ -89,11 +89,6 @@ function SelectTokensModal({
       await navigator.storage.persist();
     }
 
-    // TODO: handle null files
-    if (files === null) {
-      return;
-    }
-
     let tokenFiles = [];
     for (let file of files) {
       if (file.size > 5e7) {
@@ -120,7 +115,7 @@ function SelectTokensModal({
   function clearFileInput() {
     // Set file input to null to allow adding the same image 2 times in a row
     if (fileInputRef.current) {
-      fileInputRef.current.value = null;
+      fileInputRef.current.value = "";
     }
   }
 

src/modals/SettingsModal.tsx

@@ -25,13 +25,12 @@ import ImportExportModal from "./ImportExportModal";
 import { MapState } from "../types/MapState";
 import { RequestCloseEventHandler } from "../types/Events";
 
-function SettingsModal({
+type SettingsModalProps = {
-  isOpen,
-  onRequestClose,
-}: {
   isOpen: boolean;
   onRequestClose: RequestCloseEventHandler;
-}) {
+};
+
+function SettingsModal({ isOpen, onRequestClose }: SettingsModalProps) {
   const { database, databaseStatus } = useDatabase();
   const userId = useUserId();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);

src/modals/StartModal.tsx

@@ -11,13 +11,12 @@ import Modal from "../components/Modal";
 
 import { RequestCloseEventHandler } from "../types/Events";
 
-function StartModal({
+type StartModalProps = {
-  isOpen,
-  onRequestClose,
-}: {
   isOpen: boolean;
   onRequestClose: RequestCloseEventHandler;
-}) {
+};
+
+function StartModal({ isOpen, onRequestClose }: StartModalProps) {
   let history = useHistory();
   const { password, setPassword } = useAuth();
 
@@ -38,7 +37,7 @@ function StartModal({
     history.push(`/game/${shortid.generate()}`);
   }
 
-  const inputRef = useRef();
+  const inputRef = useRef<HTMLInputElement>(null);
   function focusInput() {
     inputRef.current && inputRef.current.focus();
   }

src/modals/StartTimerModal.tsx

@@ -28,7 +28,7 @@ function StartTimerModal({
   onTimerStop,
   timer,
 }: StartTimerProps) {
-  const inputRef = useRef();
+  const inputRef = useRef<HTMLInputElement>(null);
   function focusInput() {
     inputRef.current && inputRef.current.focus();
   }