How can one properly extend the Object class in JavaScript?

Question

How can one properly extend the Object class in JavaScript?

I have a scenario where I want to enhance a record (plain Javascript object) of arrays with additional properties/methods, ideally by instantiating a new class:

class Dataframe extends Object {
  _nrow: number;
  _ncol: number;
  _identity: number[];

  constructor(values: Record<string, any[]>) {
    super();
    this._nrow = values[Object.keys(values)[0]].length;
    this._ncol = Object.keys(values).length;
    this._identity = Array(this._nrow).fill(1);
    Object.assign(this, values);
  }

  // Additional methods can be added here...
}

While this approach works, using Object.assign() causes me to lose the typings on values:

const rawData = {x : [1, 2, 3, 4], y: [5, 6, 7, 8]}   
const data = new Dataframe(rawData)
data.x // Property 'x' does not exist on type 'Dataframe'

I would like to know if there is a method for the class instance to inherit the properties from the values object or perhaps an alternate solution to this issue?

javascript typescript pojo

Answer 1

Answer №1

It seems there is a logical inconsistency in this scenario because the use of Record<string, any[]> implies that all string keys must have array values. However, you are also attempting to introduce other string properties that do not align with array values.

My suggestion would be to designate values as a property of the class using the public keyword.

class Dataset extends Object {
  _rows: number;
  _cols: number;
  _ids: number[];

  constructor(public values: Record<string, any[]>) {
    super();
    this._rows = values[Object.keys(values)[0]].length;
    this._cols = Object.keys(values).length;
    this._ids = Array(this._rows).fill(1);
  }

  // Additional methods can be added here...
}

const rawData = {a : [9, 8, 7, 6], b: [3, 2, 1, 0]};
const dataset = new Dataset(rawData);
console.log(dataset.values.a);

JavaScript Playground

Answer 2

It seems there is a logical inconsistency in this scenario because the use of Record<string, any[]> implies that all string keys must have array values. However, you are also attempting to introduce other string properties that do not align with array values.

My suggestion would be to designate values as a property of the class using the public keyword.

class Dataset extends Object {
  _rows: number;
  _cols: number;
  _ids: number[];

  constructor(public values: Record<string, any[]>) {
    super();
    this._rows = values[Object.keys(values)[0]].length;
    this._cols = Object.keys(values).length;
    this._ids = Array(this._rows).fill(1);
  }

  // Additional methods can be added here...
}

const rawData = {a : [9, 8, 7, 6], b: [3, 2, 1, 0]};
const dataset = new Dataset(rawData);
console.log(dataset.values.a);

JavaScript Playground

How can one properly extend the Object class in JavaScript?

Answer №1

Similar questions

Developing a unique JavaScript object by extracting information from a jQuery AJAX response

Why does appending to a TextArea field fail in one scenario but succeed in another when using Javascript?

Module error caused by Typescript path inconsistency

Infinite loop triggered by jQuery dropdown menu on page resize was causing an issue

Determine the moment at which the input is altered by adjusting the slider

"Pairing AngularJS 2 with Vaadin for a winning combination

Attempting to incorporate the jquery-mousewheel plugin into the jquery cycle2 library

Updating the button text in Angular 7

Is there a way to ensure DRY principles are followed while utilizing Redux Toolkit's asyncThunkCreator?

My desire is for every circle to shift consecutively at various intervals using Javascript

The NodeJS application experiences a crash if incorrect parameters are provided to the API

Having trouble getting the toggle menu to work using Jquery?

When using Next.js and Jest, an error may occur stating "Element type is invalid: expected a string or a class/function but got an object."

Generate a dynamic key object in Angular/TypeScript

Trouble with hide/show loop in setTimeout function

Tips for utilizing JavaScript to engage with a Cisco call manager

What is the typical number of open CLI terminals for a regular workflow?

What could be causing this template to malfunction?

I have a task to execute an Ajax request to retrieve and display data from my database table. My approach involves utilizing Perl CGI and attempting to invoke a Perl script using JavaScript

Tips for Identifying Different ID Values of HTML Elements with jQuery