Angular HttpClient调用Point类方法报错：doSomething is not a function

这个问题其实是TypeScript+Angular开发里很常见的一个坑，我来给你拆解清楚原因，再提供几个可行的解决办法：

为什么会报错？ #

你用<Point[]>给HttpClient的请求做了类型断言，但这只是TypeScript在编译阶段的类型检查，完全不会影响运行时的行为。

HttpClient从API拿到JSON数据后，会把它解析成普通的JavaScript对象——这些对象只有lat、lng、name这几个属性，根本不是Point类的实例，自然没有你定义的doSomething方法，调用时就会抛出类型错误。

解决办法 #

方法1：手动将JSON对象转为Point类实例 #

在订阅请求结果时，把每个返回的对象都转换成Point的实例：

首先可以给Point类添加一个静态方法，用来快速从JSON创建实例：

export class Point {
  lat: number;
  lng: number;
  name: string;

  public doSomething() {
    console.log("doSomething called");
  }

  // 新增静态方法：从JSON对象生成Point实例
  static fromJson(json: Partial<Point>): Point {
    const point = new Point();
    // 把JSON的属性批量赋值给实例
    Object.assign(point, json);
    return point;
  }
}

然后在请求的subscribe回调里转换数据：

this.http.get<Point[]>(`${environment.apiUrl}/api/points`)
  .subscribe(
    (result: Point[]) => {
      // 把每个普通对象转为Point实例
      const pointInstances = result.map(p => Point.fromJson(p));
      callback(pointInstances);
    },
    error => {
      // 错误处理
    }
  );

方法2：用构造函数直接接收JSON对象 #

另一种方式是修改Point的构造函数，让它可以直接接收JSON对象初始化属性：

export class Point {
  lat: number;
  lng: number;
  name: string;

  // 构造函数接收Partial<Point>类型的参数
  constructor(json: Partial<Point>) {
    Object.assign(this, json);
  }

  public doSomething() {
    console.log("doSomething called");
  }
}

然后在回调里直接用new Point()创建实例：

const pointInstances = result.map(p => new Point(p));
callback(pointInstances);

方法3：改用接口（如果不需要类的方法特性） #

如果你的Point主要用来描述数据结构，doSomething可以改成独立函数的话，更推荐用接口替代类——接口在编译后会被移除，更轻量：

// 定义接口描述数据结构
export interface Point {
  lat: number;
  lng: number;
  name: string;
}

// 把doSomething改成独立函数
export function doSomething(point: Point) {
  console.log("doSomething called");
}

调用的时候直接用：

var firstPoint = points[0];
doSomething(firstPoint);

总结 #

• 如果需要保留Point类的方法和实例特性，选择方法1或2，把API返回的普通对象转为类实例；
• 如果只是需要描述数据结构，用接口+独立函数的方式更简洁高效。

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