Whittle down TS errors to nearly 0!

a-b-street · Jan 20, 2024 · 2ea2a61 · 2ea2a61
1 parent 4f16a63
commit 2ea2a61
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 33 deletions.
diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import turfBbox from "@turf/bbox";
   import { MapModel } from "backend";
-  import type { FeatureCollection } from "geojson";
-  import type { LngLat, Map } from "maplibre-gl";
+  import type { Map } from "maplibre-gl";
   import { MapLibre } from "svelte-maplibre";
   import { kindToColor } from "./colors";
   import { Layout, Legend } from "./common";
@@ -31,12 +30,17 @@
   function zoomToFit() {
     if (map && $model) {
       // TODO wasteful
-      let bbox = turfBbox(JSON.parse($model.render()));
+      let bbox = turfBbox(JSON.parse($model.render())) as [
+        number,
+        number,
+        number,
+        number
+      ];
       map.fitBounds(bbox, { animate: false });
     }
   }
 
-  function gotModel(_m: MapModel) {
+  function gotModel(_m: MapModel | null) {
     if (!$model) {
       return;
     }

diff --git a/web/src/Directions.svelte b/web/src/Directions.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-  import type { Feature, FeatureCollection } from "geojson";
+  import type { Feature } from "geojson";
+  import { notNull } from "./common";
+  import type { RouteGJ } from "./stores";
 
-  export let route_gj: FeatureCollection;
+  export let route_gj: RouteGJ;
 
-  function levelChanges(gj: FeatureCollection) {
+  function levelChanges(gj: RouteGJ) {
     let count = 0;
     // No windows(2)?
     for (let i = 0; i < gj.features.length - 1; i++) {
@@ -37,6 +39,8 @@
 <p>{levelChanges(route_gj)} changes in level</p>
 <ol>
   {#each route_gj.features as f}
-    <li><a href={f.properties.way} target="_blank">{@html step(f)}</a></li>
+    <li>
+      <a href={notNull(f.properties).way} target="_blank">{@html step(f)}</a>
+    </li>
   {/each}
 </ol>
diff --git a/web/src/MapLoader.svelte b/web/src/MapLoader.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import init, { MapModel } from "backend";
-  import type { Map } from "maplibre-gl";
   import { onMount } from "svelte";
   import { Loading, OverpassSelector } from "./common";
   import { map, model } from "./stores";

diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import turfBbox from "@turf/bbox";
-  import type { FeatureCollection } from "geojson";
-  import type { LngLat, Map, MapMouseEvent } from "maplibre-gl";
+  import type { MapMouseEvent } from "maplibre-gl";
   import { onDestroy, onMount } from "svelte";
   import {
     GeoJSON,
@@ -11,42 +10,42 @@
     Popup,
   } from "svelte-maplibre";
   import { kindToColor } from "./colors";
-  import { constructMatchExpression, PropertiesTable } from "./common";
+  import { constructMatchExpression, notNull, PropertiesTable } from "./common";
   import Directions from "./Directions.svelte";
   import SplitComponent from "./SplitComponent.svelte";
-  import { map, model } from "./stores";
+  import { map, model, type RouteGJ } from "./stores";
 
   // TODO Use filter expressions?
   export let showSeverances: boolean;
   export let opacity: number;
 
   // TODO Maybe need to do this when model changes
-  let bbox = turfBbox(JSON.parse($model.render()));
-  let route_a: LngLat = {
+  let bbox = turfBbox(JSON.parse($model!.render()));
+  let route_a = {
     lng: lerp(0.4, bbox[0], bbox[2]),
     lat: lerp(0.4, bbox[1], bbox[3]),
   };
-  let route_b: LngLat = {
+  let route_b = {
     lng: lerp(0.6, bbox[0], bbox[2]),
     lat: lerp(0.6, bbox[1], bbox[3]),
   };
 
   // TODO or empty
-  let route_gj: FeatureCollection | null = null;
+  let route_gj: RouteGJ | null = null;
   let route_err = "";
 
   $: if (route_a && route_b) {
     try {
       route_gj = JSON.parse(
-        $model.compareRoute({
+        $model!.compareRoute({
           x1: route_a.lng,
           y1: route_a.lat,
           x2: route_b.lng,
           y2: route_b.lat,
         })
       );
       route_err = "";
-    } catch (err) {
+    } catch (err: any) {
       route_gj = null;
       route_err = err.toString();
     }
@@ -78,7 +77,7 @@
     {/if}
   </div>
   <div slot="map">
-    <GeoJSON data={JSON.parse($model.render())} generateId>
+    <GeoJSON data={JSON.parse(notNull($model).render())} generateId>
       <LineLayer
         id="network"
         paint={{
@@ -100,11 +99,11 @@
         }}
         manageHoverState
         on:click={(e) =>
-          window.open(e.detail.features[0].properties.way, "_blank")}
+          window.open(notNull(e.detail.features[0].properties).way, "_blank")}
         hoverCursor="pointer"
       >
         <Popup openOn="hover" let:data>
-          <PropertiesTable properties={data.properties} />
+          <PropertiesTable properties={notNull(data).properties} />
         </Popup>
       </LineLayer>
     </GeoJSON>

diff --git a/web/src/ScoreMode.svelte b/web/src/ScoreMode.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { MapModel } from "backend";
-  import type { FeatureCollection } from "geojson";
-  import type { Map, MapMouseEvent } from "maplibre-gl";
+  import type { Feature, FeatureCollection, LineString } from "geojson";
+  import type { MapMouseEvent } from "maplibre-gl";
   import { onDestroy, onMount } from "svelte";
   import {
     GeoJSON,
@@ -13,6 +12,7 @@
   import {
     constructMatchExpression,
     makeColorRamp,
+    notNull,
     SequentialLegend,
   } from "./common";
   import SplitComponent from "./SplitComponent.svelte";
@@ -27,9 +27,10 @@
 
   function showRoute(e: CustomEvent<LayerClickInfo>) {
     try {
-      let linestring = e.detail.features[0].geometry.coordinates;
+      let linestring = (e.detail.features[0] as Feature<LineString>).geometry
+        .coordinates;
       route_gj = JSON.parse(
-        $model.compareRoute({
+        $model!.compareRoute({
           x1: linestring[0][0],
           y1: linestring[0][1],
           x2: linestring[1][0],
@@ -50,9 +51,11 @@
   });
   function onClick(e: MapMouseEvent) {
     // If we click off a severance line, clear things
-    for (let f of $map.queryRenderedFeatures(e.point, {
-      layers: ["scores"],
-    })) {
+    if (
+      $map!.queryRenderedFeatures(e.point, {
+        layers: ["scores"],
+      }).length > 0
+    ) {
       return;
     }
     route_gj = null;
@@ -64,7 +67,7 @@
     <SequentialLegend {colorScale} {limits} />
   </div>
   <div slot="map">
-    <GeoJSON data={JSON.parse($model.render())}>
+    <GeoJSON data={JSON.parse(notNull($model).render())}>
       <LineLayer
         id="network"
         paint={{
@@ -86,7 +89,7 @@
         }}
       />
     </GeoJSON>
-    <GeoJSON data={JSON.parse($model.makeHeatmap())}>
+    <GeoJSON data={JSON.parse(notNull($model).makeHeatmap())}>
       <LineLayer
         id="scores"
         paint={{
@@ -97,7 +100,7 @@
       >
         <Popup openOn="hover" let:data>
           <span style="font-size: 26px"
-            >{data.properties.score.toFixed(1)}x</span
+            >{notNull(data).properties.score.toFixed(1)}x</span
           >
         </Popup>
       </LineLayer>

diff --git a/web/src/stores.ts b/web/src/stores.ts
@@ -1,4 +1,5 @@
 import { MapModel } from "backend";
+import type { FeatureCollection } from "geojson";
 import type { Map } from "maplibre-gl";
 import { writable, type Writable } from "svelte/store";
 
@@ -10,3 +11,8 @@ export type Mode = "score" | "route";
 export let mode: Writable<Mode> = writable("score");
 export let model: Writable<MapModel | null> = writable(null);
 export let map: Writable<Map | null> = writable(null);
+
+export interface RouteGJ extends FeatureCollection {
+  direct_length: number;
+  route_length: number;
+}