Correctly Extend a Class: Constructor

09-23-2021 02:16 PM
New Contributor III

I'm looking for guidance with how to properly extend a class with respect to its constructor. All of this is in typescript. I'm extending the Graphic class. Normally the graphics class take a GraphicProperties object. I'm my class I had new properties.  I would like to change the constructor from


constructor(properties?: any) { ... }




    constructor(properties?: SegmentProperties) { ... }


Also, is it possible to define the type of properties without initializing them in the constructor?

My full code is below:


import Graphic from "@arcgis/core/Graphic";
import Polyline from "@arcgis/core/geometry/Polyline";
import LineSymbol3D from "@arcgis/core/symbols/LineSymbol3D";
import LineSymbol3DLayer from "@arcgis/core/symbols/LineSymbol3DLayer";

import { subclass, property } from "@arcgis/core/core/accessorSupport/decorators";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import Point from "@arcgis/core/geometry/Point";

import * as watchUtils from "@arcgis/core/core/watchUtils";

export class SegmentGraphic extends Graphic{

    startPoint: Graphic;

    endPoint: Graphic;

        readOnly: true
      get length(): number {
        return 10;

    constructor(properties?: any) {
        this.startPoint = properties.startPoint;
        this.endPoint = properties.endPoint;


        this.symbol = new LineSymbol3D({
            symbolLayers: [
                new LineSymbol3DLayer({
                    size: 5,
                    material: {
                        color: "red"


    private updatePolyline() {
        let polyline = new Polyline({spatialReference: this.startPoint.geometry.spatialReference});
            polyline.addPath([this.startPoint.geometry as Point, this.endPoint.geometry as Point]);
            this.geometry = polyline 

    private registerWatchUtil(point: Graphic){
        watchUtils.when(point, "geometry", (geometry) => {


0 Kudos
1 Reply
Frequent Contributor II

I would probably do it like this.

class SegmentGraphic extends Graphic {
  // so that all props are not required
  constructor(params: Partial<SegmentGraphic>) {}


0 Kudos