Is it possible to dynamically manage property assignments within a class expression?

Question

Is it possible to dynamically manage property assignments within a class expression?

Suppose I have the following code snippet:

const c = class {
  xyz = 123;
};

With that in place, I can then execute:

new c().xyz // --> 123;

But is there a way to provide an object to automatically assign properties? In simpler terms, can I achieve something like this:

const props = { foo: 'baz!', bar: 555 };
const c = class {
  ...props... // convert props to properties magically -- but how?
};

And then use it as follows:

new c().foo; // --> 'baz!'
new c().bar; // --> 555

Is there a method to accomplish this?

typescript

Answer 1

Answer №1

There isn't a perfect way to ensure complete type safety. Although, using Object.assign(this, props) in the constructor can help bring all properties into the instance. However, TypeScript may not fully understand the impact of this function on the type.

The downside is that manual casting will be necessary, which makes it less than ideal.

To simplify this process, you can create a generic function:

function makeClass<T>(props: T) {
  return class {
    constructor() {
      Object.assign(this, props);
    }
  } as { new (): T }
}

const C = makeClass({ foo: 'baz!', bar: 555 });
const c = new C();
console.log(c.bar); // returns without error
console.log(c.foo); // returns without error
console.log(c.nope); // generates an error

Take note of as { new (): T }, indicating that this value can be invoked with new to return an interface matching your props T.

This approach might become more complex if your class includes additional properties, but it's a good starting point.

Playground

Answer 2

There isn't a perfect way to ensure complete type safety. Although, using Object.assign(this, props) in the constructor can help bring all properties into the instance. However, TypeScript may not fully understand the impact of this function on the type.

The downside is that manual casting will be necessary, which makes it less than ideal.

To simplify this process, you can create a generic function:

function makeClass<T>(props: T) {
  return class {
    constructor() {
      Object.assign(this, props);
    }
  } as { new (): T }
}

const C = makeClass({ foo: 'baz!', bar: 555 });
const c = new C();
console.log(c.bar); // returns without error
console.log(c.foo); // returns without error
console.log(c.nope); // generates an error

Take note of as { new (): T }, indicating that this value can be invoked with new to return an interface matching your props T.

This approach might become more complex if your class includes additional properties, but it's a good starting point.

Playground

Is it possible to dynamically manage property assignments within a class expression?

Answer №1

Similar questions

A glitch was encountered during the execution of the ionic-app-scripts subprocess

Checkbox: Customize the appearance of the root element

Definition duplication is necessary for TypeScript object properties

Leveraging event listeners in conjunction with React's useEffect function

What steps are required to generate dist/app.js from a script file in my TypeScript project?

Encountering a TypeScript error when trying to establish a connection to MariaDB using node

Tips for integrating an arrow function as a property in a functional programming approach using JavaScript or TypeScript

Unable to detect tsc after installing globally within Windows Sandbox

Challenges with Spreading Props in TextField Component After MUIv4 Upgrade with TypeScript

Updating the array in React state does not work properly

The integration of ngx-translate with an HTTP interceptor is currently experiencing difficulties

Having trouble retrieving information from combineLatest in Angular?

Encountering difficulty invoking a component method from d3's call() function

What is the specific event type triggered by the onError event when utilizing an img tag?

What is the best way to manage data types using express middleware?

What are some ways to establish a connection with the store in components that are not using React

The use of BaseJQueryEventObject and JQueryEventObject is no longer recommended. What is the alternative to replace them?

Tips for passing configuration constants from HTML to a class in Angular 2 for reusing classes

Tips for minimizing Ant Design bundle size with TypeScript in a Next.js project using Less styles

``Using backticks to denote HTML syntax - Leveraging Google Charts to create