Improve types, migrate another file

src/components/MapMaplibreGlFeaturePropertyPopup.tsx

@@ -1,9 +1,18 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Block from './Block'
 import FieldString from './FieldString'
 
-function displayValue(value) {
+export type InspectFeature = {
+  id: string
+  properties: {[key:string]: any}
+  layer: {[key:string]: any}
+  geometry: GeoJSON.Geometry
+  sourceLayer: string
+  inspectModeCounter?: number
+  counter?: number
+}
+
+function displayValue(value: string | number | Date | object) {
   if (typeof value === 'undefined' || value === null) return value;
   if (value instanceof Date) return value.toLocaleString();
   if (typeof value === 'object' ||
@@ -12,7 +21,7 @@ function displayValue(value) {
   return value;
 }
 
-function renderProperties(feature) {
+function renderProperties(feature: InspectFeature) {
   return Object.keys(feature.properties).map(propertyName => {
     const property = feature.properties[propertyName]
     return <Block key={propertyName} label={propertyName}>
@@ -21,13 +30,13 @@ function renderProperties(feature) {
   })
 }
 
-function renderFeatureId(feature) {
+function renderFeatureId(feature: InspectFeature) {
   return <Block key={"feature-id"} label={"feature_id"}>
     <FieldString value={displayValue(feature.id)} style={{backgroundColor: 'transparent'}} />
   </Block>
   }
 
-function renderFeature(feature, idx) {
+function renderFeature(feature: InspectFeature, idx: number) {
   return <div key={`${feature.sourceLayer}-${idx}`}>
     <div className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div>
     <Block key={"property-type"} label={"$type"}>
@@ -38,8 +47,8 @@ function renderFeature(feature, idx) {
   </div>
 }
 
-function removeDuplicatedFeatures(features) {
+function removeDuplicatedFeatures(features: InspectFeature[]) {
-  let uniqueFeatures = [];
+  let uniqueFeatures: InspectFeature[] = [];
 
   features.forEach(feature => {
     const featureIndex = uniqueFeatures.findIndex(feature2 => {
@@ -50,8 +59,8 @@ function removeDuplicatedFeatures(features) {
     if(featureIndex === -1) {
       uniqueFeatures.push(feature)
     } else {
-      if(uniqueFeatures[featureIndex].hasOwnProperty('inspectModeCounter')) {
+      if('inspectModeCounter' in uniqueFeatures[featureIndex]) {
-        uniqueFeatures[featureIndex].inspectModeCounter++
+        uniqueFeatures[featureIndex].inspectModeCounter!++
       } else {
         uniqueFeatures[featureIndex].inspectModeCounter = 2
       }
@@ -61,11 +70,11 @@ function removeDuplicatedFeatures(features) {
   return uniqueFeatures
 }
 
-class FeaturePropertyPopup extends React.Component {
+type FeaturePropertyPopupProps = {
-  static propTypes = {
+  features: InspectFeature[]
-    features: PropTypes.array
+};
-  }
 
+class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
   render() {
     const features = removeDuplicatedFeatures(this.props.features)
     return <div className="maputnik-feature-property-popup">

src/components/MapMaplibreGlLayerPopup.tsx

@@ -1,18 +1,19 @@
 import React from 'react'
 import IconLayer from './IconLayer'
+import type {InspectFeature} from './MapMaplibreGlFeaturePropertyPopup';
 
-function groupFeaturesBySourceLayer(features: any[]) {
+function groupFeaturesBySourceLayer(features: InspectFeature[]) {
-  const sources = {} as any
+  const sources: {[key: string]: InspectFeature[]} = {}
 
-  let returnedFeatures = {} as any;
+  let returnedFeatures: {[key: string]: number} = {}
 
   features.forEach(feature => {
     if(returnedFeatures.hasOwnProperty(feature.layer.id)) {
       returnedFeatures[feature.layer.id]++
 
-      const featureObject = sources[feature.layer['source-layer']].find((f: any) => f.layer.id === feature.layer.id)
+      const featureObject = sources[feature.layer['source-layer']].find((f: InspectFeature) => f.layer.id === feature.layer.id)
 
-      featureObject.counter = returnedFeatures[feature.layer.id]
+      featureObject!.counter = returnedFeatures[feature.layer.id]
     } else {
       sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || []
       sources[feature.layer['source-layer']].push(feature)
@@ -25,13 +26,13 @@ function groupFeaturesBySourceLayer(features: any[]) {
 }
 
 type FeatureLayerPopupProps = {
-  onLayerSelect(...args: unknown[]): unknown
+  onLayerSelect(layerId: string): unknown
-  features: any[]
+  features: InspectFeature[]
   zoom?: number
 };
 
 class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
-  _getFeatureColor(feature: any, _zoom?: number) {
+  _getFeatureColor(feature: InspectFeature, _zoom?: number) {
     // Guard because openlayers won't have this
     if (!feature.layer.paint) {
       return;
@@ -75,7 +76,7 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
     const sources = groupFeaturesBySourceLayer(this.props.features)
 
     const items = Object.keys(sources).map(vectorLayerId => {
-      const layers = sources[vectorLayerId].map((feature: any, idx: number) => {
+      const layers = sources[vectorLayerId].map((feature: InspectFeature, idx: number) => {
         const featureColor = this._getFeatureColor(feature, this.props.zoom);
 
         return <div