Typescript: unable to initialize property from object property in constructor

Question

In a Angular application I have defined a typescript class Foo and a class Product.

export class Product {

    title: string

    constructor(title: string) {
    
        this.title = title
    }
}

and

import { Product } from ... // importing Product
export class Foo {

    product: Product
    productTitle: string

    constructor(product: Product) {
    
        this.product = product  // works fine, I can access product.title on Foo object
        this.productTitle = product.title   // productTitle is null
    }
}

The class Foo is used when a HTTP response of remote objects from a REST call is translated into an array of Foo objects.

this.httpHelper.post('/api/get/foos', form).subscribe(response => {
    if (response) {
        this.foos = response.resultObject['remoteFoo'] as Foo[]
        ...

I would like to know, why the property product in the Foo objects is initialized just fine, but productTitle resolves to null?

I want Foo to just have the productTitle, and not a product like its remote equivalent has.

Cheers, Kjeld

SOLUTION: with help of @Chris Hamilton's answers here below.

I created an AbstractFoo and a RemoteFoo class, and had Foo and RemoteFoo both extend from AbstractFoo. The latter contains all common properties. Foo has a productTitle property, and a constructor taking a RemoteFoo. And RemoteFoo has a product property (which in turn is a Product class, having a title property).

const remoteFoos: RemoteFoo[] = response.resultObject['remoteFoos'];

... gets a collection of RemoteFoo objects, and

this.foos = remoteFoos.map((remoteFoo) => new Foo(remoteFoo));

... creates a collection of local Foo objects. The constructor of Foo initializes its productTitle with remoteFoo.product.title .

Chris Hamilton · Accepted Answer · 2022-04-12 09:13:44Z

1

My guess is you think that as Foo[] calls the Foo constructor. It does not, that's a typecast only used for linting and type checking when compiling.

You'll need to call the constructor for each element of the array. You can use the map method of Array for this.

Assuming response.resultObject['remoteFoo'] is an array of Product:

this.httpHelper.post('/api/get/foos', form).subscribe(response => {
    if (response) {
        const products: Product[] = response.resultObject['remoteFoo'];
        this.foos = products.map((foo) => new Foo(foo));

Although when you said "property product in the Foo objects is initialized just fine" I'm guessing that the products are actually nested in an object.

So maybe:

this.httpHelper.post('/api/get/foos', form).subscribe(response => {
    if (response) {
        const products: { product: Product }[] = response.resultObject['remoteFoo'];
        this.foos = products.map((foo) => new Foo(foo.product));

Depends on what response.resultObject['remoteFoo']; actually is.

Since you said response.resultObject['remoteFoo']; is of type Foo[], the second solution would work, but this is more concise:

this.httpHelper.post('/api/get/foos', form).subscribe(response => {
    if (response) {
        const foos: Foo[] = response.resultObject['remoteFoo'];
        this.foos = foos.map((foo) => new Foo(foo.product));

edited Apr 12, 2022 at 9:13

answered Apr 12, 2022 at 7:08

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kjeld Over a year ago

Thank you, I did assume the response was converted into an array of Foo objects, and constructors were used to initialize those objects. To be more clear: the response contains a collection of Foo objects, who each contain a Product object (amongst others). I would like that collection to be converted to a local array/collection of Foo objects, containing Product objects. What would the mapping look like in that case? I cannot currently derive this scenario from your examples. Thanks

Chris Hamilton Over a year ago

The second one should work fine, you can switch { product: Product }[] to Foo[] if you prefer. I edited my answer with a more concise solution.

Kjeld Over a year ago

It still does not work as expected. It seems that this way, when mapping, 'foo' is already a Foo object (by declaration); and that object is mapped to a new Foo object by its product property. I do not want Foo to have a product property. I want it to just have the productTitle property, and have that property populated by the product section in the remoteFoo that is in the response. I.o.w. I want 'foo' to be a 'remoteFoo', and then we can do new Foo(remoteFoo.product) to set productTitle = product.title .

Kjeld Over a year ago

However, it seems that I can achieve exactly that when I do this: const remoteFoos = response.resultObject['remoteFoo']; this.foos = remoteFoos.map((remoteFoo) => new Foo(remoteFoo.product)); The one thing left that now bugs me is that remoteFoo in real life has many properties that need to be fed to the Foo constructor. Is there some way to avoid having to do that, magically feeding all properties to the constructor?

Chris Hamilton Over a year ago

So you need to define a separate type for the data received from the api, as the two do not have the same properties. For passing properties to the constructor, you can just pass the entire object to the constructor and pull what properties you need from it.

|

Collectives™ on Stack Overflow

Typescript: unable to initialize property from object property in constructor

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related