fix(types): improve TypeScript type definitions (#378) (h/t @josh-clo…

…udscape)

src/components/AttributionControl/index.d.ts

@@ -8,10 +8,10 @@ type Props = {
    * control. The default is a responsive attribution that collapses when
    * the map is less than 640 pixels wide.
    */
-  compact: boolean;
+  compact?: boolean;
 
   /* String or strings to show in addition to any other attributions. */
-  customAttribution: string | Array<string>;
+  customAttribution?: string | Array<string>;
 
   /* A string representing the position of the control on the map. */
   position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";

src/components/Filter/index.d.ts

@@ -10,7 +10,7 @@ type Props = {
    * If null or undefined is provided, the function removes any existing filter
    * from the layer.
    * */
-  filter: FilterSpecification;
+  filter: FilterSpecification | null | undefined;
 
   /**
    * Whether to check if the filter conforms to the Mapbox GL

src/components/FullscreenControl/index.d.ts

@@ -7,7 +7,7 @@ type Props = {
    * made full screen. By default, the map container element
    * will be made full screen.
    */
-  container: string;
+  container?: string;
 
   /* A string representing the position of the control on the map. */
   position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";

src/components/GeolocateControl/index.d.ts

@@ -3,25 +3,25 @@ import type { GeolocateControl as MapboxGeolocateControl } from "mapbox-gl";
 
 type Props = {
   /* A Geolocation API PositionOptions object. */
-  positionOptions: PositionOptions;
+  positionOptions?: PositionOptions;
 
   /**
    * A `fitBounds` options object to use when the map is
    * panned and zoomed to the user's location.
    */
-  fitBoundsOptions: Object;
+  fitBoundsOptions?: Object;
 
   /**
    * If `true` the Geolocate Control becomes a toggle button and when active
    * the map will receive updates to the user's location as it changes.
    */
-  trackUserLocation: boolean;
+  trackUserLocation?: boolean;
 
   /**
    * By default a dot will be shown on the map at the user's location.
    * Set to `false` to disable.
    */
-  showUserLocation: boolean;
+  showUserLocation?: boolean;
 
   /* A string representing the position of the control on the map. */
   position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";

src/components/Layer/index.d.ts

@@ -21,7 +21,7 @@ type Props = LayerSpecification & {
    * using Mapbox's queryRenderedFeatures API:
    * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
    */
-  onClick?: (event: InteractionEvent) => any;
+  onClick?: (event: InteractionEvent) => void;
 
   /**
    * Called when the layer is hovered over.
@@ -32,7 +32,7 @@ type Props = LayerSpecification & {
    * using Mapbox's queryRenderedFeatures API:
    * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
    */
-  onHover?: (event: InteractionEvent) => any;
+  onHover?: (event: InteractionEvent) => void;
 
   /**
    * Called when the layer feature is entered.
@@ -43,7 +43,7 @@ type Props = LayerSpecification & {
    * using Mapbox's queryRenderedFeatures API:
    * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
    */
-  onEnter?: (event: InteractionEvent) => any;
+  onEnter?: (event: InteractionEvent) => void;
 
   /**
    * Called when the layer feature is leaved.
@@ -54,8 +54,8 @@ type Props = LayerSpecification & {
    * using Mapbox's queryRenderedFeatures API:
    * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
    */
-  onLeave?: (event: InteractionEvent) => any;
- 
+  onLeave?: (event: InteractionEvent) => void;
+
   /**
    * Called when the layer is right-clicked.
    * @callback
@@ -65,12 +65,12 @@ type Props = LayerSpecification & {
    * using Mapbox's queryRenderedFeatures API:
    * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
    */
-  onContextMenu?: (event: InteractionEvent) => any;
+  onContextMenu?: (event: InteractionEvent) => void;
 
   /**
    * Radius to detect features around a clicked/hovered point
    */
-  radius: number;
+  radius?: number;
 };
 
 export default class Layer extends PureComponent<Props> {}

src/components/Marker/index.d.ts

@@ -9,7 +9,7 @@ type Props = {
    * A string indicating the part of the Marker
    * that should be positioned closest to the coordinate
    */
-  anchor:
+  anchor?:
     | "center"
     | "top"
     | "bottom"
@@ -43,34 +43,34 @@ type Props = {
    * respective `rotationAlignment` setting. A positive value will
    * rotate the marker clockwise.
    */
-  rotation: number;
+  rotation?: number;
 
   /**
    * map aligns the `Marker` to the plane of the map. `viewport`
    * aligns the  Marker to the plane of the viewport. `auto` automatically
    * matches the value of `rotationAlignment`.
    */
-  pitchAlignment: string;
+  pitchAlignment?: string;
 
   /**
    * map aligns the `Marker`'s rotation relative to the map, maintaining
    * a bearing as the map rotates. `viewport` aligns the `Marker`'s rotation
    * relative to the viewport, agnostic to map rotations.
    * `auto` is equivalent to `viewport`.
    */
-  rotationAlignment: string;
+  rotationAlignment?: string;
 
   /** Fired when the marker is clicked */
-  onClick?: () => any;
+  onClick?: (event: MouseEvent) => void;
 
   /** Fired when the marker is finished being dragged */
-  onDragEnd?: (lngLat: LngLat) => any;
+  onDragEnd?: (lngLat: LngLat) => void;
 
   /** Fired when the marker is finished being dragged */
-  onDragStart?: (lngLat: LngLat) => any;
+  onDragStart?: (lngLat: LngLat) => void;
 
   /** Fired when the marker is dragged */
-  onDrag?: (lngLat: LngLat) => any;
+  onDrag?: (lngLat: LngLat) => void;
 };
 
 export default class Marker extends PureComponent<Props> {

src/components/NavigationControl/index.d.ts

@@ -3,16 +3,16 @@ import type { NavigationControl as MapboxNavigationControl } from "mapbox-gl";
 
 type Props = {
   /** If true the compass button is included. */
-  showCompass: boolean;
+  showCompass?: boolean;
 
   /** If true the zoom-in and zoom-out buttons are included. */
-  showZoom: boolean;
+  showZoom?: boolean;
 
   /**
    * If true the pitch is visualized by rotating X-axis of compass
    * and pitch will reset by clicking on the compass.
    */
-  visualizePitch: boolean;
+  visualizePitch?: boolean;
 
   /** A string representing the position of the control on the map. */
   position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";

src/components/ScaleControl/index.d.ts

@@ -3,10 +3,10 @@ import type { ScaleControl as MapboxScaleControl } from "mapbox-gl";
 
 type Props = {
   /* The maximum length of the scale control in pixels. */
-  maxWidth: number;
+  maxWidth?: number;
 
   /* Unit of the distance. */
-  unit: "imperial" | "metric" | "nautical";
+  unit?: "imperial" | "metric" | "nautical";
 
   /* A string representing the position of the control on the map. */
   position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";

src/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from "./components/MapGL";
+export { default, Viewport } from "./components/MapGL";
 
 export { default as MapContext } from "./components/MapContext";
 export { default as Layer } from "./components/Layer";