upgrade all deps; work around broken type assertions (?)

.gitignore

@@ -1,2 +1,3 @@
 build/*
 node_modules/*
+.vscode/*

package.json

@@ -7,14 +7,14 @@
   "dependencies": {
     "react": "17.0.0",
     "react-dom": "17.0.0",
-    "react-scripts": "3.3.0",
+    "react-scripts": "^4.0.3",
     "suncalc": "1.8.0"
   },
   "devDependencies": {
-    "@types/react": "16.9.19",
-    "@types/react-dom": "16.9.5",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "@types/suncalc": "1.8.0",
-    "typescript": "3.7.5"
+    "typescript": "^4.2.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.tsx

@@ -41,8 +41,8 @@ let saveLocToStorage = (loc: Location) => {
 }
 let loadLocFromStorage = (): Location | null => {
     let val = localStorage.getItem('seasonal-hours-location');
-    if (val === undefined) { return null; }
-    return JSON.parse(val as any) as Location;
+    if (val === undefined || val === null) { return null; }
+    return JSON.parse(val);
 }
 
 let requestLocFromBrowser = async (): Promise<Location | null> => {

src/dial.tsx

@@ -26,7 +26,8 @@ interface DialProps {
 }
 export let Dial = (props: DialProps) => {
     let { cx, cy, radMin, radMax, ticks, textScale, textAlign } = props;
-    if (textScale === undefined) { textScale = 0.6; }
+    let textScale2 = 0.6;
+    if (textScale !== undefined) { textScale2 = textScale; }
 
     let tickAngleWidth = 360 / ticks.length;
     let textRotExtra =
@@ -49,7 +50,7 @@ export let Dial = (props: DialProps) => {
                     <text x={cx} y={cy - (radMin + radMax)/2}
                         textAnchor={textAlign === 'left' ? 'left' : 'middle'}
                         dominantBaseline="mathematical"
-                        fontSize={(radMax - radMin) * (textScale as number)}
+                        fontSize={(radMax - radMin) * textScale2}
                         style={{
                             stroke: 'none',
                             fill: tick.cText || cInk,

tsconfig.json

@@ -9,7 +9,7 @@
       "dom",
       "es2017"
     ],
-    "jsx": "react",
+    "jsx": "react-jsx",
     "target": "es5",
     "allowJs": true,
     "skipLibCheck": true,
@@ -19,6 +19,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true
   }
 }