fix typescript errors and add typescript:check to Github CI

.github/workflows/on-push.yml

@@ -24,6 +24,9 @@ jobs:
       - name: Lint
         run: yarn lint
 
+      - name: Typescript check
+        run: yarn typescript:check
+
       - name: Test
         run: yarn unittest
 

javascript/components/HeatmapLayer.tsx

@@ -12,7 +12,7 @@ const MapLibreGL = NativeModules.MLNModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMLNHeatmapLayer';
 
-interface HeatmapLayerProps extends BaseProps, BaseLayerProps {
+export interface HeatmapLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */

javascript/components/ShapeSource.tsx

@@ -157,7 +157,7 @@ export interface ShapeSourceRef {
  * The shape may be a url or a GeoJSON object
  */
 const ShapeSource = memo(
-  React.forwardRef(
+  React.forwardRef<ShapeSourceRef, ShapeSourceProps>(
     (
       {
         id: shapeId = MapLibreGL.StyleSource.DefaultSourceID,

javascript/components/Style.tsx

@@ -1,14 +1,15 @@
 import {ExpressionField, FilterExpression} from '../utils/MaplibreStyles';
-import {BaseLayerProps} from '../hooks/useAbstractLayer';
-
-import CircleLayer from './CircleLayer';
-import RasterLayer from './RasterLayer';
-import SymbolLayer from './SymbolLayer';
-import LineLayer from './LineLayer';
-import FillLayer from './FillLayer';
-import FillExtrusionLayer from './FillExtrusionLayer';
-import BackgroundLayer from './BackgroundLayer';
-import HeatmapLayer from './HeatmapLayer';
+
+import CircleLayer, {CircleLayerProps} from './CircleLayer';
+import RasterLayer, {RasterLayerProps} from './RasterLayer';
+import SymbolLayer, {SymbolLayerProps} from './SymbolLayer';
+import LineLayer, {LineLayerProps} from './LineLayer';
+import FillLayer, {FillLayerProps} from './FillLayer';
+import FillExtrusionLayer, {
+  FillExtrusionLayerProps,
+} from './FillExtrusionLayer';
+import BackgroundLayer, {BackgroundLayerProps} from './BackgroundLayer';
+import HeatmapLayer, {HeatmapLayerProps} from './HeatmapLayer';
 import VectorSource from './VectorSource';
 import RasterSource from './RasterSource';
 import ImageSource from './ImageSource';
@@ -48,9 +49,19 @@ function toCamelCaseKeys(
   return newObj;
 }
 
+type LayerProps =
+  | CircleLayerProps
+  | SymbolLayerProps
+  | RasterLayerProps
+  | LineLayerProps
+  | FillLayerProps
+  | FillExtrusionLayerProps
+  | BackgroundLayerProps
+  | HeatmapLayerProps;
+
 function getLayerComponentType(
   layer: MaplibreJSONLayer,
-): ComponentType<BaseLayerProps> | null {
+): ComponentType<LayerProps> | null {
   const {type} = layer;
 
   switch (type) {
@@ -91,7 +102,7 @@ interface MaplibreJSONLayer {
 
 function asLayerComponent(
   layer: MaplibreJSONLayer,
-): ReactElement<BaseLayerProps> | null {
+): ReactElement<LayerProps> | null {
   const LayerComponent = getLayerComponentType(layer);
 
   if (!LayerComponent) {
@@ -103,7 +114,7 @@ function asLayerComponent(
     ...toCamelCaseKeys(layer.layout),
   };
 
-  const layerProps: Partial<BaseLayerProps> = {};
+  const layerProps: Partial<LayerProps> = {};
 
   if (layer.source) {
     layerProps.sourceID = layer.source;

javascript/components/annotations/Annotation.tsx

@@ -1,5 +1,5 @@
 import SymbolLayer from '../SymbolLayer';
-import Animated from '../../utils/animated/Animated';
+import {AnimatedShapeSource} from '../../utils/animated/Animated';
 import AnimatedMapPoint from '../../utils/animated/AnimatedPoint';
 import OnPressEvent from '../../types/OnPressEvent';
 import {SymbolLayerStyleProps} from '../../utils/MaplibreStyles';
@@ -145,12 +145,12 @@ const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
     }
 
     return (
-      <Animated.ShapeSource
+      <AnimatedShapeSource
         id={props.id}
         onPress={_onPress}
         shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}>
         {children}
-      </Animated.ShapeSource>
+      </AnimatedShapeSource>
     );
   },
 );

javascript/utils/animated/Animated.ts

@@ -1,4 +1,7 @@
-import ShapeSource from '../../components/ShapeSource';
+import ShapeSource, {
+  ShapeSourceProps,
+  ShapeSourceRef,
+} from '../../components/ShapeSource';
 import ImageSource from '../../components/ImageSource';
 import FillLayer from '../../components/FillLayer';
 import FillExtrusionLayer from '../../components/FillExtrusionLayer';
@@ -14,6 +17,7 @@ import AnimatedExtractCoordinateFromArray from './AnimatedExtractCoordinateFromA
 import AnimatedRouteCoordinatesArray from './AnimatedRouteCoordinatesArray';
 
 import {Animated as RNAnimated} from 'react-native';
+import React from 'react';
 
 const Animated = {
   // sources
@@ -36,4 +40,23 @@ const Animated = {
   ExtractCoordinateFromArray: AnimatedExtractCoordinateFromArray,
 };
 
+type ShapeSourcePropsWithRef = ShapeSourceProps &
+  React.RefAttributes<ShapeSourceRef>;
+
+type BaseShapeSourceComponent =
+  React.ForwardRefExoticComponent<ShapeSourcePropsWithRef>;
+
+type AnimatedShapeSourceType =
+  RNAnimated.AnimatedComponent<BaseShapeSourceComponent> &
+    React.MemoExoticComponent<BaseShapeSourceComponent>;
+
+/**
+ * Manual typing is required for AnimatedShapeSource because the
+ * following error:
+ * `Type instantiation is excessively deep and possibly infinite.ts(2589)`
+ */
+export const AnimatedShapeSource = RNAnimated.createAnimatedComponent(
+  ShapeSource,
+) as AnimatedShapeSourceType;
+
 export default Animated;

package.json

@@ -33,7 +33,8 @@
     "test:plugin": "jest plugin",
     "build:plugin": "tsc --build plugin",
     "lint:plugin": "eslint plugin/src/*",
-    "postpack": "pinst --enable"
+    "postpack": "pinst --enable",
+    "typescript:check": "tsc -p ./tsconfig.json --noEmit"
   },
   "peerDependenciesMeta": {
     "@expo/config-plugins": {