vscode 使用打字稿的调试器：什么决定了对象的呈现方式？

Question

我正在使用 vscode 写一些打字稿，我已经设置了一个断点。当我打开“调试”窗格并要求它评估一个对象时，它在做什么来生成字符串表示形式？

我问的原因是因为我正在使用来控制 console.log 呈现 class 实例的方式，它工作得很好——但它没有' 似乎影响对象在调试器中的呈现方式。

更具体地说，下面的代码（也可在 typescript 沙箱 here 中获得）从 console.log 产生所需的输出。但是，当我在 console.log 行之前设置断点并在调试器中计算 myObj 时，显示的是

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

而不是

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

有问题的代码：

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" }

Answer 1

您需要定义Symbol.toStringTag。此外，您可以删除覆盖本机 constructor.name:

的 hack

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" }

简单演示 JavaScript（在打开开发者工具的情况下执行）：

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;

结果Node.js：

vscode 使用打字稿的调试器：什么决定了对象的呈现方式？

vscode debugger with typescript: what determines how an object is rendered?

javascript

typescript

visual-studio-code

console.log

vscode-debugger