TypeError: .currentPizzaPlace.getPoint is not a fu

Question

TypeError: this.pizzaPlaceEditService.currentPizzaPlace.getPoint is not a function

I found TypeError: is not a function typescript class but I don't think it applies to this situation. Found several more that didn't seem to apply. Here's my redacted class:

export class PizzaPlace {
  deliveryArea = [];

  getPoint(seq: number): Point {
    let result: Point = null;

    this.deliveryArea.forEach(function(point:Point) {
      if(seq == point.sequence) {
        result = point;
      }
    });

    return result;
  }

}

Here is my working unit test:

  it('should retrieve a point by sequence', () => {
    var point1 = new Point();
    point1.sequence = 0;
    point1.latitude = 5.12;
    point1.longitude = 5.12;

    var point2 = new Point();
    point2.sequence = 1;
    point2.latitude = 6.13;
    point2.longitude = 6.13;

    var point3 = new Point();
    point3.sequence = 2;
    point3.latitude = 5.25;
    point3.longitude = 5.25;

    pizzaPlace.deliveryArea = [point1, point2, point3];

    expect(pizzaPlace.getPoint(0)).toBe(point1);
    expect(pizzaPlace.getPoint(1)).toBe(point2);
    expect(pizzaPlace.getPoint(2)).toBe(point3);
    expect(pizzaPlace.getPoint(3)).toBe(null);
  });

Here is the code generating the error:

  onDownClick(): void {
    if(this.selectedPoint) {
      let currSeq = this.selectedPoint.sequence;
      let nextSeq = currSeq + 1;
      console.log("Current pizza place:" + JSON.stringify(this.pizzaPlaceEditService.currentPizzaPlace));
      console.log("nextSeq:" + nextSeq);
      let next = this.pizzaPlaceEditService.currentPizzaPlace.getPoint(nextSeq);
      if(next) {
        this.pizzaPlaceEditService.currentPizzaPlace.swapPoints(this.selectedPoint, next);
      }
    }
  }

And here is the error:

Current pizza place:{"contactName":"Zaphod Beeblebrox","customerId":"TPGup2lt","deliveryArea":[{"errorMsg":"","sequence":0,"latitude":34.552,"longitude":-84.556},{"errorMsg":"","sequence":1,"latitude":34.711,"longitude":-84.665}],"deliveryZips":[],"paypalAccount":"HB17","settings":null,"shopName":"Donato's Hartland","shopStreet":"1531 Kenesaw Dr","shopCity":"Lexington","shopState":"KY","shopZip":"40515","shopPhone":"[phone]","billStreet":"1531 Kenesaw Dr","billCity":"Lexington","billState":"KY","billZip":"40515","billPhone":"[phone]"}
pizza-place-delivery.component.ts:63:6
nextSeq:1
pizza-place-delivery.component.ts:64:6
TypeError: this.pizzaPlaceEditService.currentPizzaPlace.getPoint is not a function

I have run out of things to try. Any advice appreciated!

Answer 1

Thanks to Artem's excellent input, I was able to figure out that the problem was caused by the fact that I was creating an object from the JSON instead of the object that I wanted and so it was a different type. Evidently, Classes in Typescript are compile time only and are discarded at runtime.

So, based on: How do I initialize a TypeScript object with a JSON object option 4 of the selected answer, I created a serializable.ts.

export interface Serializable<T> {
  deserialize(input: Object): T;
}

And then modified my class with the implements:

export class PizzaPlace implements Serializable<PizzaPlace> {

and then added:

  deserialize(input): PizzaPlace {
    this.paypalAccount = input.paypalAccount;
    this.customerId = input.customerId;
    ...
    this.settings = input.settings;

    return this;
  }

Then, since my web service returns an array of these, I changed my service call:

  .subscribe(places => this.deserializePlaces(places));

and added a new function:

  deserializePlaces(places: Object[]){
    this.pizzaPlaces = [];

    places.forEach(obj=> {
      let place = new PizzaPlace().deserialize(obj);
      this.pizzaPlaces.push(place);
    });
  }

And this seems to work just fine. Thanks for the input.