HTTP：从 JSON 对象到 Typescript 的类型断言

Question

我正在阅读接口和类型断言。一直在看类似的页面：

• Typescript parse json with class and interface
• How do I cast a json object to a typescript class（这个跟TS没关系！）
• Parse complex json objects with Typescript
• TS doc about interfaces

我已经掌握了窍门，而且理解基础知识非常简单。虽然：当涉及 HTTP 时，我无法找到如何将 JSON 对象键入到我在应用程序中使用的对象。

例如，我有一个教师对象数组。每个教师都有一个 id、名字和一个学生数组。我有另一个班级学生，其中包含他们的属性......等等。

在我读到的那些链接的某个地方，除非您需要对对象执行操作，否则只有一个接口就足够了。但是除非您想对 Object 执行操作，否则您需要一个单独的类？

我实际的教师课程从...开始：

export class Teacher {

    private students: Array<Student>;

    constructor(public id: string, public name: string) {
        this.students = new Array<Student>();
    }

    public getStudents(): Array<Student> {
        return this.students;
    }

}

首先，如果我想将 JS 对象强制转换（或断言类型）为 Teacher 对象，代码会是什么样子？

现在我的代码看起来像这样：

服务：

getTeachers() {
    return this.http.get('someUrl')
    .map((res: Response) => res.json())
}

组件（Angular 2 组件）：

export class ListComponent implements OnActivate {

id: string;
name: string;
teachers: Teacher[];

constructor(public _service: Service, public _router: Router) {

}

routerOnActivate(): void {
    this._service.getTeachers()
        .subscribe(teachers => this.teachers = teachers);
}

我的界面如下所示：

export interface TeacherJSON {
        id: string,
        name: string,
        students: Array<Student>;
}

如果上面的接口还不足以对对象执行动作，我该如何前进？我确实了解到您可以向界面添加方法，例如：

interface Thing {
    a: number;
    b: string;
    foo(s: string, n: number): string;
}

process(x: Thing) {
    return x.foo("abc");
}

我确实理解上面的例子，但我想 http、映射和订阅让我失望，我不知道如何在我的代码中实现它！

Answer 1

那么显然我需要先将组件中的教师数组更改为我的界面实例？

没有接口实例这样的东西。接口是抽象的，它们只存在于 TypeScript 中，它们甚至不编译为 JavaScript。您编写它们是为了在您的编辑器中获得代码完成和其他好东西；在大型应用程序中为您提供帮助，因此您不必记住每个对象都有哪些属性和方法。

当您必须实例化一个对象时，接口不能这样做 - 您将使用一个类，并像往常一样创建属性和方法。在您的示例中执行此操作的正确方法是：

interface ITeacher{
  id: string,
  name: string,
  students: Array<Student>;
};
class Teacher implements ITeacher {
  id: string,
  name: string,
  students: Array<Student>;
}

在您的情况下，不需要实现接口，TypeScript 足够聪明，也可以从类中提取信息，所以它们是相同的：

teachers: Teacher[];
teachers: ITeacher[];

如果您有多种类型的教师，并且您想确保每个教师都具有所有必要的属性/方法，那么创建一个界面会很有意义：

class FirstGradeTeacher implements ITeacher{}
class SecondGradeTeacher implements ITeacher{}

您可能已经注意到我根本没有提到 JSON。 忘掉它！ ...在使用您的对象模型（类或接口）时。它只是您的逻辑模型的数据格式。当您构建模型并计划它们应该如何工作时，您不需要关心协议和格式（Http 服务会处理这些）。

getTeachers(): Observable<Teacher> {
  return this.http.get('someUrl')
    .map((res: Response) => res.json())
}

这段代码是你如何使用界面的。您只需告诉 TypeScipt，当您收到来自 someUrl 的响应并将其解析为 json 时，您希望数据是教师类型。

然后在其他地方当你subscribe() 到它时，它可以告诉你你得到的对象有id、name 和students 属性：

this._service.getTeachers()
  .subscribe((teachers: Teacher[]) => this.teachers = teachers);

希望这会有所帮助（：

Answer 2

如果我很好地理解了您的问题，您需要为以Object 作为原型的反序列化 JSON 对象提供一些方法。目前，纯 javascript API 无法做到这一点，因为您从 REST 服务接收到的内容是纯字符串，通过 JSON.parse 成为对象。您应该使用另一种反序列化机制，该机制能够在运行时检查您的类，并从反序列化的 JSON 重新构建它们的实例。通过这种方式，您将拥有新鲜的 JSON 对象，但具有正确的原型，该原型具有该类的所有方法。我试着举个例子。

假设您正在调用一个 REST 端点，该端点为您提供Teacher-like 对象。在某些时候你会做var freshObject = JSON.parse(receivedString)（实际上Angular已经做到了，但我们会改进这个机制）；最简单的事情（但不是最明智的事情）是将freshObject 的原型更改为Teacher 原型：Object.setPrototypeof(freshObject, Teacher.prototype)。现在您可以在freshObject 上调用Teacher 方法，但这显然是一个肤浅的变化，因为嵌套对象（在本例中为Students）仍然以Object 作为其原型，并且问题又来了。

现在很明显，我们需要能够递归研究Teacher类结构的东西，同时使用正确的原型重新构建接收到的对象（实际上，您可以重新构建新的原型，而不是更改原型）副本，应该不那么重）。你可能想要这样的东西：Teacher.getClass().members，它会给你这些信息：

• students 字段的名称
• students 字段的类型（在本例中为Array<Students>）
• 组件类Student的构造函数

如果您有此类信息，您可以递归地执行我们在上一个示例中所做的相同操作。

我最近发布了一个增强版的 TypeScript 编译器，它允许这个用例，我为你准备了一个完整的工作示例here，here 你可以找到编译器项目。如果这能解决您的问题，请告诉我。

Answer 3

假设您通过 http 获取教师列表，您可以对其进行过滤以获取您需要的：

getById(id: string) {
    return this.http.get('someUrl' + id)
        .map((res: Response) => res.json())
        .filter(teacher => teacher.id === id));