迁移至Angular 5 HttpClient：避免重复定义客户端模型的疑问

嗨，我完全懂你的困扰——服务端已经把模型定义好了，为啥迁移到HttpClient后好像还要在客户端再搞一遍类型？其实这里的泛型用法没你想的那么“重复”，咱们一步步捋清楚：

• 泛型的本质是类型提示，不是强制复刻模型
  HttpClient里的<Hero>泛型只是给TypeScript用的编译时类型检查，目的是让你在使用返回值的时候能获得属性提示，避免拼写错误或者访问不存在的字段。你根本不需要在客户端完整复制服务端的模型类，只需要定义一个轻量的接口，包含你在客户端实际会用到的字段就行：

  // 只定义客户端需要的字段，不用管服务端的其他细节
  interface Hero {
    id: number;
    name: string;
    // 比如服务端有createTime，但客户端不用，就不用写
  }
  

  然后用this.httpClient.post<Hero>(this.URL, hero)，这样既享受了TypeScript的类型安全，又不用重复服务端的完整模型。

• 甚至可以完全不用额外定义类型
  如果你连接口都不想写，也可以直接省略泛型，返回的Observable<Object>可以在订阅时用类型断言来指定类型：

  this.httpClient.post(this.URL, hero)
    .subscribe((response: Hero) => {
      // 这里同样能获得类型提示，编译时也会做基本检查
    });
  

  不过这种方式的类型检查力度会弱一些，比如没法提前发现你在请求时传入的hero对象字段是否正确，所以还是更推荐用接口的方式。

• 额外补充：HttpClient的其他简化点
  别忘了迁移后，HttpClient已经自动帮你完成了之前.map(this.extractData)的JSON解析工作，返回的直接是解析后的对象。错误处理则需要用RxJS的pipeable操作符，改成：

  import { catchError } from 'rxjs/operators';
  
  this.httpClient.post<Hero>(this.URL, hero)
    .pipe(
      catchError(this.handleError)
    );
  

总的来说，泛型只是TypeScript给你的工具，不是让你重复造轮子的要求。用接口精简定义需要的字段，就能完美解决不想重复服务端模型的问题啦～

内容的提问来源于stack exchange，提问作者Mark