如何在 httpClient/Observable/Map 或其他什么中转换为 Angular 模型变量？

Question

因为我是 Angular/Typescript 的新手，我仍然有一些基本问题，但找不到合适的答案。如何接收或转换正确的值类型？

我已经定义了一个简单的模型：

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

现在我通过 message.service 从服务器获取数据，例如：

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

在我的组件中，我通过以下方式读取值：

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

我需要和期望的是消息元素的真实数据类型，但一切都是 String。为什么没有布尔值和数字？

我也玩过 pipe() 和 map()，但我无法进行类型转换。

我做错了什么？我希望有人能帮我一把。提前谢谢。

Answer 1

TypeScript 只是 javascript 的一个打字层。因此，您不能仅通过定义类型来神奇地将一个值转换为另一个值。您确实必须对类型进行硬编码。在你的情况下：

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'
      }
    }))
  )
}

这确保返回的对象确实是 Message 类的数组。您还可以考虑使用特殊的装饰器，以确保在创建类时获得正确的类型：

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

您可以使用一些第三方库，或者自己实现它们。

然后您可以将上面的代码更改为：

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