如何在httpClient / Observable / Map或其他内容中转换为Angular Model变量？

Question

because I'm prety new in Angular/Typescript I still have some fundamental questions, but couldn't find an appropriate answer. How can I receive or cast the right value types?

I have defined a simple model:

export class Message {
    ID:                 number;
    mode:               string;
    senderID:           number;
    receiverID:         number;
    marked:             boolean;
    subject:            string;
}

Now I'm getting data from the server, via a message.service like:

getMessages(): Observable<Message[]> {
    return this.restService.get('/message/list/' + this.owner)
}

and in my component I read the values, via:

this.messageService.getMessages().subscribe((messages:Message[]) => {
    this.objectlist = messages
}

What I need and also expected are the real data types of the message elements, but everything is of String . Why there are no booleans and numbers ?

I also played with pipe() and map(), but I'm not able to make a type conversion.

What I'm doing wrong? I hope that somebody can give me a helping hand. Thx in advance.

Answer 1

TypeScript is just a typing layer of javascript. So you cannot magically cast one value into the other just by defining the typings. You really have to hardcode the types. In your case:

getMessages(): Observable<Message[]> {
  return this.restService.get('/message/list/' + this.owner).pipe(
    map((messages) => messages.map((message) => ({
      ...new Message(), ...message, ...{
        ID: parseInt(message.ID),
        senderID: parseInt(message.senderID),
        receiverID: parseInt(message.receiverID),
        marked: message.marked === '1'
      }
    }))
  )
}

This makes sure the returned object is really an array of the Message class. You can also think about using special decorators, which makes sure that when you create the class you get the proper type:

export class Message {
    @IsNumber()
    ID:                 number;
    mode:               string;
    @IsNumber()
    senderID:           number;
    @IsNumber()
    receiverID:         number;
    @IsBoolean()
    marked:             boolean;
    subject:            string;
}

There are some third party libraries you can use for this, or just implement them yourself.

You can then change the above code to:

messages.map((message) => ({...new Message(), ...message))