angular - Typescript 中反序列化对象的 Getter 方法

问题描述

我们对我们的服务进行了各种 Http 调用，这些调用返回了一组对象。在我们的 Angular 应用程序中，如果指定，typescript 会将这些解释为适当的类型，例如 Person：

export class Person{
  public firstName: string;
  public lastName: string;
  public salutation: string;
}

假设我希望能够轻松地为这个用户构建一个问候字符串，但我想成为一个优秀的程序员并且只做一次而不是多个地方。所以我创建了一个 getter 来检索它：

export class Person{
  public firstName: string;
  public lastName: string;
  public salutation: string;
  public get greeting(): string {
      return salutation + " " + firstName + " " + lastName;
  }
}

但是，当 typescript 反序列化它时，它缺少 greeting 属性的原型（它被设置为 undefined）。我知道打字稿正在将 JSON 对象映射到它拥有的类，并且映射对象上不存在任何丢失的字段/属性（如果调用则返回未定义）。解决此问题的最佳方法是什么？

作为我们如何调用服务的示例：

this.authHttp.post(this.url, user, params).then(
  (res: Person) => {
      console.log(res);
      console.log(res.greeting);
  }
);

标签： angulartypescriptangular5angular-http

您所做的工作是巧合，因为您访问的属性名称也由.post. tsc实际上，TypeScript 在将其转换为 JavaScript 源代码的命令之后不再使用。因此，您会在运行时丢失所有类型检查。

如果您要对该作业进行硬编码，如下所示：

let me: Person = { firstName: 'Ian', lastName: 'MacDonald', salutation: 'Hello.' };

您将在尝试创建 JavaScript 时收到 TypeScript 错误。

Property 'greeting' is missing in type
    '{ firstName: string; lastName: string; salutation: string; }'
    but required in type 'Person'.ts(2741)

您在类中定义的任何函数也会出现相同的错误。这是因为{ ... }不是你的类型；它只有明确定义的内容。您的服务器响应将遵循相同的分配规则，但问题不会出现（因为数据不存在）直到运行时。

我建议在任何尝试使用服务器响应之前使用管道为自己构建一个类的实例，以便在第一次接触时捕获任何错误，而不是 10 秒后当您最终尝试访问.save()不存在的操作时。

.post(...).pipe(map((incoming: any) => {
  let person: Person = new Person();
  person.firstName = incoming.firstName;
  person.lastName = incoming.lastName;
  person.salutation = incoming.salutation;
  return person;
});

angular - Typescript 中反序列化对象的 Getter 方法

问题描述

解决方案

推荐阅读