Improve Source class types (internal-1647)

src/render/draw_raster.ts

@@ -490,9 +490,7 @@ function configureRaster(
         resampling = gl.NEAREST;
 
         if (!range) {
-            // @ts-expect-error - TS2339 - Property 'rasterLayers' does not exist on type 'RasterTileSource | RasterDEMTileSource | RasterArrayTileSource | VideoSource | ImageSource | CanvasSource'.
             if (source.rasterLayers) {
-                // @ts-expect-error - TS2339 - Property 'rasterLayers' does not exist on type 'RasterTileSource | RasterDEMTileSource | RasterArrayTileSource | VideoSource | ImageSource | CanvasSource'.
                 const foundLayer = source.rasterLayers.find(({id}) => id === layer.sourceLayer);
                 if (foundLayer && foundLayer.fields && foundLayer.fields.range) {
                     range = foundLayer.fields.range;

src/source/canvas_source.ts

@@ -54,7 +54,8 @@ export type CanvasSourceSpecification = {
  * map.removeSource('some id');  // remove
  * @see [Example: Add a canvas source](https://docs.mapbox.com/mapbox-gl-js/example/canvas-source/)
  */
-class CanvasSource extends ImageSource {
+class CanvasSource extends ImageSource<'canvas'> {
+    type: 'canvas';
     options: CanvasSourceSpecification;
     animate: boolean;
     canvas: HTMLCanvasElement;

src/source/image_source.ts

@@ -215,8 +215,8 @@ function sortTriangles(centerLatitudes: number[], indices: TriangleIndexArray):
  * @see [Example: Add an image](https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/)
  * @see [Example: Animate a series of images](https://www.mapbox.com/mapbox-gl-js/example/animate-images/)
  */
-class ImageSource extends Evented<SourceEvents> implements ISource {
-    type: string;
+class ImageSource<T extends 'image' | 'canvas' | 'video'= 'image'> extends Evented<SourceEvents> implements ISource {
+    type: T;
     id: string;
     scope: string;
     minzoom: number;
@@ -276,7 +276,7 @@ class ImageSource extends Evented<SourceEvents> implements ISource {
         this.dispatcher = dispatcher;
         this.coordinates = options.coordinates;
 
-        this.type = 'image';
+        this.type = 'image' as T;
         this.minzoom = 0;
         this.maxzoom = 22;
         this.tileSize = 512;

src/source/raster_array_tile_source.ts

@@ -19,7 +19,8 @@ import type {TextureDescriptor} from './raster_array_tile';
 import type {ISource, SourceRasterLayer} from './source';
 import type {RasterArraySourceSpecification} from '../style-spec/types';
 
-class RasterArrayTileSource extends RasterTileSource implements ISource {
+class RasterArrayTileSource extends RasterTileSource<'raster-array'> implements ISource {
+    type: 'raster-array';
     map: Map;
     rasterLayers: Array<SourceRasterLayer> | undefined;
     rasterLayerIds: Array<string> | undefined;

src/source/raster_dem_tile_source.ts

@@ -18,7 +18,8 @@ import type {Callback} from '../types/callback';
 import type {TextureImage} from '../render/texture';
 import type {RasterDEMSourceSpecification} from '../style-spec/types';
 
-class RasterDEMTileSource extends RasterTileSource implements ISource {
+class RasterDEMTileSource extends RasterTileSource<'raster-dem'> implements ISource {
+    type: 'raster-dem';
     encoding: 'mapbox' | 'terrarium';
 
     constructor(id: string, options: RasterDEMSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {

src/source/raster_tile_source.ts

@@ -44,8 +44,8 @@ import Texture from '../render/texture';
  * @see [Example: Add a raster tile source](https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/)
  * @see [Example: Add a WMS source](https://docs.mapbox.com/mapbox-gl-js/example/wms/)
  */
-class RasterTileSource extends Evented<SourceEvents> implements ISource {
-    type: 'raster' | 'raster-dem' | 'raster-array';
+class RasterTileSource<T extends 'raster' | 'raster-dem' | 'raster-array' = 'raster'> extends Evented<SourceEvents> implements ISource {
+    type: T;
     id: string;
     scope: string;
     minzoom: number;
@@ -81,7 +81,7 @@ class RasterTileSource extends Evented<SourceEvents> implements ISource {
         this.dispatcher = dispatcher;
         this.setEventedParent(eventedParent);
 
-        this.type = 'raster';
+        this.type = 'raster' as T;
         this.minzoom = 0;
         this.maxzoom = 22;
         this.roundZoom = true;

src/source/video_source.ts

@@ -42,7 +42,8 @@ import type {VideoSourceSpecification} from '../style-spec/types';
  * map.removeSource('some id');  // remove
  * @see [Example: Add a video](https://www.mapbox.com/mapbox-gl-js/example/video-on-a-map/)
  */
-class VideoSource extends ImageSource {
+class VideoSource extends ImageSource<'video'> {
+    type: 'video';
     options: VideoSourceSpecification;
     urls: Array<string>;
     video: HTMLVideoElement;

test/build/typings/index.ts

@@ -169,6 +169,46 @@ map.addSource('points', {
     }
 });
 
+
+//
+// Source narrowing
+//
+
+const source = map.getSource('id');
+
+switch (source.type) {
+    case 'geojson':
+        source satisfies mapboxgl.GeoJSONSource;
+        break;
+    case 'raster-array':
+        source satisfies mapboxgl.RasterArrayTileSource;
+        break;
+    case 'raster-dem':
+        source satisfies mapboxgl.RasterDemTileSource;
+        break;
+    case 'raster':
+        source satisfies mapboxgl.RasterTileSource;
+        break;
+    case 'vector':
+        source satisfies mapboxgl.VectorTileSource;
+        break;
+    case 'image':
+        source satisfies mapboxgl.ImageSource;
+        break;
+    case 'video':
+        source satisfies mapboxgl.VideoSource;
+        break;
+    case 'canvas':
+        source satisfies mapboxgl.CanvasSource;
+        break;
+    case 'custom':
+        source satisfies mapboxgl.CustomSource<ImageData | ImageBitmap | HTMLCanvasElement | HTMLImageElement>;
+        break;
+    case 'model':
+        source satisfies mapboxgl.ModelSource;
+        break;
+}
+
 //
 // Adding layers
 //