From b2f1d4965537777d170182852423db5a33ba56b2 Mon Sep 17 00:00:00 2001 From: Henri Nieminen <118905702+henrinie-nc@users.noreply.github.com> Date: Fri, 2 Aug 2024 13:30:55 +0300 Subject: [PATCH] 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 --- package.json | 3 ++- src/areaNote/components/AreaNotesEditMap.tsx | 15 ++++++++---- src/util/map.ts | 3 ++- tsconfig.json | 24 +++++++++++++++---- types/leaflet-measure-path.d.ts | 15 ++++++++++++ types/leaflet-zoombox.d.ts | 25 ++++++++++++++++++++ types/proj4leaflet.d.ts | 9 +++++++ yarn.lock | 20 ++++++++++++---- 8 files changed, 98 insertions(+), 16 deletions(-) create mode 100644 types/leaflet-measure-path.d.ts create mode 100644 types/leaflet-zoombox.d.ts create mode 100644 types/proj4leaflet.d.ts diff --git a/package.json b/package.json index b887dab2e..468a6cdc8 100644 --- 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 index 69a3c46d9..53d91a236 100644 --- a/src/areaNote/components/AreaNotesEditMap.tsx +++ b/src/areaNote/components/AreaNotesEditMap.tsx @@ -71,11 +71,16 @@ class AreaNotesEditMap extends Component { 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 index 8f6e0dc7d..37b72768b 100644 --- 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): Record => { +export const getBoundsFromCoordinates = (coordinates: Array): LatLngBounds => { const L = require('leaflet'); const lats = [], diff --git a/tsconfig.json b/tsconfig.json index b11b9ee71..1c552c0ac 100644 --- 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 new file mode 100644 index 000000000..86e3481e8 --- /dev/null +++ b/types/leaflet-measure-path.d.ts @@ -0,0 +1,15 @@ +import * as L from 'leaflet'; + +declare module 'leaflet' { + interface Polyline

extends L.Polyline

{ + showMeasurements(): void; + } + + interface Circle

extends L.Circle

{ + showMeasurements(): void; + } + + interface Polygon

extends L.Polygon

{ + showMeasurements(): void; + } +} \ No newline at end of file diff --git a/types/leaflet-zoombox.d.ts b/types/leaflet-zoombox.d.ts new file mode 100644 index 000000000..92dc8f1cf --- /dev/null +++ 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); + + onAdd(map: L.Map): HTMLElement; + activate(): void; + deactivate(): void; + } + } + + function control(options?: Partial): Control.ZoomBox; +} \ No newline at end of file diff --git a/types/proj4leaflet.d.ts b/types/proj4leaflet.d.ts new file mode 100644 index 000000000..198c5123f --- /dev/null +++ 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); + } + } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 8eebad738..3318440b7 100644 --- 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/leaflet@1.5.23": + 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"