转换后不是 TypeScript 对象的函数错误

Question

I made an http call using Angular5 http client. In map function I have done the casting of the response to a PersonModel.

PersonModel has a function getFullName() which returns first_name + last_name

After doing the casting when I try to access this method on casted person object this shows an error of getFullName is not a function.

export class PersonModel {
constructor(
                public first_name: string = null,
                public middle_name: string = null,
                public last_name: string = null) {

    }

getFullName() {
        return this.first_name + this.last_name;
    }

}

This is the service

get(id: number): Observable<PersonModel> {
            return this.http.get("customer/" + id)
                .map((response: any) => {
                    return <PersonModel>response;
                });
        }


customerService.get(1).subscribe(result => {
    console.log(result.getFullName());
})

Error core.js:1350 ERROR TypeError: person.getFullName is not a function

Log for object:

{first_name: "kjlkj", last_name: "jnkjh"}

However when I create an object like this:

const person = new PersonModel();
person.first_name = "lkj";
person.last_name= "lkj";

then this logs as this:

PersonModel {first_name: "kjlkj", last_name: "jnkjh"}

Answer 1

Well , wellcome to JS/TS world.

When you cast basically it is just to avoid type "errors" on your IDE in typescript, and to be sure certain attributes exist on the object but not functions...

class Dog {
    public name: string = "";

    bark(): void {
        console.log("whoof whoof");
    } 
}


let johnny = new Dog();
johnny.name = "johnny";
johnny.bark(); // => Barks ok

let onlyattrs = {
    name: "err"
} as Dog;

// onlyattrs.bark(); // => function does not exists

let realDog = new Dog();
realDog = Object.assign(realDog, onlyattrs);

realDog.bark(); // => barks ok 

Hope this helps.

Answer 2

Try this:

get(id: number): Observable<PersonModel> {
   return this.http.get('customer/' + id).pipe(
      map(p:any=> {return new PersonModel(p.first_name,p.middle_name,p.last_name)});
   );
}