FeatureSnappingLayerSource type error

354
3
Jump to solution
09-10-2021 06:18 AM
ShaneBuscher
Occasional Contributor

The ES Module FeatureSnappingLayerSource produces an incorrect typing error when setting SnappingOptions on Sketch:

 

 

this._layer = new GraphicsLayer();
this._mapView.map.add(this._layer);

this._sketchVM = new SketchViewModel({
  view: this._mapView,
  layer: this._layer,
  snappingOptions: {
    enabled: true,
    featureSources: [{
      layer: this._layer  /** type error **/
    }]
  }
});

 

Type error:
Spoiler
No overload matches this call.
Overload 1 of 2, '(properties?: SketchViewModelProperties): SketchViewModel', gave the following error.
Type '{ layer: esri.GraphicsLayer; }' is not assignable to type 'FeatureSnappingLayerSourceProperties'.
Object literal may only specify known properties, and 'layer' does not exist in type 'FeatureSnappingLayerSourceProperties'.
Overload 2 of 2, '(properties?: SketchViewModelProperties): SketchViewModel', gave the following error.
Type '{ layer: esri.GraphicsLayer; }' is not assignable to type 'FeatureSnappingLayerSourceProperties'.
Object literal may only specify known properties, and 'layer' does not exist in type 'FeatureSnappingLayerSourceProperties'.ts(2769)
The error occurs because FeatureSnappingLayerSourceProperties type does not have a 'layer' property. The same code above works with AMD which has no type checking. Works when adding TS ignore:

 

this._sketchVM = new SketchViewModel({
  view: this._mapView,
  layer: this._layer,
  snappingOptions: {
    enabled: true,
    featureSources: [{
      // @ts-ignore: Type definition bug 
      layer: this._layer
    }]
  }
});

 

Requesting this be fixed in a future release.

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

It's because snappingOptions is using autocasting. From the docs:

// Create a new instance of Sketch, and set
// a layer for one of the featureSources property.
// This enables feature snapping on that layer.
const sketch = new Sketch({
  layer: graphicsLayer,
  view: view,
  snappingOptions: { // autocasts to SnappingOptions()
    enabled: true,
    featureSources: [{ layer: graphicsLayer }] // autocasts to FeatureSnappingLayerSource()
  }
});

 

TypeScript doesn't allow for that, so you'll have to create a new SnappingOptions

View solution in original post

0 Kudos
3 Replies
KenBuja
MVP Honored Contributor

It's because snappingOptions is using autocasting. From the docs:

// Create a new instance of Sketch, and set
// a layer for one of the featureSources property.
// This enables feature snapping on that layer.
const sketch = new Sketch({
  layer: graphicsLayer,
  view: view,
  snappingOptions: { // autocasts to SnappingOptions()
    enabled: true,
    featureSources: [{ layer: graphicsLayer }] // autocasts to FeatureSnappingLayerSource()
  }
});

 

TypeScript doesn't allow for that, so you'll have to create a new SnappingOptions

0 Kudos
ShaneBuscher
Occasional Contributor

Actually newing up SnappingOptions produces the same TS error because the layer property on FeatureSnappingLayerSource is not defined (as originally posted). 

const options = new SnappingOptions({
      enabled: true,
      featureSources: [new FeatureSnappingLayerSource({ layer: this._layer }]
    });

 

Error: Object literal may only specify known properties, and 'layer' does not exist in type 'FeatureSnappingLayerSourceProperties'.

 

0 Kudos
DWVHB
by
New Contributor

VS code will bark because it says the layer property is read only.  Create a new generic object (or array of objects) and set it to the featureSources:

const fs:any = {layer: this._layer};

const sketch = new Sketch({
layer: graphicsLayer,
view: view,
snappingOptions: { // autocasts to SnappingOptions()
enabled: true,
featureSources: [fs] 
}
});

 

0 Kudos