Angular4 HttpClient类型检查疑问：返回数据为何显示为Object而非ValorTest

嘿，这个问题其实是TypeScript和JavaScript运行时的核心差异导致的，我来给你掰明白：

• TypeScript类型注解仅作用于编译阶段：你在HttpClient调用里指定的<ValorTest>类型参数，本质上只是给TypeScript编译器的一个“提示”——告诉它「我期望这个请求返回的数据结构和ValorTest类的定义匹配」，帮你在写代码时提前发现类型不匹配的错误。但到了JavaScript运行时，所有TypeScript的类型信息都会被完全移除，服务器返回的JSON只会被解析成普通的JavaScript对象。
• JSON解析不会自动生成类实例：Angular的HttpClient处理JSON响应时，底层用的是JSON.parse()，这个方法只会把JSON字符串转换成普通的JS对象，不会调用你定义的ValorTest类的构造函数，自然也就不会生成ValorTest的实例，所以console.log里显示的是Object类型。

你需要手动把普通JS对象转换为类的实例，常见的两种实现方式：

• 给ValorTest添加构造函数：在类里写一个能接收普通对象并初始化属性的构造函数：

export class ValorTest {
  id: number;
  name: string;

  constructor(data: Partial<ValorTest>) {
    // 把传入的对象属性赋值给当前实例
    Object.assign(this, data);
  }
}

// 请求时转换实例
this.http.get<ValorTest>('/api/your-endpoint').subscribe(rawData => {
  const valorTestInstance = new ValorTest(rawData);
  console.log(valorTestInstance); // 现在是ValorTest的实例啦
});

• 使用工厂函数转换：如果不想修改类的构造函数，可以单独写一个转换函数：

export class ValorTest {
  id: number;
  name: string;
}

function convertToValorTest(rawData: any): ValorTest {
  const instance = new ValorTest();
  Object.assign(instance, rawData);
  return instance;
}

// 调用方式
this.http.get<ValorTest>('/api/your-endpoint').subscribe(rawData => {
  const valorTestInstance = convertToValorTest(rawData);
  console.log(valorTestInstance);
});

另外补充一句：如果你的ValorTest类里定义了方法，普通JS对象是没有这些方法的，只有转换成类实例后，才能调用类里的方法——这也是手动转换的重要原因之一。

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