Using TypeScript to pass an entire object to a constructor

Question

Using TypeScript to pass an entire object to a constructor

I'm working with a TypeScript class:

export class Child {
  name:string;
  age:number;
}

I'm looking to restrict class instances to only have properties declared in the class.

For instance, if I retrieve an object from Firebase:

myFirebaseService.getChild(id).then(function(child){
  var currentChild = new Child(child);
})

So when the object is: {name:"ben", color:"db"}, I want the result to be:

currentChild = {"name":"ben"}

Because "color" is not a field of "child".

I attempted the following approach:

export class Child {
  name:string;
  age:number;

  constructor(tempChild:Child = null) {
    if (tempChild){
      for (var prop in tempChild) {
        this[prop] = tempChild[prop];
      }
    }
  }
}

But it doesn't work as expected. The "currentChild" still ends up with all fields attached to the class instance.

(Of course, I could use the following code:

export class Child {
  name:string;
  age:number;

  constructor(tempChild:Child = null) {
    if (tempChild){
      this.name = tempChild.name;
      this.age = tempChild.age;
    }
  }
}

, but since my actual class has numerous fields, I prefer a shorter solution)

typescript constructor copy-constructor

Answer 1

Answer №1

We are seeking:

To define class fields once
To incorporate methods within our class

Our suggested solution:

class Animal {
  name: string = 'default value';
  group: string = 'default value';

  constructor(data: Partial<Animal> = {}) {
    Object.assign(this, data)
  }

  echo() {
    return `My name is ${this.name}, I'm from: ${this.group}`;
  }
}

class Dog extends Animal {
  echo() {
    return super.echo() + ' from Dog class';
  }
}

const dog = new Dog({name: 'Teddy'});
console.log(dog.echo());

Animal - primary class

Dog - secondary class

All functionality operates smoothly without any TypeScript errors

Answer 2

We are seeking:

To define class fields once
To incorporate methods within our class

Our suggested solution:

class Animal {
  name: string = 'default value';
  group: string = 'default value';

  constructor(data: Partial<Animal> = {}) {
    Object.assign(this, data)
  }

  echo() {
    return `My name is ${this.name}, I'm from: ${this.group}`;
  }
}

class Dog extends Animal {
  echo() {
    return super.echo() + ' from Dog class';
  }
}

const dog = new Dog({name: 'Teddy'});
console.log(dog.echo());

Animal - primary class

Dog - secondary class

All functionality operates smoothly without any TypeScript errors

Answer 3

Answer №2

In my humble opinion, the most efficient way to construct your class instances from any object is through destructuring. This approach allows you to assign values to all fields while maintaining precise control over how to handle the absence of a field and which fields should be assigned to your class:

export class Child {
  name: string
  age: number

  constructor({ name = 'default name', age = 0 } = {}) {
    this.name = name
    this.age = age
  }
}

This method enables you to create instances from various types of objects or partial object literals. However, when using literals, it restricts adding extra properties, which aligns with your requirements:

const c0 = new Child({} as any /* Type assertion for Object also works */)
const c1 = new Child({}) // Using defaults for fields
const c2 = new Child() // No arguments passed, defaults used
const c3 = new Child({ name: 'a', age: 1 })
const c4 = new Child({ name: 'b', foo: 'bar' }) // Error due to additional 'foo' property

The resulting JavaScript code automates checks that would typically be performed manually:

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Child = (function () {
        function Child(_a) {
            var _b = _a === void 0 ? {} : _a, _c = _b.name, name = _c === void 0 ? 'default name' : _c, _d = _b.age, age = _d === void 0 ? 0 : _d;
            this.name = name;
            this.age = age;
        }
        return Child;
    }());
    exports.Child = Child;
});

Experiment on the playground to view the generated output!

Answer 4

In my humble opinion, the most efficient way to construct your class instances from any object is through destructuring. This approach allows you to assign values to all fields while maintaining precise control over how to handle the absence of a field and which fields should be assigned to your class:

export class Child {
  name: string
  age: number

  constructor({ name = 'default name', age = 0 } = {}) {
    this.name = name
    this.age = age
  }
}

This method enables you to create instances from various types of objects or partial object literals. However, when using literals, it restricts adding extra properties, which aligns with your requirements:

const c0 = new Child({} as any /* Type assertion for Object also works */)
const c1 = new Child({}) // Using defaults for fields
const c2 = new Child() // No arguments passed, defaults used
const c3 = new Child({ name: 'a', age: 1 })
const c4 = new Child({ name: 'b', foo: 'bar' }) // Error due to additional 'foo' property

The resulting JavaScript code automates checks that would typically be performed manually:

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Child = (function () {
        function Child(_a) {
            var _b = _a === void 0 ? {} : _a, _c = _b.name, name = _c === void 0 ? 'default name' : _c, _d = _b.age, age = _d === void 0 ? 0 : _d;
            this.name = name;
            this.age = age;
        }
        return Child;
    }());
    exports.Child = Child;
});

Experiment on the playground to view the generated output!

Answer 5

Answer №3

When working with class definitions in JavaScript, it's important to note that the member definitions made before the constructor may not be properly translated into Javascript by the compiler:

class Child {
    name: string;
    age: number;

    constructor() {
        this.name = "name";
    }
}

After compilation, you'll see that only the name member is retained and used when assigned.

If you need to access these members during runtime, one approach is to store them in an array within the class:

class Child {
    private static MEMBERS = ["name", "age"];

    name: string;
    age: number;

    constructor(tempChild: Child = null) {
        if (tempChild) {
            for (var prop in tempChild) {
                if (Child.MEMBERS.indexOf(props) >= 0) {
                    this[prop] = tempChild[prop];
                }
            }
        }
    }
}

To make this process more manageable, decorators can be utilized. Here's an example of using decorators for defining and accessing members:

function member(cls: any, name: string) {
    if (!cls.constructor.MEMBERS) {
        cls.constructor.MEMBERS = [];
    }

    cls.constructor.MEMBERS.push(name);
}

function isMember(cls: any, name: string): boolean {
    return cls.MEMBERS[name] != null;
}

class Child {
    @member
    name: string;

    @member
    age: number;

    constructor(tempChild: Child = null) {
        if (tempChild) {
            for (var prop in tempChild) {
                if (isMember(Child, prop)) {
                    this[prop] = tempChild[prop];
                }
            }
        }
    }
}

This implementation has not been tested, so its functionality can't be guaranteed. However, if you opt to use decorators, this setup includes most of what you would need.

Answer 6

When working with class definitions in JavaScript, it's important to note that the member definitions made before the constructor may not be properly translated into Javascript by the compiler:

class Child {
    name: string;
    age: number;

    constructor() {
        this.name = "name";
    }
}

After compilation, you'll see that only the name member is retained and used when assigned.

If you need to access these members during runtime, one approach is to store them in an array within the class:

class Child {
    private static MEMBERS = ["name", "age"];

    name: string;
    age: number;

    constructor(tempChild: Child = null) {
        if (tempChild) {
            for (var prop in tempChild) {
                if (Child.MEMBERS.indexOf(props) >= 0) {
                    this[prop] = tempChild[prop];
                }
            }
        }
    }
}

To make this process more manageable, decorators can be utilized. Here's an example of using decorators for defining and accessing members:

function member(cls: any, name: string) {
    if (!cls.constructor.MEMBERS) {
        cls.constructor.MEMBERS = [];
    }

    cls.constructor.MEMBERS.push(name);
}

function isMember(cls: any, name: string): boolean {
    return cls.MEMBERS[name] != null;
}

class Child {
    @member
    name: string;

    @member
    age: number;

    constructor(tempChild: Child = null) {
        if (tempChild) {
            for (var prop in tempChild) {
                if (isMember(Child, prop)) {
                    this[prop] = tempChild[prop];
                }
            }
        }
    }
}

This implementation has not been tested, so its functionality can't be guaranteed. However, if you opt to use decorators, this setup includes most of what you would need.

Using TypeScript to pass an entire object to a constructor

Answer №1

Answer №2

Answer №3

Similar questions

Why aren't enums that can be derived supported?

Error: Unable to locate sportsRecord due to missing function

Can someone provide guidance on effectively implementing this JavaScript (TypeScript) Tree Recursion function?

Having trouble with injecting string HTML into the head section in NextJS?

How can we track and record NaN values in JavaScript/TypeScript as they occur in real-time?

The enigma of TypeScript

Styling in Svelte/TS does not change when applied through a foreach loop

"Pairing AngularJS 2 with Vaadin for a winning combination

The data type 'string' cannot be assigned to the type 'SystemStyleObject | undefined' in the context of Next.js and Chakra UI

Creating a custom type declaration for .lottie files in Next.js

The process of transitioning to a different view through a button press

Changing the value within a nested object dynamically in Angular 6 during execution

Step-by-step guide on mocking a method within a method using JEST

Encountering issues with the dependency tree while trying to install npm packages

Is it possible for a typed function to access object properties recursively?

The insecure connection to http://bs-local.com:3000 has prevented access to geolocation

Angular: Issue encountered while attempting to differentiate an '[object Object]'. Arrays and iterables are the only permissible types for this operation

Utilize forRoot to pass configuration data

Is there a way to programmatically trigger a CodeAction from a VSCode extension?

Using Typescript to combine strings with the newline character