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

我已经阅读了接口和类型断言。一直在看这样的页面：

• Typescript 用类和接口解析 json https://stackoverflow.com/questions/33831711/typescript-parse-json-with-class-and-interface
• 如何将 json 对象转换为 typescript 类 https://stackoverflow.com/questions/22875636/how-do-i-cast-a-json-object-to-a-typescript-class（这个与TS无关！）
• 使用 Typescript 解析复杂的 json 对象 http://www.mzan.com/article/35502683-parse-complex-json-objects-with-typescript.shtml
• 关于接口的 TS 文档 https://www.typescriptlang.org/docs/handbook/interfaces.html

我正在掌握它的窍门，并且理解基础知识非常简单。不过：当涉及 HTTP 时，我没有找到如何将 JSON 对象输入到我在应用程序中使用的对象中。

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

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

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

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 对象，代码会是什么样子？

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

Service:

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

分量（角度 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、映射和订阅让我失望了，我不知道如何在我的代码中实现它！

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

没有这样的事情接口的一个实例。接口是抽象的，它们仅存在于 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())
}

这段代码是您使用接口的方式。你只需告诉 TypeScript 当你收到响应时someUrl并将其解析为json您期望数据的类型为 Teacher。

然后在其他地方当你subscribe()对它来说，它可以告诉你你得到的对象有id, name and students特性：

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

希望这可以帮助 （：