带打字稿的vscode调试器:是什么决定了对象的呈现方式? [英] vscode debugger with typescript: what determines how an object is rendered?

问题描述

我正在使用vscode编写一些打字稿，并且已经设置了一个断点.当我打开调试"窗格并要求它评估一个对象时，它如何产生字符串表示形式?

我问的原因是因为我正在使用

I'm using vscode to write some typescript, and I have set a breakpoint. When I open the Debug pane and ask it to evaluate an object, what is it doing to produce the string representation?

The reason I am asking is because I am using this solution to control the way that console.log renders an instance of a class, and it works great -- but it doesn't seem to impact the way the object is rendered in the debugger.

To be more specific, the below code (also available in the typescript sandbox here) results in the desired output from console.log. However, when I set a breakpoint just before the console.log line and evaluate myObj in the debugger, what's displayed is

cls {property: 'property', hello: 'override', newProperty: 'new property'}

rather than

Greeter3Generated {property: 'property', hello: 'override', newProperty: 'new property'}

Code in question:

function classDecorator3<T extends { new (...args: any[]): {} }>(
  constructor: T
) {
  const cls = class extends constructor {
    newProperty = "new property";
    hello = "override";
  };
  Object.defineProperty(cls, 'name', {
    get: () => `${constructor.name}Generated`
  });
  return cls
}

@classDecorator3
class Greeter3 {
  property = "property";
  hello: string;
  constructor(m: string) {
    this.hello = m;
  }
}

const myObj = new Greeter3("world")
console.log(myObj);
//=>  Greeter3Generated: { "property": "property", "hello": "override", "newProperty": "new property" } 

解决方案

You need to define Symbol.toStringTag. Also, you can remove the hack which overrides the native constructor.name:

function classDecorator3<T extends { new (...args: any[]): {} }>(
  constructor: T
) {
  return class extends constructor {
    newProperty = "new property";
    hello = "override";
    [Symbol.toStringTag] = `${constructor.name}Generated`;
  };
}

@classDecorator3
class Greeter3 {
  property = "property";
  hello: string;
  constructor(m: string) {
    this.hello = m;
  }
}

const myObj = new Greeter3("world");
console.log(myObj);
//=>  Greeter3Generated: { "property": "property", "hello": "override", "newProperty": "new property" } 

Demo with plain JavaScript (to execute with developer tools opened):

function classDecorator3(
  constructor
) {
  return class extends constructor {
    newProperty = "new property";
    hello = "override";
    [Symbol.toStringTag] = `${constructor.name}Generated`;
  };
}

const GeneratedClass = classDecorator3(class Greeter3 {
  property = "property";
  hello;
  constructor(m) {
    this.hello = m;
  }
});

const myObj = new GeneratedClass("world");
console.log(myObj);
debugger;

Result in Node.js:

这篇关于带打字稿的vscode调试器:是什么决定了对象的呈现方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！