Accessing attributes of a parent class object from within a child object

Question

Accessing attributes of a parent class object from within a child object

Imagine having four tabs within an Angular component, each with its own set of criteria for being displayed. Here's a high-level overview of the scenario.

export class DisplayTabs {
  foo: true;
  bar: false;
  tabs: {
    'A': { order: 1, get isVisible() { return this.foo; } },
    'B': { order: 2, get isVisible() { return !this.bar; } },
    'C': { order: 3, get isVisible() { return this.foo && this.bar; } },
    'D': { order: 4, get isVisible() { return !this.foo || this.bar; } }
  };
};

The current setup encounters an issue where this points to the tabs object rather than the encompassing DisplayTabs object. However, the decision on displaying the tabs relies on the properties of the DisplayTabs object itself.

I have considered structuring my tabs in a more organized and maintainable manner by defining them directly inside the DisplayTabs as follows:

export class DisplayTabs {
  foo: true;
  bar: false;
  get isTabAVisible() { return this.foo; }
  get isTabBVisible() { return !this.bar; }
  // etc.

Is there a way to reorganize this structure to achieve the desired outcome?

typescript

Answer 1

Answer №1

When faced with a situation where the natural approach clashes with the programming paradigm, it is crucial to reassess whether the correct paradigm is being used. In such cases, either the approach should be modified to align with the paradigm, or a different paradigm that complements the approach should be chosen. Consider this alternative solution:

type TabState = {
  foo: boolean
  bar: boolean
}

const state: TabState = {
  foo: true,
  bar: false,
}

enum TabOrder {
  A,
  B,
  C,
  D,
}

type Tab = {
  order: TabOrder
}

const isVisible = ({ foo, bar }: TabState, tab: Tab): boolean => {
  switch (tab.order) {
    case TabOrder.A: return foo;
    case TabOrder.B: return bar;
    case TabOrder.C: return foo && bar;
    case TabOrder.D: return !foo || bar;
  }
}

Playground

This approach is simpler to test (being a pure function dependent only on its arguments), well-typed, easier to debug, and so forth. While conventional wisdom may suggest that object-oriented programming is ideal for UI tasks, it's important to recognize that this isn't always the best fit. Even if you're constrained by an OO-centric framework or existing codebase, you can still encapsulate this functionality as a static method within a class.

Answer 2

When faced with a situation where the natural approach clashes with the programming paradigm, it is crucial to reassess whether the correct paradigm is being used. In such cases, either the approach should be modified to align with the paradigm, or a different paradigm that complements the approach should be chosen. Consider this alternative solution:

type TabState = {
  foo: boolean
  bar: boolean
}

const state: TabState = {
  foo: true,
  bar: false,
}

enum TabOrder {
  A,
  B,
  C,
  D,
}

type Tab = {
  order: TabOrder
}

const isVisible = ({ foo, bar }: TabState, tab: Tab): boolean => {
  switch (tab.order) {
    case TabOrder.A: return foo;
    case TabOrder.B: return bar;
    case TabOrder.C: return foo && bar;
    case TabOrder.D: return !foo || bar;
  }
}

Playground

This approach is simpler to test (being a pure function dependent only on its arguments), well-typed, easier to debug, and so forth. While conventional wisdom may suggest that object-oriented programming is ideal for UI tasks, it's important to recognize that this isn't always the best fit. Even if you're constrained by an OO-centric framework or existing codebase, you can still encapsulate this functionality as a static method within a class.

Answer 3

Answer №2

At the beginning, you're defining a class but then switching to an object literal syntax. This can cause confusion as a class is not an object but rather a set of instructions for creating an object.

If we correct the syntax of your initial snippet, it will appear like this:

export class View {
    foo = true
    bar = false
    tabs = {
      'A': { order: 1, get isVisible() { return this.foo; } },
      'B': { order: 2, get isVisible() { return !this.bar; } },
      'C': { order: 3, get isVisible() { return this.foo && this.bar; } },
      'D': { order: 4, get isVisible() { return !this.foo || this.bar; } }
    }
  };

After making that correction, we can then implement an explicit constructor to access the object being constructed and use it within the methods:

export class View {
    foo = true
    bar = false
    tabs

    constructor() {
      const _this = this;
      this.tabs = {
        'A': { order: 1, get isVisible() { return _this.foo; } },
        'B': { order: 2, get isVisible() { return !_this.bar; } },
        'C': { order: 3, get isVisible() { return _this.foo && _this.bar; } },
        'D': { order: 4, get isVisible() { return !_this.foo || _this.bar; } }
      }
    }
  };

By creating an object instance with new View(), the methods within the tabs field will refer to the properties of the newly created object.

Answer 4

At the beginning, you're defining a class but then switching to an object literal syntax. This can cause confusion as a class is not an object but rather a set of instructions for creating an object.

If we correct the syntax of your initial snippet, it will appear like this:

export class View {
    foo = true
    bar = false
    tabs = {
      'A': { order: 1, get isVisible() { return this.foo; } },
      'B': { order: 2, get isVisible() { return !this.bar; } },
      'C': { order: 3, get isVisible() { return this.foo && this.bar; } },
      'D': { order: 4, get isVisible() { return !this.foo || this.bar; } }
    }
  };

After making that correction, we can then implement an explicit constructor to access the object being constructed and use it within the methods:

export class View {
    foo = true
    bar = false
    tabs

    constructor() {
      const _this = this;
      this.tabs = {
        'A': { order: 1, get isVisible() { return _this.foo; } },
        'B': { order: 2, get isVisible() { return !_this.bar; } },
        'C': { order: 3, get isVisible() { return _this.foo && _this.bar; } },
        'D': { order: 4, get isVisible() { return !_this.foo || _this.bar; } }
      }
    }
  };

By creating an object instance with new View(), the methods within the tabs field will refer to the properties of the newly created object.

Accessing attributes of a parent class object from within a child object

Answer №1

Answer №2

Similar questions

Ensuring the type of a specific key in an object

Incorporate Select2 functionality within the Angular2 application

Eliminate any repeated elements in the array by utilizing TypeScript

Ways to eliminate the white background gap between pages on ionic

TS2322 error: Attempting to assign type 'any' to type 'never' is invalid

Generate an interactive sitemap.xml in ReactJS for each request made to http://example.com/sitemap.xml

Error: JSON unexpected token ' at position 2 - Solution for fixing this issue

What is the correct way to add type annotations to an Axios request?

Using Lodash to Substitute a Value in an Array of Objects

Encountering an issue with Next.js, Typescript, and mongoose when attempting to use `let cached = global.mongoose

"The list of table rows in a React application using Typescript is not rendering properly

Certain Material-UI components appear to lack proper styling

Is it possible to implement drag and drop functionality for uploading .ply, .stl, and .obj files in an angular application?

Exploring Typescript for Efficient Data Fetching

Sporadic UnhandledPromiseRejectionWarning surfacing while utilizing sinon

The variable 'data' is not a property of the type 'any[]'

insert information into a fixed-size array using JavaScript

Can PassportLocalDocument and PaginateModel coexist within the same framework?

Encountering a TS2307 error while trying to import external modules into a TypeScript file

Is there a way to prevent the URL of my Next.js app from constantly changing?