为HttpClient返回值指定数据类型（Angular)

在使用 Angular 的 HttpClient 访问后台服务时，接收返回的Json值通常使用的是 any 类型，但使用这种方式往往会导致不能提前发现一些程序的问题，比如：名称拼写错误等…

无类型的写法

我们以 Angular课程实验手册（一）中的访问后端登录服务的案例来进行说明。下面是最初的登录代码:

login() {
  console.log('login, userId = ' + this.userId + ', pwd = ' + this.pwd);

  let ob = this.securitySrv.login(this.userId, this.pwd);

  ob.subscribe(res => {
    if (res['succ']) {
      console.log('success');
      this.securitySrv.token = res['data'];
      this.router.navigate(["home"]);
    } else {
      console.log('fail');
    }
  });
}

上面代码中的第 7 行和第 9 行向我们展示了如何对 any 类型的对象的属性进行访问。可以看到，我们通过使用属性的字符串名称: “succ”和”data”来进行访问。如果开发者不小心写错了一个字符，比如把”succ”写成了”secc”, 那这段程序就不能运行出我们想要的结果了，并且这样的问题有时候还不好查（考眼力:) ）。在比较大型的应用开发中，类似这样的问题还比较常见的。那能不能在编译阶段，甚至是在配置良好的IDE中的编码阶段，系统就能发现问题，并提示开发者，而不需要等到运行程序报错以后才知道呢？

解决的方法当然是避免使用 any, 而给返回值一个特定的类型。

定义返回实体

一个开发组织（团队、公司）通常会定义统一的前、后端通讯协议，包括从后端给前端返回值的数据结构。类似Angular课程实验手册（五）中定义的的那样。对于 typescript 来说，可以方便的定义一个类来统一返回值的结构。如下面的代码:

export class ApiResult<T> {

    succ: boolean;
    code: string;
    msg: string;
    data: T;
}

succ, code 和 msg 是确定的类型，而每次调用返回的数据可能是不同的类型，所以这里用了泛型来表示。

处理服务端返回

有了整个类，我们就可以在网络调用中为返回值指定类型，如下面的代码所示：

login() {
  console.log('login, userId = ' + this.userId + ', pwd = ' + this.pwd);

  let ob = this.securitySrv.login(this.userId, this.pwd);

  ob.subscribe((res: ApiResult<string>) => {
    if (res.succ) {
      console.log('success');
      this.securitySrv.token = res.data;
      this.router.navigate(["home"]);
    } else {
      console.log('fail');
    }
  });
}

可以看到，我们在第6行使用了定义好的 ApiResult 类型，因为这个接口如果访问成功，则在 data 属性中包含一个代表(token)的字符串。因此我们使用了 ApiResult。其中 string 就是在这个特定的调用中的 data 类型。当然，对于返回复杂数据的接口，也可以使用自定义的类型。

经过这样的处理，在第7行和第9行，就可以自己使用”.”符合来访问属性，并且如果拼写错误，不小心把 “succ”写成了”secc”，系统也会立即提示，并且编译也会报错。