Cast Typescript ( ERROR Typeerror )

Question

The problem is this, through a service(ModeloService), receive an array of Modelo, where Modelo is a class, it turns out I’m not getting access to the methods of this class, because the cast in the service is not being done properly, instead of the cast be made for a array of Modelo, is only an array of a normal javascript object, but typed with Modelo.

The http injected is from Angular2.

Follow the code with the classes mentioned:

I have the following class TypeScript, representing a model (Domain):

export class Modelo{
  id: number;
  type: string;
  size: number;

  constructor() {

  }

  public allowSize(): boolean {
    return this.type != null && (this.type.toLowerCase() == 'size');
  }

}

And the following service:

@Injectable()
export class ModeloService {

  constructor(private http: Http) {
  }

  getAll(): Observable<Modelo[]> {
    return this.http.get(myEnvironment.MODELO_SERVICE_PATH)
      .map(res => <Modelo[]> res.json());
  }

}

When trying to use this method allowSize(), I get the following error: ERROR TypeError: modelo.allowSize is not a function

modeloService.getAll()
  .subscribe(array=> array.forEach(modelo => console.log(modelo.allowSize())),
    error => console.log(error));

When printing modelo on the console, I do not receive an object Modelo, I only get a normal javascript object with key and values:

{id: 1;   type: 'size';   size: '10'}

The way I found to solve the problem was by creating the object, as follows:

getAll(): Observable<Modelo[]> {
  return this.http.get(myEnvironment.MODELO_SERVICE_PATH)
    .map(res => {

      return (<Modelo[]> res.json()).map(modelo => {
        let modeloToReturn = new Modelo();
        modeloToReturn.id = modelo.id;
        modeloToReturn.type= modelo.type;
        modeloToReturn.size = modelo.size;

        return modeloToReturn;
      })

    });
}

Solve, but causes another problem that is I have to keep evolving this service whenever I evolve my model, there is no way that this cast be done automatically?

Answer 1

You can’t just make a cast of a Javascript result from an Ajax request to a Javascript/Typescript class instance. There are several techniques to do this and usually involve copying data. Unless you create an instance of the class (as you did yourself), you will have no method or property. It will remain as a simple Javascript object.

My suggestion is that you make one cast for a interface. An interface is purely a compile-time structure, i.e., it has zero runtime impact in Javascript. You can do something like this:

interface Modelo {
  id: number;
  type: string;
  size: number;
}

Using the above interface, it is necessary to move the logic of the method allowSize() for those who have the reference of that array.

For example, you can have the following code in a component, say model.componentts.

private modelos: Modelo[];

ngOnInit() {
    this.modelos = this.service.getAll();
}

get allowSize(index: number): boolean {
    return this.modelos[index].type != null &&
           this.modelos[index].type.toLowerCase() === 'size';
}

Then in your template template.component.html

<div *ngFor="let modelo of modelos; let i = index">
    <div *ngIf="allowSize(i)">Allow Size</div>
</div>

Answer 2

I decided to solve the problem by creating an unstable Model object, taking advantage of object orientation.

The way I put it in the post:

model.service.ts

getAll(): Observable<Modelo[]> {
  return this.http.get(myEnvironment.MODELO_SERVICE_PATH)
    .map(res => {

      return (<Modelo[]> res.json()).map(modelo => {
        let modeloToReturn = new Modelo();
        modeloToReturn.id = modelo.id;
        modeloToReturn.type= modelo.type;
        modeloToReturn.size = modelo.size;

        return modeloToReturn;
      })

    });
}