Displaying properties of a class in Typescript using a default getter: Simplified guide

Question

Displaying properties of a class in Typescript using a default getter: Simplified guide

Here is an interface and a class that I am working with:

export interface ISample {
  propA: string;
  propB: string;
}

export class Sample {
  
  private props = {} as ISample;

  public get propA(): string {
    return this.props.propA;
  }

  public set propA(propA: string) {
    this.props.propA = propA;
  }

  public get propB(): string {
    return this.props.propB;
  }

  public set propB(propB: string) {
    this.props.propB = propB;
  }

}

When initializing the object using the class, I do it like this.

let sample = new Sample();
sample.propA = 'A';
sample.propB = 'B';

However, when I attempt to print the object using console.log(sample), the output is:

props: {propsA: "A", propsB: "B"}
propsA: (...)
propsB: (...)

My question is, how can I modify the output so that it only shows

{propsA: "A", propsB: "B"}

when using console.log(sample)?

Note: The versions I am using are typescript 3.8.3 and Angular 9.

javascript angular typescript getter-setter

Answer 1

Answer №1

If you want to access the properties directly without using any class object instances in between, you have the option to bypass the Sample class completely. Instead, consider utilizing the ISample interface directly.

You can give this a try:

export interface ISample {
  propA: string;
  propB: string;
}

export class AppComponent  {
  sample = {} as ISample;

  ngOnInit() {
    this.sample.propA = 'A';
    this.sample.propB = 'B';

    // Output will be {propA: "A", propB: "B"}
    console.log(this.sample);
  }
}

Answer 2

If you want to access the properties directly without using any class object instances in between, you have the option to bypass the Sample class completely. Instead, consider utilizing the ISample interface directly.

You can give this a try:

export interface ISample {
  propA: string;
  propB: string;
}

export class AppComponent  {
  sample = {} as ISample;

  ngOnInit() {
    this.sample.propA = 'A';
    this.sample.propB = 'B';

    // Output will be {propA: "A", propB: "B"}
    console.log(this.sample);
  }
}

Answer 3

Answer №2

Your Sample category includes a property named sample that derives from the ISample interface. Therefore, it is evident that you are retrieving the log of

props: { propA: "A", propB: "B"}

.

In order for propA and propB to be direct elements of your category, you must properly inherit the Interface. By doing so, you will need to establish propA and propB as direct elements of Sample which will result in the desired log.

export class Sample implements ISample {
  propsA = '';
  propsB = '';
}

Remember to adjust your setters and getters accordingly when utilizing private states.

Answer 4

Your Sample category includes a property named sample that derives from the ISample interface. Therefore, it is evident that you are retrieving the log of

props: { propA: "A", propB: "B"}

.

In order for propA and propB to be direct elements of your category, you must properly inherit the Interface. By doing so, you will need to establish propA and propB as direct elements of Sample which will result in the desired log.

export class Sample implements ISample {
  propsA = '';
  propsB = '';
}

Remember to adjust your setters and getters accordingly when utilizing private states.

Answer 5

Answer №3

If you want to customize the output of an object, you can override the toString() method:

export interface IData {
  name: string;
  value: number;
}

export class CustomData {
  
  data = {} as IData;

  public get name(): string {
    return this.data.name;
  }

  public set name(name: string) {
    this.data.name = name;
  }

  public get value(): number {
    return this.data.value;
  }

  public set value(value: number) {
    this.data.value = value;
  }

  toString() {
    return this.data;
  }
}

let customData = new CustomData();
customData.name = 'John';
customData.value = 42;

console.log(customData.data)

Answer 6

If you want to customize the output of an object, you can override the toString() method:

export interface IData {
  name: string;
  value: number;
}

export class CustomData {
  
  data = {} as IData;

  public get name(): string {
    return this.data.name;
  }

  public set name(name: string) {
    this.data.name = name;
  }

  public get value(): number {
    return this.data.value;
  }

  public set value(value: number) {
    this.data.value = value;
  }

  toString() {
    return this.data;
  }
}

let customData = new CustomData();
customData.name = 'John';
customData.value = 42;

console.log(customData.data)

Answer 7

Answer №4

When it comes to changing the display of a class using console.log, there are very limited options available. The function is built into the browser and doesn't offer much flexibility for customization. For example, you can refer to the implementation in Firefox (FF implementation).

function log(aThing) {
  if (aThing === null) {
    return "null\n";
  }

  // Code continues...

In instances involving classes (

typeof aThing == "object"

), the function calls Object.getOwnPropertyNames to display all properties.

It's important to note that using toString won't be effective for objects with

typeof aThing == "object"

.

A similar implementation can be seen in Chrome's V8ValueStringBuilder.append:

// Code snippet from V8
if (value->IsObject() && !value->IsDate() && !value->IsFunction() &&
        !value->IsNativeError() && !value->IsRegExp()) {
    v8::Local<v8::Object> object = v8::Local<v8::Object>::Cast(value);
    v8::Local<v8::String> stringValue;
    if (object->ObjectProtoToString(m_context).ToLocal(&stringValue))
        return append(stringValue);
}

// Another code snippet from V8
V8_WARN_UNUSED_RESULT MaybeLocal<String> ObjectProtoToString(
     Local<Context> context);

For further information, you can visit: Does console.log invokes toString method of an object?

Answer 8

When it comes to changing the display of a class using console.log, there are very limited options available. The function is built into the browser and doesn't offer much flexibility for customization. For example, you can refer to the implementation in Firefox (FF implementation).

function log(aThing) {
  if (aThing === null) {
    return "null\n";
  }

  // Code continues...

In instances involving classes (

typeof aThing == "object"

), the function calls Object.getOwnPropertyNames to display all properties.

It's important to note that using toString won't be effective for objects with

typeof aThing == "object"

.

A similar implementation can be seen in Chrome's V8ValueStringBuilder.append:

// Code snippet from V8
if (value->IsObject() && !value->IsDate() && !value->IsFunction() &&
        !value->IsNativeError() && !value->IsRegExp()) {
    v8::Local<v8::Object> object = v8::Local<v8::Object>::Cast(value);
    v8::Local<v8::String> stringValue;
    if (object->ObjectProtoToString(m_context).ToLocal(&stringValue))
        return append(stringValue);
}

// Another code snippet from V8
V8_WARN_UNUSED_RESULT MaybeLocal<String> ObjectProtoToString(
     Local<Context> context);

For further information, you can visit: Does console.log invokes toString method of an object?

Displaying properties of a class in Typescript using a default getter: Simplified guide

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for customizing the cursor to avoid it reverting to the conventional scroll cursor when using the middle click

The NGXS state does not get updated when a lazy loaded component is used

Unable to locate the required conditional template for the 'mdRadioButton' directive due to the absence of the 'mdRadioGroup' controller

The type definition file for 'jest' cannot be located, despite the fact that jest has been successfully installed

Steps for changing the language in KeyboardDatePicker material ui

NextJS Router delays data reloading until page receives focus

Puppeteer has a limit of running only three instances on Heroku

Dimensions of Doughnut Chart in Chart.js

Sort through a list of objects using the criteria from a separate array

Vue.js has encountered a situation where the maximum call stack size has been exceeded

Revise the form used to edit data stored in Vuex and accessed through computed properties

Creating keys from extensive JSON data without having to manually match types using Typescript

What do I do when I get a "findByIdAndUpdate is not a function" error from my controller after requiring the model

The appearance of the circle in Safari is rough and lacks smoothness

Modify the background of a Div element by selecting an alternate color palette

Scrolling to an id within dynamically loaded content using jQuery after an ajax request

Testing in Jasmine: Verifying if ngModelChange triggers the function or not

What is the purpose of running "npm install" if the "node_modules" directory already exists?

Configure your restify REST API server to handle both HTTPS and HTTP protocols

Propagating numerical values through iterative iterations