Add type checking to husky pre commit

.husky/pre-commit

@@ -2,4 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 yarn lint-staged
-
+yarn typecheck

package.json

@@ -17,7 +17,8 @@
     "start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
     "test": "jest --passWithNoTests",
     "gql-codegen": "graphql-codegen --config codegen.yml && yarn lint:fix",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "typecheck": "tsc --project tsconfig.json --noEmit --skipLibCheck"
   },
   "author": {
     "name": "ExpressLRS Configurator Contributors",

src/@types/bluejay-rtttl-parse.d.ts

@@ -0,0 +1 @@
+declare module 'bluejay-rtttl-parse';

src/@types/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const content: any;
+  export default content;
+}

src/ui/components/BuildResponse/index.tsx

@@ -23,7 +23,7 @@ interface BuildResponseProps {
 }
 
 const BuildResponse: FunctionComponent<BuildResponseProps> = memo(
-  ({ response, firmwareVersionData }) => {
+  ({ response }) => {
     const { t } = useTranslation();
 
     const toTitle = (errorType: BuildFirmwareErrorType | undefined): string => {

src/ui/components/Loader/index.tsx

@@ -16,8 +16,9 @@ interface LoaderProps {
 }
 
 const Loader: FunctionComponent<LoaderProps> = ({ loading, sx = {} }) => {
+  const sxStyle = { ...styles.root, ...sx };
   return loading ? (
-    <Box sx={{ ...styles.root, ...sx }}>
+    <Box sx={sxStyle}>
       <CircularProgress />
     </Box>
   ) : null;

src/ui/components/SerialConnectionForm/index.tsx

@@ -25,7 +25,7 @@ const styles: Record<string, SxProps<Theme>> = {
 interface SerialConnectionFormProps {
   serialDevice: string | null;
   baudRate: number;
-  onConnect: (serialDevice: string | null, baudRate: number) => void;
+  onConnect: (serialDevice: string, baudRate: number) => void;
 }
 
 const SerialConnectionForm: FunctionComponent<SerialConnectionFormProps> = (

src/ui/components/ShowAfterTimeout/index.tsx

@@ -3,7 +3,7 @@ import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
 interface ShowAfterTimeoutProps {
   timeout: number;
   active: boolean;
-  children?: React.ReactNode;
+  children?: React.ReactElement;
 }
 
 const ShowAfterTimeout: FunctionComponent<ShowAfterTimeoutProps> = ({
@@ -32,7 +32,7 @@ const ShowAfterTimeout: FunctionComponent<ShowAfterTimeoutProps> = ({
       }
     };
   }, [active, timeout]);
-  return visible ? props.children : null;
+  return visible && props.children ? props.children : null;
 };
 
 export default ShowAfterTimeout;

src/ui/components/WifiDeviceNotification/index.tsx

@@ -18,36 +18,40 @@ const WifiDeviceNotification: FunctionComponent<WifiDeviceNotificationProps> = (
   const { appStatus } = useAppState();
   const { t } = useTranslation();
 
-  return appStatus === AppStatus.Interactive
-    ? newNetworkDevices.map((dnsDevice) => {
-        const handleClose = () => {
-          removeDeviceFromNewList(dnsDevice.name);
-        };
+  const result =
+    appStatus === AppStatus.Interactive
+      ? newNetworkDevices.map((dnsDevice) => {
+          const handleClose = () => {
+            removeDeviceFromNewList(dnsDevice.name);
+          };
 
-        return (
-          <Snackbar
-            key={dnsDevice.name}
-            open
-            autoHideDuration={6000}
-            onClose={handleClose}
-          >
-            <Alert onClose={handleClose} severity="info">
-              {t('WifiDeviceNotification.NewDevice')} {dnsDevice.name} (
-              {dnsDevice.ip})
-              <Button
-                size="small"
-                onClick={() => {
-                  onDeviceChange(dnsDevice);
-                  removeDeviceFromNewList(dnsDevice.name);
-                }}
-              >
-                {t('WifiDeviceNotification.Select')}
-              </Button>
-            </Alert>
-          </Snackbar>
-        );
-      })
-    : null;
+          return (
+            <Snackbar
+              key={dnsDevice.name}
+              open
+              autoHideDuration={6000}
+              onClose={handleClose}
+            >
+              <Alert onClose={handleClose} severity="info">
+                {t('WifiDeviceNotification.NewDevice')} {dnsDevice.name} (
+                {dnsDevice.ip})
+                <Button
+                  size="small"
+                  onClick={() => {
+                    onDeviceChange(dnsDevice);
+                    removeDeviceFromNewList(dnsDevice.name);
+                  }}
+                >
+                  {t('WifiDeviceNotification.Select')}
+                </Button>
+              </Alert>
+            </Snackbar>
+          );
+        })
+      : null;
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{result}</>;
 };
 
 export default WifiDeviceNotification;

src/ui/views/ConfiguratorView/index.tsx

@@ -1160,20 +1160,22 @@ const ConfiguratorView: FunctionComponent<ConfiguratorViewProps> = (props) => {
                   }
                   active={!buildInProgress}
                 >
-                  <Box sx={styles.buildNotification}>
-                    <BuildResponse
-                      response={response?.buildFlashFirmware}
-                      firmwareVersionData={firmwareVersionData}
-                    />
-                  </Box>
-                  {response?.buildFlashFirmware?.success && hasLuaScript && (
-                    <Alert sx={styles.buildNotification} severity="info">
-                      <AlertTitle>
-                        {t('ConfiguratorView.UpdateLuaScript')}
-                      </AlertTitle>
-                      {t('ConfiguratorView.UpdateLuaScriptOnRadio')}
-                    </Alert>
-                  )}
+                  <>
+                    <Box sx={styles.buildNotification}>
+                      <BuildResponse
+                        response={response?.buildFlashFirmware}
+                        firmwareVersionData={firmwareVersionData}
+                      />
+                    </Box>
+                    {response?.buildFlashFirmware?.success && hasLuaScript && (
+                      <Alert sx={styles.buildNotification} severity="info">
+                        <AlertTitle>
+                          {t('ConfiguratorView.UpdateLuaScript')}
+                        </AlertTitle>
+                        {t('ConfiguratorView.UpdateLuaScriptOnRadio')}
+                      </Alert>
+                    )}
+                  </>
                 </ShowAfterTimeout>
                 {response?.buildFlashFirmware?.success &&
                   currentJobType === BuildJobType.Build && (

src/ui/views/SerialMonitorView/index.tsx

@@ -77,7 +77,7 @@ const SerialMonitorView: FunctionComponent = () => {
     connectToSerialDeviceMutation,
     { loading: connectInProgress, data: response, error: connectError },
   ] = useConnectToSerialDeviceMutation();
-  const onConnect = (newSerialDevice: string | null, newBaudRate: number) => {
+  const onConnect = (newSerialDevice: string, newBaudRate: number) => {
     setSerialDevice(newSerialDevice);
     setBaudRate(newBaudRate);
     setLogs('');

tsconfig.json

@@ -4,10 +4,7 @@
     "emitDecoratorMetadata": true,
     "target": "ES2018",
     "module": "CommonJS",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "declaration": true,
     "declarationMap": true,
     "noEmit": true,
@@ -27,10 +24,8 @@
     "resolveJsonModule": true,
     "allowJs": true
   },
-  "typeRoots": [
-    "node_modules/@types",
-    "src/@types"
-  ],
+  "typeRoots": ["node_modules/@types", "src/@types"],
+  "include": ["src/**/*"],
   "exclude": [
     "test",
     "release",