What does the weird "e" or "t" in Chrome's console indicate

user_3973406 0
Viewed 686

I'm trying to debug a weird problem I face with TypeScript 3.1, Babel 7 and Webpack 4, where it only works when I build an object manually. Here's an example (pseudo code):

B (see img below):

const objectOfObjects = {...}
const someKeys = ['key1', 'key2', 'key3']

someKeys.filter(key => {
  const i = new Foo(objectOfObjects[key]['somePropName'], /* subsequent props */);
  console.log(i); // when I inspect the object here values are set correctly
  return predicate(i);
});

But instead of having to type that in manually objectOfObjects[key]['somePropName'] for each property, I just pass in an object of a given TypeScript interface, and pass that to the constructor and let it Object.assign it.

A (see img below):

const objectOfObjects = {...}
const someKeys = ['key1', 'key2', 'key3']

someKeys.filter(key => {
  const i = new Foo(objectOfObjects[key]);
  console.log(i) // this does also return and object, but with all props undefined
  return predicate(i);
});

Foo extends the following base class

class FooBase {
  constructor(o: IFoo) {
    if (o) {
      Object.assign(this, o);
    }
  }
}

When I make a very simple example it seems to be working, but no matter what, when I pass objectOfObjects[key] to the constructor of Foo in my real application I get this:

enter image description here

As I've gone over it and tried to find changes in objectOfObjects[key], the only difference I can think of is what i highlighted in the image above - the little "e" and "t" just to the left of the object in chrome console. I could not find any documentation from a google search, so hopefully one of you knows what it means, and hopefully it could also indicate what I do wrong here.

typescript3.0 google-chrome-devtools javascript-objects javascript
2 Answers

It's a little hard to tell without knowing anything about what a Foo is, but those appear to be property names within the object you logged. The TypeScript compiler generates properties like this when it compiles your code into JavaScript.

user_5358710

Like Ted Hopp already said, it is hard to tell what is going on there from the small pieces you provided.

I think in A you have only the constructor of f t(e) because it is the constructor from IFoo copied due to a flat reference copy.

Object.assign() only makes a flat copy and ignores all undefined and null values. Maybe make a quick check: Since you are calling const i = new Foo(objectOfObjects[key]); the object objectOfObjects[key] needs to be an IFoo and needs to have all the values, you want to flat copy.

Since unfolding an object is done lazy in the debuggers, you could try to hit a breakpoint there and check again what the object really contains.

Honestly, these are only guesses and this answer will maybe removed later by me.

user_64593270
Related