Mvj 277 typing fixes (#507)

* add leaflet types, update typescript to 5.5.4 * add type declarations for leaflet "plugins", adjust tsconfig * fix leaflet typing issues
City-of-Helsinki · Aug 2, 2024 · b2f1d49 · b2f1d49
1 parent 9f164d0
commit b2f1d49
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@types/chai": "^4.3.16",
     "@types/history": "^5.0.0",
+    "@types/leaflet": "1.5.23",
     "@types/lodash": "^4.17.1",
     "@types/mocha": "^10.0.6",
     "@types/react": "^18.3.2",
@@ -126,7 +127,7 @@
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.4",
     "url": "^0.11.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.9.0",

diff --git a/src/areaNote/components/AreaNotesEditMap.tsx b/src/areaNote/components/AreaNotesEditMap.tsx
@@ -71,11 +71,16 @@ class AreaNotesEditMap extends Component<Props, State> {
 
       if (!isEmpty(geoJSON)) {
         const featuresGeoJSON = new L.GeoJSON(geoJSON);
-        featuresGeoJSON.eachLayer(layer => {
-          layer.options.color = SHAPE_COLOR;
-          layer.options.fillOpacity = SHAPE_FILL_OPACITY;
-          this.featureGroup?.leafletElement.addLayer(layer);
-          layer.showMeasurements();
+        featuresGeoJSON.eachLayer((layer) => {
+          if (layer instanceof L.Polyline || layer instanceof L.Polygon || layer instanceof L.Circle) {
+            layer.setStyle({
+              "color": SHAPE_COLOR,
+              "fillOpacity": SHAPE_FILL_OPACITY}
+            );
+            this.featureGroup?.leafletElement.addLayer(layer);
+            layer.showMeasurements();
+          }
+
         });
         this.setState({
           isValid: true

diff --git a/src/util/map.ts b/src/util/map.ts
@@ -1,4 +1,5 @@
 import isArray from "lodash/isArray";
+import type { LatLngBounds } from "leaflet";
 
 /**
  * Translate leaflet draw literals in Finnish
@@ -123,7 +124,7 @@ export const getBoundsFromBBox = (bbox: Array<Record<string, any>>): Record<stri
  */
 
 /* istanbul ignore next */
-export const getBoundsFromCoordinates = (coordinates: Array<any>): Record<string, any> => {
+export const getBoundsFromCoordinates = (coordinates: Array<any>): LatLngBounds => {
   const L = require('leaflet');
 
   const lats = [],

diff --git a/tsconfig.json b/tsconfig.json
@@ -26,12 +26,15 @@
 
     /* Modules */
     "module": "commonjs",                                /* Specify what module code is generated. */
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "rootDir": "./",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     "baseUrl": "./src",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    "typeRoots": [
+      "./node_modules/@types",
+      "./src/types"
+    ],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
@@ -45,7 +48,7 @@
 
     /* JavaScript Support */
     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
-    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    "checkJs": false,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
     /* Emit */
@@ -103,7 +106,18 @@
     "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
 
     /* Completeness */
-    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  }
+  },
+  "include": [
+    "src",
+    "types"
+  ],
+  "exclude": [
+    "defs",
+    "**/node_modules",
+    "**/.*/",
+    "dist",
+    "coverage"
+  ]
 }
diff --git a/types/leaflet-measure-path.d.ts b/types/leaflet-measure-path.d.ts
@@ -0,0 +1,15 @@
+import * as L from 'leaflet';
+
+declare module 'leaflet' {
+    interface Polyline<P = any> extends L.Polyline<P> {
+        showMeasurements(): void;
+    }
+
+    interface Circle<P = any> extends L.Circle<P> {
+        showMeasurements(): void;
+    }
+
+    interface Polygon<P = any> extends L.Polygon<P> {
+        showMeasurements(): void;
+    }
+}
diff --git a/types/leaflet-zoombox.d.ts b/types/leaflet-zoombox.d.ts
@@ -0,0 +1,25 @@
+import * as L from 'leaflet';
+
+declare module 'leaflet' {
+  namespace Control {
+    class ZoomBox extends L.Control {
+      includes: any;
+      options: {
+        position: L.ControlPosition;
+        addToZoomControl: boolean;
+        content: string;
+        className: string;
+        modal: boolean;
+        title: string;
+      };
+
+      constructor(options?: Partial<ZoomBox['options']>);
+
+      onAdd(map: L.Map): HTMLElement;
+      activate(): void;
+      deactivate(): void;
+    }
+  }
+
+  function control(options?: Partial<Control.ZoomBox['options']>): Control.ZoomBox;
+}
diff --git a/types/proj4leaflet.d.ts b/types/proj4leaflet.d.ts
@@ -0,0 +1,9 @@
+import * as L from 'leaflet';
+
+declare module 'leaflet' {
+    namespace Proj {
+        class CRS extends L.CRS {
+            constructor(code: string, proj4def: string, options?: any);
+          }
+    }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2445,6 +2445,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/geojson@*":
+  version "7946.0.14"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
+  integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
+
 "@types/glob@^7.1.1":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.2.tgz#06ca26521353a545d94a0adc74f38a59d232c987"
@@ -2487,6 +2492,13 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
   integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==
 
+"@types/[email protected]":
+  version "1.5.23"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.5.23.tgz#159823a8c86a50383f0c9d9b9dac2af01fa7603b"
+  integrity sha512-S/xpuwjZuwYMP+4ZzQ10PX0Jy+0XmwPeojtjqhbca9UXaINdoru91Qm/DUUXyh4qYm3CP6Vher06l/UcA9tUKQ==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/lodash@^4.17.1":
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.1.tgz#0fabfcf2f2127ef73b119d98452bd317c4a17eb8"
@@ -10314,10 +10326,10 @@ typescript-tuple@^2.2.1:
   dependencies:
     typescript-compare "^0.0.2"
 
-typescript@^5.4.5:
-  version "5.4.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
-  integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
+typescript@^5.5.4:
+  version "5.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
+  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
 
 ua-parser-js@^0.7.18:
   version "0.7.21"