feat: enable even more strict options

src/Button/DigitizeButton/DigitizeButton.tsx

@@ -32,6 +32,7 @@ import Logger from '@terrestris/base-util/dist/Logger';
 
 import { CSS_PREFIX } from '../../constants';
 import { ChangeEvent } from 'react';
+import RenderFeature from 'ol/render/Feature';
 
 interface DefaultProps {
   /**
@@ -556,14 +557,18 @@ class DigitizeButton extends React.Component<DigitizeButtonProps, DigitizeButton
    * @param feature The feature which is being styled.
    * @return The style to use.
    */
-  digitizeStyleFunction = (feature: OlFeature<OlGeometry>) => {
+  digitizeStyleFunction = (feature: OlFeature<OlGeometry>|RenderFeature) => {
     const {
       drawStyle,
     } = this.props;
 
+    if (feature instanceof RenderFeature) {
+      return;
+    }
+
     const geometry = feature.getGeometry();
     if (!geometry) {
-      return undefined;
+      return;
     }
 
     if (drawStyle) {
@@ -1088,7 +1093,7 @@ class DigitizeButton extends React.Component<DigitizeButtonProps, DigitizeButton
    * Turns visibility of modal off and removes last drawn feature from the
    * digitize layer.
    */
-  onModalLabelCancel = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  onModalLabelCancel = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
     const {
       onModalLabelCancel
     } = this.props;

src/Button/GeoLocationButton/GeoLocationButton.tsx

@@ -21,6 +21,7 @@ import { CSS_PREFIX } from '../../constants';
 
 import mapMarker from './geolocation-marker.png';
 import mapMarkerHeading from './geolocation-marker-heading.png';
+import RenderFeature from 'ol/render/Feature';
 
 interface OwnProps {
   /**
@@ -159,7 +160,7 @@ class GeoLocationButton extends React.Component<GeoLocationButtonProps> {
    * The styleFunction for the geoLocationLayer. Shows a marker with arrow when
    * heading is not 0.
    */
-  _styleFunction = (feature: OlFeature<OlGeometry>) => {
+  _styleFunction = (feature: OlFeature<OlGeometry>|RenderFeature) => {
     const heading = feature.get('heading');
     const src = heading !== 0 ? mapMarkerHeading : mapMarker;
     const rotation = heading !== 0 ? heading * Math.PI / 180 : 0;

src/Container/AddWmsPanel/AddWmsPanel.tsx

@@ -109,7 +109,7 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
       onSelectionChange(selectedWmsLayers);
     }
 
-    this.setState({selectedWmsLayers});
+    this.setState({ selectedWmsLayers });
   };
 
   /**
@@ -199,7 +199,7 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
           {...passThroughProps}
         >
           <div role="list" >
-            <Checkbox.Group onChange={this.onSelectedLayersChange}>
+            <Checkbox.Group onChange={value => this.onSelectedLayersChange(value.map(v => v as string))}>
               {wmsLayers.map((layer, idx) =>
                 <div role="listitem" key={idx}>
                   <AddWmsLayerEntry

src/Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.tsx

@@ -104,7 +104,7 @@ class CoordinateReferenceSystemCombo extends React.Component<CRSComboProps, CRSC
    * It logs the error to the console.
    *
    */
-  onFetchError(error: Error) {
+  onFetchError(error: any) {
     Logger.error('Error while requesting in CoordinateReferenceSystemCombo', error);
   }
 

src/Field/WfsSearchInput/WfsSearchInput.tsx

@@ -328,7 +328,7 @@ export class WfsSearchInput extends React.Component<WfsSearchInputProps, WfsSear
           });
           this.onFetchSuccess(await response.json());
         } catch (e) {
-          this.onFetchError(e.getMessage());
+          this.onFetchError(e);
         }
       });
     } else {
@@ -370,7 +370,7 @@ export class WfsSearchInput extends React.Component<WfsSearchInputProps, WfsSear
    *
    * @param error The errorstring.
    */
-  onFetchError(error: string) {
+  onFetchError(error: any) {
     const {
       onFetchError
     } = this.props;

src/Grid/AgFeatureGrid/AgFeatureGrid.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable testing-library/render-result-naming-convention */
 import * as React from 'react';
-import { ReactNode } from 'react';
+import { Key, ReactNode } from 'react';
 
 import OlStyle from 'ol/style/Style';
 import OlStyleFill from 'ol/style/Fill';
@@ -245,7 +245,7 @@ export class AgFeatureGrid extends React.Component<AgFeatureGridProps, AgFeature
    * The reference of this grid.
    * @private
    */
-  _ref: AgGridReact | null;
+  _ref: AgGridReact | null = null;
 
   /**
    * The className added to this component.
@@ -660,7 +660,7 @@ export class AgFeatureGrid extends React.Component<AgFeatureGridProps, AgFeature
    * @param key The row key to obtain the feature from.
    * @return The feature candidate.
    */
-  getFeatureFromRowKey = (key: string): OlFeature<OlGeometry> => {
+  getFeatureFromRowKey = (key: Key): OlFeature<OlGeometry> => {
     const {
       features,
       keyFunction
@@ -872,17 +872,21 @@ export class AgFeatureGrid extends React.Component<AgFeatureGridProps, AgFeature
       selectedRows
     } = this.state;
 
-    let selectedRowsAfter: any[];
+    let selectedRowsAfter: RowNode[];
     if (!grid || !grid.api) {
       selectedRowsAfter = evt.api.getSelectedRows();
     } else {
       selectedRowsAfter = grid.api.getSelectedRows();
     }
 
-    const deselectedRows = _differenceWith(selectedRows, selectedRowsAfter, (a: any , b: any) => a.key === b.key);
+    const deselectedRows = _differenceWith(selectedRows, selectedRowsAfter, (a: RowNode , b: RowNode) => a.key === b.key);
 
-    const selectedFeatures = selectedRowsAfter.map(row => this.getFeatureFromRowKey(row.key));
-    const deselectedFeatures = deselectedRows.map(row => this.getFeatureFromRowKey(row.key));
+    const selectedFeatures = selectedRowsAfter.flatMap(row => {
+      return row.key ? [this.getFeatureFromRowKey(row.key)] : [];
+    });
+    const deselectedFeatures = deselectedRows.flatMap(row => {
+      return row.key ? [this.getFeatureFromRowKey(row.key)] : [];
+    });
 
     // update state
     this.setState({

src/Grid/FeatureGrid/FeatureGrid.tsx

@@ -25,6 +25,8 @@ import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 import './FeatureGrid.less';
 import { ColumnProps, TableProps } from 'antd/lib/table';
 import _isNil from 'lodash/isNil';
+import { Key } from 'react';
+import RenderFeature from 'ol/render/Feature';
 
 interface OwnProps {
   /**
@@ -104,7 +106,7 @@ interface OwnProps {
 }
 
 interface FeatureGridState {
-  selectedRowKeys: string[];
+  selectedRowKeys: Key[];
 }
 
 export type FeatureGridProps = OwnProps & TableProps<any>;
@@ -402,7 +404,10 @@ export class FeatureGrid extends React.Component<FeatureGridProps, FeatureGridSt
       }
     });
 
-    selectedFeatures.forEach((feature: OlFeature<OlGeometry>) => {
+    selectedFeatures.forEach((feature: OlFeature<OlGeometry>|RenderFeature) => {
+      if (feature instanceof RenderFeature) {
+        return;
+      }
       const key = _kebabCase(this.props.keyFunction(feature));
       const sel = `.${this._rowClassName}.${this._rowKeyClassNamePrefix}${key}`;
       const el = document.querySelectorAll(sel)[0];
@@ -745,7 +750,7 @@ export class FeatureGrid extends React.Component<FeatureGridProps, FeatureGridSt
    *
    * @param selectedRowKeys The list of currently selected row keys.
    */
-  onSelectChange = (selectedRowKeys: string[]) => {
+  onSelectChange = (selectedRowKeys: Key[]) => {
     const {
       onRowSelectionChange
     } = this.props;

src/HigherOrderComponent/DropTargetMap/DropTargetMap.tsx

@@ -19,7 +19,7 @@ export function onDropAware(WrappedComponent: React.ComponentType<MapComponentPr
      * endings.
      * @param event The drop event.
      */
-    onDrop(event: DragEvent) {
+    onDrop(event: React.DragEvent<HTMLDivElement>) {
       const {
         map
       } = this.props;

src/LayerSwitcher/LayerSwitcher.tsx

@@ -55,7 +55,7 @@ export class LayerSwitcher extends React.Component<LayerSwitcherProps, LayerSwit
    */
   _map: OlMap | null = null;
 
-  _visibleLayerIndex: number;
+  _visibleLayerIndex: number = 0;
 
   _layerClones: Array<OlLayerTile<OlTileSource> | OlLayerGroup> = [];
 
@@ -121,7 +121,12 @@ export class LayerSwitcher extends React.Component<LayerSwitcherProps, LayerSwit
   cloneLayer (layer: OlLayerTile<OlTileSource> | OlLayerGroup): OlLayerTile<OlTileSource> | OlLayerGroup {
     if (layer instanceof OlLayerGroup) {
       return new OlLayerGroup({
-        layers: layer.getLayers().getArray().map(this.cloneLayer),
+        layers: layer.getLayers().getArray().map(l => {
+          if (!(l instanceof OlLayerTile) || !(l instanceof OlLayerGroup)) {
+            throw new Error('Layer of layergroup is of unclonable type')
+          }
+          return this.cloneLayer(l);
+        }),
         properties: {
           originalLayer: layer
         },

src/Legend/Legend.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SyntheticEvent } from 'react';
 
 import _isEqual from 'lodash/isEqual';
 
@@ -25,7 +26,7 @@ export interface BaseProps {
   /**
    * Optional method that should be called when the image retrieval errors
    */
-  onError?: (e: Error) => void;
+  onError?: (e: SyntheticEvent) => void;
   /**
    * Optional error message that should be displayed when image retrieval
    * errors. Will remove the browsers default broken image
@@ -120,7 +121,7 @@ export class Legend extends React.Component<LegendProps, LegendState> {
   /**
    * onError handler for the rendered img.
    */
-  onError(e: Error) {
+  onError(e: SyntheticEvent) {
     Logger.warn(`Image error for legend of "${this.props.layer.get('name')}".`);
     this.setState({
       legendError: true

src/Panel/Panel/Panel.tsx

@@ -150,7 +150,7 @@ export class Panel extends React.Component<PanelProps, PanelState> {
    *
    *
    */
-  _rnd: Rnd | null;
+  _rnd: Rnd | null = null;
 
   /**
    * Create the Panel.
@@ -239,7 +239,7 @@ export class Panel extends React.Component<PanelProps, PanelState> {
   onResize(
     evt: MouseEvent | TouchEvent,
     direction: ResizeDirection,
-    el: HTMLDivElement,
+    el: HTMLElement,
     delta: ResizableDelta,
     position: Position
   ) {
@@ -261,9 +261,9 @@ export class Panel extends React.Component<PanelProps, PanelState> {
    * @param el The element which gets resized.
    */
   onResizeStart(
-    evt: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
+    evt: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
     direction: ResizeDirection,
-    el: HTMLDivElement
+    el: HTMLElement
   ) {
     const { onResizeStart } = this.props;
     if (_isFunction(onResizeStart)) {
@@ -286,7 +286,7 @@ export class Panel extends React.Component<PanelProps, PanelState> {
   onResizeStop(
     evt: MouseEvent | TouchEvent,
     direction: ResizeDirection,
-    el: HTMLDivElement,
+    el: HTMLElement,
     delta: ResizableDelta,
     position: Position
   ) {

src/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel.tsx

@@ -26,8 +26,6 @@ import ToggleButton from '../../Button/ToggleButton/ToggleButton';
 
 import './TimeLayerSliderPanel.less';
 
-type timeRange = [moment.Moment, moment.Moment];
-
 export interface Tooltips {
   hours: string;
   days: string;
@@ -91,7 +89,7 @@ export class TimeLayerSliderPanel extends React.Component<TimeLayerSliderPanelPr
   };
 
   private _TimeLayerAwareSlider: any;
-  private _wmsTimeLayers: TimeLayerAwareConfig[];
+  private _wmsTimeLayers: TimeLayerAwareConfig[] = [];
   private _interval: number;
 
   /**
@@ -356,7 +354,7 @@ export class TimeLayerSliderPanel extends React.Component<TimeLayerSliderPanelPr
   /**
    *
    */
-  updateDataRange([startDate, endDate]: timeRange) {
+  updateDataRange([startDate, endDate]: [moment.Moment, moment.Moment]) {
     this.setState({
       startDate,
       endDate
@@ -437,7 +435,16 @@ export class TimeLayerSliderPanel extends React.Component<TimeLayerSliderPanelPr
             <RangePicker
               showTime={{ format: 'HH:mm' }}
               defaultValue={[startDate, endDate]}
-              onOk={this.updateDataRange}
+              onOk={range => {
+                if (!range) {
+                  return;
+                }
+                const [start, end] = range;
+                if (!start || !end) {
+                  return;
+                }
+                this.updateDataRange([start, end]);
+              }}
             />
           }
         >

src/Slider/MultiLayerSlider/MultiLayerSlider.tsx

@@ -5,6 +5,7 @@ import { SliderSingleProps } from 'antd/lib/slider';
 import { ArrayTwoOrMore } from '@terrestris/base-util/dist/types';
 
 import { CSS_PREFIX } from '../../constants';
+import _isNumber from 'lodash/isNumber';
 
 interface DefaultProps {
   /**
@@ -75,7 +76,10 @@ class MultiLayerSlider extends React.Component<MultiLayerSliderProps> {
    * @param value The slider value
    * @return The formatted tip value
    */
-  formatTip(value: number) {
+  formatTip(value?: number) {
+    if (!_isNumber(value)) {
+      return '';
+    }
     const {
       layers,
       nameProperty

src/Util/DigitizeUtil.ts

@@ -13,6 +13,7 @@ import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 import OlFeature from 'ol/Feature';
 import OlGeometry from 'ol/geom/Geometry';
 import Geometry from 'ol/geom/Geometry';
+import RenderFeature from 'ol/render/Feature';
 
 export class DigitizeUtil {
   /**
@@ -120,7 +121,7 @@ export class DigitizeUtil {
    * @param feature The feature which is being styled.
    * @return The style to use.
    */
-  static defaultDigitizeStyleFunction(feature: OlFeature<OlGeometry>): OlStyle | undefined {
+  static defaultDigitizeStyleFunction(feature: OlFeature<OlGeometry>|RenderFeature): OlStyle | undefined {
     const geom = feature.getGeometry();
 
     if (!geom) {
@@ -194,7 +195,7 @@ export class DigitizeUtil {
    * @param selectStrokeColor
    */
   static selectStyleFunction (selectFillColor: string, selectStrokeColor: string): OlStyleLike {
-    return (feature: OlFeature<OlGeometry>) => {
+    return (feature: OlFeature<OlGeometry>|RenderFeature) => {
       const text = feature.get('label') ?? '';
 
       return new OlStyleStyle({

tsconfig.json

@@ -10,16 +10,14 @@
     "lib": ["es7", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",
-    "noImplicitAny": true,
+    "strict": true,
     "noImplicitReturns": true,
-    "noImplicitThis": true,
     "noUnusedLocals": true,
     "outDir": "dist",
     "resolveJsonModule": true,
     "rootDir": "src",
     "skipLibCheck": true,
     "sourceMap": true,
-    "strictNullChecks": true,
     "suppressImplicitAnyIndexErrors": true,
     "target": "es5"
   },