Method in typescript class give error "is not a function"

AngularTypescript

Angular Problem Overview


I work on Angular2 web application. I created a simple class in typescript:

export class User {
    firstName: string;
    lastName: string;

    nominative() : string {
        return this.lastName + " " + this.firstName;
    }
}

When i call nominative on object of type User I receive this error: Error in :0:0 caused by: user.nominative is not a function.

I call the function in my AppComponent class:

export class AppComponent implements OnInit {
    name: string = "";

    ngOnInit() : void {
        let user = JSON.parse(sessionStorage.getItem("User")) as User;
        if (user) {
            this.name = user.nominative();
        }
    }
}

I already tried to use lambda expression in this way:

nominative = () : string => { ... }

But nothing change. The problem is only in this class, so what am I doing wrong?

Angular Solutions


Solution 1 - Angular

as User only tells the compiler that it's safe to assume that the value is of type User, but doesn't have any effect on runtime and it won't have any methods because methods are not passed with JSON.

You would need

let user = new User(JSON.parse(sessionStorage.getItem("User")));

to get an actual User instance. You would need to create a constructor that assigns the values from JSON to fields like

class User {
  ...
  constructor(json:any) {
    this.firstName = json.firstName;
    this.lastName = json.lastName;
  }

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionerikscandolaView Question on Stackoverflow
Solution 1 - AngularGünter ZöchbauerView Answer on Stackoverflow