Extend an esri class

Hi Guys,

Any ideas on how to extend a class? Previously using imports I would just do the following for non-accessor and accessor classes.

import ScaleBarViewModel from "esri/widgets/ScaleBar/ScaleBarViewModel";
import SimpleRenderer from "esri/renderers/SimpleRenderer";
import asd from "esri/core/accessorSupport/decorators";

export class ScaleBarViewModelExtended extends ScaleBarViewModel {
   // implementation
}

@asd.subclass("FixRenderer")
export class FixRenderer extends asd.declared(SimpleRenderer) {
  // implementation
}

I know I can create the extended class outside of the project and then import the js in using dojo config, but there’s some cases where having the extended class inside of the project is definitely preferable if not necessary (shared interfaces, project specific logic etc…) I’m using Angular 6.1.3 if that makes a difference.

Thanks.

[Cuberice]

I created a Stackblitz for anyone wanting to see how to extend the TileLayer using the solution provided. Extending WebTileLayer

For my case we needed to override the getTileUrl method, to reverse the row. In order for this to work just supply a valid layer urlTemplate.

[nickcam]

In case anyone else comes across this - I’ve had to change how I subclass esri modules as I found out the above method won’t work when building using aot.

Now wrap the subclass in an outer class and expose it through a function call. This get’s around the need for the await import() call (which wasn’t working in aot), but still allows the required modules to be loaded at runtime.

import { EsriService } from "../services/esri.service";

// a class to hold and return the new type
export class ScaleBarExtendedType {
 
  // a method to return the new type
  public static getClass() {

    // dynamically get the required esri modules
    let scaleBar = EsriService.getModule<__esri.ScaleBarConstructor>("ScaleBar");

   // this is the declaration and the implementation of the subclass.
    let ScaleBarExtended = class extends scaleBar {

     // subclass implementation, constructor, overriden methods, properties etc...
      constructor(properties: __esri.ScaleBarProperties) {
        super(properties);
      }

      private _renderLine(a, b) {
         // override method implmentation
      };

   // return the subclass type
    return ScaleBarExtended;
  }
}

To use the subclass

// call the static method on the outer class to get the subclass type
let ScaleBarExtended = ScaleBarExtendedType.getClass();

// Instantiate it. Will still be statically typed as well so you'll get intellisense and all that goodness.
let scalebar = new ScaleBarExtended({ view: this.mapView, unit: "dual", id: "scalebar" });