Merge pull request TerriaJS#7050 from TerriaJS/react-18-part-2

React 18 upgrade prework

Author: tephenavies

.eslintrc

@@ -113,6 +113,7 @@
       "files": ["**/*.ts", "**/*.tsx"],
       "rules": {
         // @TODO: revise these rules
+        "@typescript-eslint/consistent-type-assertions": "error",
         "@typescript-eslint/no-unused-vars": [
           "warn",
           {

lib/Charts/ChartView.ts

@@ -16,11 +16,9 @@ export default class ChartView {
 
   @computed
   get chartableItems(): ChartableMixin.Instance[] {
-    return <any>(
-      this.terria.workbench.items.filter(
-        (item) => ChartableMixin.isMixedInto(item) && item.chartItems.length > 0
-      )
-    );
+    return this.terria.workbench.items.filter(
+      (item) => ChartableMixin.isMixedInto(item) && item.chartItems.length > 0
+    ) as any;
   }
 
   /**

lib/Core/instanceOf.ts

@@ -15,5 +15,5 @@ export default function instanceOf<T>(
   type: Class<T>,
   instance: any
 ): instance is T {
-  return instance instanceof <any>type;
+  return instance instanceof (type as any);
 }

lib/Core/markdownToHtml.ts

@@ -54,7 +54,7 @@ function markdownToHtml(
     // (typeof string === 'string').  So if this isn't a string primitive, call toString
     // on it in order to make it one.
     if (markdownString && typeof markdownString !== "string") {
-      stringToParse = (<any>markdownString).toString();
+      stringToParse = (markdownString as any).toString();
     }
     if (markdownOptions.injectTermsAsTooltips && markdownOptions.tooltipTerms) {
       stringToParse = injectTerms(stringToParse, markdownOptions.tooltipTerms);

lib/Map/Cesium/CesiumRenderLoopPauser.ts

@@ -308,14 +308,14 @@ export default class CesiumRenderLoopPauser {
 
     const cameraMovedInLastSecond = now - this._lastCameraMoveTime < 1000;
 
-    const surface = (<any>scene.globe)._surface;
+    const surface = (scene.globe as any)._surface;
     const terrainTilesWaiting =
       !surface._tileProvider ||
       surface._tileLoadQueueHigh.length > 0 ||
       surface._tileLoadQueueMedium.length > 0 ||
       surface._tileLoadQueueLow.length > 0 ||
       surface._debug.tilesWaitingForChildren > 0;
-    const tweens = (<any>scene).tweens;
+    const tweens = (scene as any).tweens;
 
     if (
       !cameraMovedInLastSecond &&

lib/Map/ImageryProvider/MapboxVectorTileImageryProvider.ts

@@ -184,35 +184,35 @@ export default class MapboxVectorTileImageryProvider
   get credit(): Credit {
     let credit = this._credit;
     if (credit === undefined) {
-      return <any>undefined;
+      return undefined as any;
     } else if (typeof credit === "string") {
       credit = new Credit(credit);
     }
     return credit;
   }
 
   get defaultAlpha(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultBrightness(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultContrast(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultGamma(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultHue(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultSaturation(): number {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get defaultMagnificationFilter(): any {
@@ -224,15 +224,15 @@ export default class MapboxVectorTileImageryProvider
   }
 
   get proxy(): DefaultProxy {
-    return <any>undefined;
+    return undefined as any;
   }
 
   get readyPromise(): Promise<boolean> {
     return Promise.resolve(true);
   }
 
   get tileDiscardPolicy(): TileDiscardPolicy {
-    return <any>undefined;
+    return undefined as any;
   }
 
   getTileCredits(_x: number, _y: number, _level: number): Credit[] {
@@ -325,7 +325,7 @@ export default class MapboxVectorTileImageryProvider
 
     let pos;
 
-    let extentFactor = canvas.width / (<any>layer).extent; // Vector tile works with extent [0, 4095], but canvas is only [0,255]
+    let extentFactor = canvas.width / (layer as any).extent; // Vector tile works with extent [0, 4095], but canvas is only [0,255]
 
     // Features
     for (let i = 0; i < layer.length; i++) {

lib/Map/ImageryProvider/ProtomapsImageryProvider.ts

@@ -282,17 +282,17 @@ export default class ProtomapsImageryProvider
   readonly defaultNightAlpha = undefined;
   readonly defaultDayAlpha = undefined;
   readonly hasAlphaChannel = true;
-  readonly defaultAlpha = <any>undefined;
-  readonly defaultBrightness = <any>undefined;
-  readonly defaultContrast = <any>undefined;
-  readonly defaultGamma = <any>undefined;
-  readonly defaultHue = <any>undefined;
-  readonly defaultSaturation = <any>undefined;
+  readonly defaultAlpha = undefined as any;
+  readonly defaultBrightness = undefined as any;
+  readonly defaultContrast = undefined as any;
+  readonly defaultGamma = undefined as any;
+  readonly defaultHue = undefined as any;
+  readonly defaultSaturation = undefined as any;
   readonly defaultMagnificationFilter = undefined as any;
   readonly defaultMinificationFilter = undefined as any;
-  readonly proxy = <any>undefined;
+  readonly proxy = undefined as any;
   readonly readyPromise = Promise.resolve(true);
-  readonly tileDiscardPolicy = <any>undefined;
+  readonly tileDiscardPolicy = undefined as any;
 
   // Protomaps properties
   /** Data object from constructor options (this is transformed into `source`) */

lib/Map/Leaflet/ImageryProviderLeafletGridLayer.ts

@@ -115,9 +115,10 @@ export default class ImageryProviderLeafletGridLayer extends L.GridLayer {
   }
 
   createTile(tilePoint: L.Coords, done: L.DoneCallback) {
-    const canvas = <HTMLCanvasElement>(
-      L.DomUtil.create("canvas", "leaflet-tile")
-    );
+    const canvas = L.DomUtil.create(
+      "canvas",
+      "leaflet-tile"
+    ) as HTMLCanvasElement;
     const size = this.getTileSize();
     canvas.width = size.x;
     canvas.height = size.y;

lib/Map/Leaflet/ImageryProviderLeafletTileLayer.ts

@@ -55,7 +55,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
     readonly imageryProvider: ImageryProvider,
     options: L.TileLayerOptions = {}
   ) {
-    super(<any>undefined, {
+    super(undefined as any, {
       ...options,
       updateInterval: defined((imageryProvider as any)._leafletUpdateInterval)
         ? (imageryProvider as any)._leafletUpdateInterval
@@ -147,7 +147,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
 
   createTile(coords: L.Coords, done: L.DoneCallback) {
     // Create a tile (Image) as normal.
-    const tile = <HTMLImageElement>super.createTile(coords, done);
+    const tile = super.createTile(coords, done) as HTMLImageElement;
 
     // By default, Leaflet handles tile load errors by setting the Image to the error URL and raising
     // an error event.  We want to first raise an error event that optionally returns a promise and
@@ -162,7 +162,12 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
           .catch((e: unknown) => {
             // The tile has failed irrecoverably, so invoke Leaflet's standard
             // tile error handler.
-            (<any>L.TileLayer).prototype._tileOnError.call(this, done, tile, e);
+            (L.TileLayer as any).prototype._tileOnError.call(
+              this,
+              done,
+              tile,
+              e
+            );
           });
         return;
       }
@@ -176,7 +181,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
     };
 
     L.DomEvent.on(tile, "error", (e) => {
-      const level = (<any>this)._getLevelFromZ(coords);
+      const level = (this as any)._getLevelFromZ(coords);
       const message = i18next.t("map.cesium.failedToObtain", {
         x: coords.x,
         y: coords.y,
@@ -190,7 +195,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
         coords.x,
         coords.y,
         level,
-        <any>e
+        e as any
         // TODO: bring terriajs-cesium retry logic to cesium
         //doRequest
       );
@@ -230,7 +235,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
         this._delayedUpdate = undefined;
       }
 
-      this._delayedUpdate = <any>setTimeout(() => {
+      this._delayedUpdate = setTimeout(() => {
         this._delayedUpdate = undefined;
 
         // If we're no longer attached to a map, do nothing.
@@ -272,19 +277,19 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
         }
 
         if (isDefined(this.imageryProvider.credit)) {
-          (<any>this._map).attributionControl.addAttribution(
+          (this._map as any).attributionControl.addAttribution(
             getCreditHtml(this.imageryProvider.credit)
           );
         }
 
         this._usable = true;
 
         this._update();
-      }, this._leafletUpdateInterval);
+      }, this._leafletUpdateInterval) as any;
     }
 
     if (this._usable) {
-      (<any>L.TileLayer).prototype._update.apply(this, args);
+      (L.TileLayer as any).prototype._update.apply(this, args);
 
       this._updateAttribution();
     }
@@ -348,9 +353,11 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
 
     for (let j = ne.y; j < sw.y; ++j) {
       for (let i = sw.x; i < ne.x; ++i) {
-        const credits = <Credit[]>(
-          this.imageryProvider.getTileCredits(i, j, zoom)
-        );
+        const credits = this.imageryProvider.getTileCredits(
+          i,
+          j,
+          zoom
+        ) as Credit[];
         if (!defined(credits)) {
           continue;
         }
@@ -365,7 +372,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
           nextCredits.push(credit);
 
           if (!credit._shownInLeafletLastUpdate) {
-            (<any>this._map).attributionControl.addAttribution(
+            (this._map as any).attributionControl.addAttribution(
               getCreditHtml(credit)
             );
           }
@@ -376,7 +383,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
     // Remove attributions that applied last update but not this one.
     for (let i = 0; i < this._previousCredits.length; ++i) {
       if (!this._previousCredits[i]._shownInLeaflet) {
-        (<any>this._map).attributionControl.removeAttribution(
+        (this._map as any).attributionControl.removeAttribution(
           getCreditHtml(this._previousCredits[i])
         );
         this._previousCredits[i]._shownInLeafletLastUpdate = false;
@@ -426,7 +433,7 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
       TerriaError.from(
         e,
         `An error ocurred while calling \`ImageryProvider#.pickFeatures\`. \`ImageryProvider.url = ${
-          (<any>this.imageryProvider).url
+          (this.imageryProvider as any).url
         }\``
       ).log();
     }
@@ -441,13 +448,13 @@ export default class ImageryProviderLeafletTileLayer extends L.TileLayer {
     for (let i = 0; i < this._previousCredits.length; ++i) {
       this._previousCredits[i]._shownInLeafletLastUpdate = false;
       this._previousCredits[i]._shownInLeaflet = false;
-      (<any>map).attributionControl.removeAttribution(
+      (map as any).attributionControl.removeAttribution(
         getCreditHtml(this._previousCredits[i])
       );
     }
 
     if (this._usable && defined(this.imageryProvider.credit)) {
-      (<any>map).attributionControl.removeAttribution(
+      (map as any).attributionControl.removeAttribution(
         getCreditHtml(this.imageryProvider.credit)
       );
     }

lib/Map/Leaflet/LeafletDataSourceDisplay.ts

@@ -133,7 +133,7 @@ export default class LeafletDataSourceDisplay {
     const dataSources = this._dataSourceCollection;
     const length = dataSources.length;
     for (let i = 0; i < length; i++) {
-      const dataSource = <LeafletDataSource>dataSources.get(i);
+      const dataSource = dataSources.get(i) as LeafletDataSource;
       if (isDefined(dataSource.update)) {
         result = dataSource.update(time) && result;
       }

lib/Map/Leaflet/LeafletSelectionIndicator.ts

@@ -49,7 +49,9 @@ export default class LeafletSelectionIndicator {
     });
 
     this._marker.addTo(this._leaflet.map);
-    this._selectionIndicatorDomElement = (<any>this._marker)._icon.children[0];
+    this._selectionIndicatorDomElement = (
+      this._marker as any
+    )._icon.children[0];
   }
 
   setLatLng(latlng: L.LatLng) {

lib/Map/Leaflet/LeafletVisualizer.ts

@@ -463,7 +463,7 @@ class LeafletGeomVisualizer {
       for (const prop in iconOptions) {
         if (
           isDefined(marker.options.icon) &&
-          iconOptions[prop] !== (<any>marker.options.icon.options)[prop]
+          iconOptions[prop] !== (marker.options.icon.options as any)[prop]
         ) {
           redrawIcon = true;
           break;
@@ -592,7 +592,7 @@ class LeafletGeomVisualizer {
       for (const prop in iconOptions) {
         if (
           isDefined(marker.options.icon) &&
-          iconOptions[prop] !== (<any>marker.options.icon.options)[prop]
+          iconOptions[prop] !== (marker.options.icon.options as any)[prop]
         ) {
           redrawLabel = true;
           break;
@@ -1025,7 +1025,9 @@ class LeafletGeomVisualizer {
       }
 
       for (const prop in polylineOptions) {
-        if ((<any>polylineOptions)[prop] !== (<any>polyline.options)[prop]) {
+        if (
+          (polylineOptions as any)[prop] !== (polyline.options as any)[prop]
+        ) {
           polyline.setStyle(polylineOptions);
           break;
         }

lib/ModelMixins/Cesium3dTilesMixin.ts

@@ -333,7 +333,7 @@ function Cesium3dTilesMixin<T extends AbstractConstructor<BaseType>>(Base: T) {
       const options: any = {};
       if (isDefined(this.options)) {
         Object.keys(OptionsTraits.traits).forEach((name) => {
-          options[name] = (<any>this.options)[name];
+          options[name] = (this.options as any)[name];
         });
       }
       return options;