React+TypeScript中实例显示为Object而非自定义类的问题咨询

这种情况是正常的，但可以通过调整代码或配置让控制台正确识别并显示自定义类类型。

原因分析 #

• TypeScript最终会编译为JavaScript运行，浏览器控制台显示的是运行时类型。如果编译后的代码丢失了类的原型链信息，或者类的实例化逻辑没有正确维护原型，控制台就会将其识别为普通Object。
• Vue3项目中默认的编译配置或代码写法（比如class语法的处理逻辑）更完整地保留了类的原型链，因此控制台能正常显示自定义类类型。

解决方法 #

• 确保实例化逻辑正确：静态方法必须通过new关键字创建类实例，而非直接返回字面量对象，示例代码：

class MyClassModel {
  id: number;
  name: string;

  constructor(data: { id: number; name: string }) {
    this.id = data.id;
    this.name = data.name;
  }

  static parsedResponse(data: { id: number; name: string }) {
    // 必须使用new创建实例，才能保留原型链
    return new MyClassModel(data);
  }
}

• 调整TS编译配置：在tsconfig.json中确保target设置为ES6或更高版本，ES6+对class的原型支持更完善：

{
  "compilerOptions": {
    "target": "ES6",
    // 其他配置...
  }
}

• 避免过度压缩混淆：如果使用Vite、Webpack等构建工具，检查压缩插件（如Terser）的配置，不要启用抹去类名的选项，防止原型信息丢失。
• 手动添加toStringTag：通过Symbol.toStringTag自定义控制台显示的类型名称，即使原型链有问题也能正常显示：

class MyClassModel {
  // 自定义控制台显示的类型名
  get [Symbol.toStringTag]() {
    return 'MyClassModel';
  }

  // 其他属性和方法...
}

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