TypeScript中Product类getter调用报错‘not a function’的解决方案咨询

我一眼就看出问题出在哪了——你从JSON文件里拿到的那些"Product"对象，根本就不是Product类的实际实例！

问题根源详解 #

TypeScript的类型断言（比如http.get<Product[]>）只是给编辑器看的“语法糖”，它不会在运行时把普通JSON对象转换成Product类的实例。那些从HTTP请求返回的对象，本质上就是普通的JavaScript对象，没有继承Product类里定义的任何方法（包括你写的那些getXXX()方法），所以调用getName()自然会报错。

解决方案：手动转换为类实例 #

你需要把从JSON拿到的原始对象，通过Product构造函数转换成真正的类实例，具体修改如下：

1. 修改ApiService的数据转换逻辑

把getDataFromApi方法里的代码改成这样：

private getDataFromApi(){
  this.http.get<any[]>("../../assets/data.json")
    .toPromise()
    .then((data) => {
      // 将每个JSON对象转换为Product类的实例
      const productInstances = data.map(item => new Product(
        item.name,
        item.type,
        item.longDetail,
        item.shortDetail,
        item.stock,
        item.price,
        item.linkImage,
        item.id
      ));
      this.dataApi.next(productInstances);
    });
}

2. （可选）优化：给Product类添加静态工厂方法

为了让代码更整洁、可维护，可以给Product类加一个静态方法专门用来从JSON创建实例：

export class Product { 
  private name: string; 
  private type: string; 
  private longDetail: string; 
  private shortDetail: string; 
  private stock: number; 
  private price: number; 
  private linkImage: string; 
  private id: number; 

  constructor(
    name: string, 
    type: string, 
    longDetail: string, 
    shortDetail: string, 
    stock: number, 
    price: number, 
    linkImage: string, 
    id: number 
  ) { 
    this.name = name; 
    this.type = type; 
    this.longDetail = longDetail; 
    this.shortDetail = shortDetail; 
    this.stock = stock; 
    this.price = price; 
    this.linkImage = linkImage; 
    this.id = id; 
  } 

  // 新增静态方法：从JSON对象生成Product实例
  static fromJson(json: {
    name: string;
    type: string;
    longDetail: string;
    shortDetail: string;
    stock: number;
    price: number;
    linkImage: string;
    id: number;
  }): Product {
    return new Product(
      json.name,
      json.type,
      json.longDetail,
      json.shortDetail,
      json.stock,
      json.price,
      json.linkImage,
      json.id
    );
  }

  // 原有getter方法不变
  getName(): string { return this.name; } 
  getType(): string { return this.type; } 
  getLongDetail(): string { return this.longDetail; } 
  getShortDetail(): string { return this.shortDetail; } 
  getStock(): number { return this.stock; } 
  getPrice(): number { return this.price; } 
  getLinkImage(): string { return this.linkImage; } 
  getId(): number { return this.id; } 
}

然后在ApiService里就可以简化成：

const productInstances = data.map(Product.fromJson);

3. 验证实例是否正确生成

可以在addProductBasket方法里加个调试语句，确认传入的newProduct确实是Product实例：

addProductBasket(newProduct: Product) { 
  console.log(newProduct instanceof Product); // 正常应该输出true
  // 原有代码...
}

总结 #

这个坑很多TypeScript新手都会踩——别把类型断言和实际对象实例化搞混了！类型断言只是编译时的类型提示，不会改变运行时对象的结构。只有通过构造函数创建的对象，才会拥有类中定义的方法和属性。

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