Instance of an Angular TypeScript class

Question

Instance of an Angular TypeScript class

I have a TypeScript class named User with various properties such as id, userName, age, and more. The class also includes a fullName method that combines the givenname and surname of the user. Additionally, there is a sayHello function that logs a greeting message.


 export class User {

    id: number;
    userName: string;
    knownAs: string;
    age: number;
    gender: string;
    created: Date;
    lastActive: Date;
    photoUrl: string;
    city: string;
    country: string;
    surname: string;
    givenname: string;

    get fullName(): string {
        return `${this.givenname} ${this.surname}`;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.surname} ${this.givenname}!`);
      }
}

Next, I have a service function:



    user: User;
    this.userService.getUser(this.loggedUser.nameid).subscribe((user: User) => {
        this.user = user;
        this.user.givenname = this.loggedUser.given_name;
        this.user.surname = this.loggedUser.family_name;
        console.log(this.user.fullName);
        this.user.sayHello();
      });

However, when checking the console for the results, I encountered an issue where console.log(this.user.fullName) returned 'undefined' and this.user.sayHello() threw an error 'TypeError: Object doesn't support property or method 'sayHello'. How can I access the properties and functions defined within the User class once I retrieve the data from the server?

angular typescript

Answer 1

Answer №1

To enhance the functionality of the User object received from the service, consider creating a separate prototype object specifically for User. The original User object may not have access to all the necessary functions.

user: User;
this.userService.getUser(this.loggedUser.nameid).subscribe((user: User) => {
    this.user = Object.assign(new User, user) //-->take note of using new here..
    this.user.givenname = this.loggedUser.given_name;
    this.user.surname = this.loggedUser.family_name;
    console.log(this.user.fullName);
    this.user.sayHello();
  });

Note: According to MDN, JavaScript classes serve as more of syntactical sugar rather than introducing a completely new object-oriented inheritance model in ECMAScript 2015.

JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

Learn more about JavaScript classes here

Also, as mentioned by @theMayer in the comment section, the service responsible for providing the user object could return a properly structured User object with all the required prototype functions. This transfer of responsibility from the client to the service allows for better code reusability and cleaner implementation.

Therefore, in the UserService.ts file (or wherever the userService is defined), you can do something like:

getUser(id: string):User {
  //existing logic
  return Object.assign(new User(), user)//--> different methods exist to create objects, this is just one approach.
}

Answer 2

To enhance the functionality of the User object received from the service, consider creating a separate prototype object specifically for User. The original User object may not have access to all the necessary functions.

user: User;
this.userService.getUser(this.loggedUser.nameid).subscribe((user: User) => {
    this.user = Object.assign(new User, user) //-->take note of using new here..
    this.user.givenname = this.loggedUser.given_name;
    this.user.surname = this.loggedUser.family_name;
    console.log(this.user.fullName);
    this.user.sayHello();
  });

Note: According to MDN, JavaScript classes serve as more of syntactical sugar rather than introducing a completely new object-oriented inheritance model in ECMAScript 2015.

JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

Learn more about JavaScript classes here

Also, as mentioned by @theMayer in the comment section, the service responsible for providing the user object could return a properly structured User object with all the required prototype functions. This transfer of responsibility from the client to the service allows for better code reusability and cleaner implementation.

Therefore, in the UserService.ts file (or wherever the userService is defined), you can do something like:

getUser(id: string):User {
  //existing logic
  return Object.assign(new User(), user)//--> different methods exist to create objects, this is just one approach.
}

Answer 3

Answer №2

You haven't initialized an instance of User.
Below is a sample implementation :

 export class User {

    id?: number;
    userName?: string;
    knownAs?: string;
    age?: number;
    gender?: string;
    created?: Date;
    lastActive?: Date;
    photoUrl?: string;
    city?: string;
    country?: string;
    surname?: string;
    givenname?: string;

    constructor(args: User = {}) {
      this.id = args.id;
      this.userName = args.userName;
      this.knownAs = args.knownAs;
      this.age = args.age;
      this.gender = args.gender;
      this.created = args.created;
      this.lastActive = args.lastActive;
      this.photoUrl = args.photoUrl;
      this.city = args.city;
      this.country = args.country;
      this.surname = args.surname;
      this.givenname = args.givenname;
    }

    get fullName(): string {
        return `${this.givenname} ${this.surname}`;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.surname} ${this.givenname}!`);
      }
}

Utilize map to instantiate your User object :

user: User;
this.userService.getUser(this.loggedUser.nameid)
  .pipe(map((user: User) => new User(user)))
  .subscribe((user: User) => {
    this.user = user;
    this.user.givenname = this.loggedUser.given_name;
    this.user.surname = this.loggedUser.family_name;
    console.log(this.user.fullName);
    this.user.sayHello();
  });

Answer 4

You haven't initialized an instance of User.
Below is a sample implementation :

 export class User {

    id?: number;
    userName?: string;
    knownAs?: string;
    age?: number;
    gender?: string;
    created?: Date;
    lastActive?: Date;
    photoUrl?: string;
    city?: string;
    country?: string;
    surname?: string;
    givenname?: string;

    constructor(args: User = {}) {
      this.id = args.id;
      this.userName = args.userName;
      this.knownAs = args.knownAs;
      this.age = args.age;
      this.gender = args.gender;
      this.created = args.created;
      this.lastActive = args.lastActive;
      this.photoUrl = args.photoUrl;
      this.city = args.city;
      this.country = args.country;
      this.surname = args.surname;
      this.givenname = args.givenname;
    }

    get fullName(): string {
        return `${this.givenname} ${this.surname}`;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.surname} ${this.givenname}!`);
      }
}

Utilize map to instantiate your User object :

user: User;
this.userService.getUser(this.loggedUser.nameid)
  .pipe(map((user: User) => new User(user)))
  .subscribe((user: User) => {
    this.user = user;
    this.user.givenname = this.loggedUser.given_name;
    this.user.surname = this.loggedUser.family_name;
    console.log(this.user.fullName);
    this.user.sayHello();
  });

Instance of an Angular TypeScript class

Answer №1

Answer №2

Similar questions

When attempting to display the title of a route in an Angular header component, it consistently results in undefined

The Angular data table is encountering an issue as the dataStream.pipe function is not recognized

JavaScript's blank identifier

Combining and consolidating data from state using Angular with ngrx

What is the proper way to assign a class name to an animation state in Angular 2/4?

Retrieve information from an XML document

Enabling withCredentials in Angular 6 for every HttpClient request is crucial for maintaining consistent authentication and

The issue encountered is: "Uncaught promise error: Provider for ActivatedRoute not found."

Event for closing Angular Material date picker

Display and unveil Bootstrap modals

Inversify's Http Context consistently remains void of any content

How can I properly configure the 'main' file in angular-cli.json to utilize Express?

How can I effectively link data to an Angular Material dropdown in Angular 5?

Secure higher order React component above class components and stateless functional components

Unable to verify Angular 5 identity

Angular 7 routing glitches causing page refresh issues

Function input custom operator in RxJs

Failure of ngClass in Angular 7 due to the presence of multiple classes (spaces)

Discover the step-by-step process for populating hierarchical data with ngFor in Angular 2

Within an Angular test scenario, execute a static method from a service that triggers an HTTP get request to fetch stored JSON data. This data is then retrieved and returned back to the service