How to initialize child objects when using object in Typescript

Question

Still learning Typescript and I have this object

export class Marker {
    position: {
        lat: number,
        lng: number,
    };
    label: {
        color: string,
        text: string,
    };
    title: string;
    options: {
        animation: any,
    };
}

and in my code where I use it I do so like this, but marker.position is undefined

for (const ybEvent of this.Events) {
  const marker = new Marker();
  marker.title = ybEvent.name;
  marker.position.lat = ybEvent.latitude;
  marker.position.lng = ybEvent.longitude;
  marker.label.color = 'blue';
  marker.label.text = ybEvent.description;
  marker.options.animation = google.maps.Animation.BOUNCE;
  this.markers.push(marker);
}

What is the best way to initialize position, label, and options in this object?

first set marker.position = {} and then marker.position.lat = some value — Code Maniac
– Code Maniac, Commented Jul 10, 2020 at 5:31
if you want to go deeper than first level you need to initialise it with object, or you can use object literal marker.position = { lat : some value , ...} — Code Maniac
– Code Maniac, Commented Jul 10, 2020 at 5:32
is that the best way to create, initialize and use objects in ts? — chuckd
– chuckd, Commented Jul 10, 2020 at 5:32
IMO This has nothing to do with ts, it's just how js works. there are certain way to do it, one by manually initialising, object.assign, object literal. choice depends on your preference. — Code Maniac
– Code Maniac, Commented Jul 10, 2020 at 5:35

distante · Accepted Answer · 2020-07-10 06:27:05Z

First of all I would recommend you to use Typescript on strict mode.

When you use typescript with strict mode, an error will be show if a class member does not have any initialization:

I would also define the structure of each object (also inside objects).

interface Position {
    lat: number,
    lng: number,
}

interface Label {
        color: string,
        text: string,
};
interface Options {
        animation: any,
}

And if your Marker object does not require any internal logic, then I would also set it as an interface:

interface Marker {
    position: Position;
    label: Label;
    title: string;
    options: Options;
}

And your initialization could be something like:

for (const ybEvent of this.Events) {
    const position: Position = {
        lat: ybEvent.latitude,
        lng: ybEvent.longitude,
    };

    const label: Label = {
        color: 'blue',
        text: ybEvent.description,
    }

    const options: Options = {
        animation: google.maps.Animation.BOUNCE
    }

    const marker: Marker = {
        position,
        label,
        options,
    }

    this.markers.push(marker);
}

Or without intermediate objects:

for (const ybEvent of this.Events) {

    const marker: Marker = {
        position: {
            lat: ybEvent.latitude,
            lng: ybEvent.longitude,
        },
        label: {
            color: 'blue',
            text: ybEvent.description,
        },
        options: {
            animation: google.maps.Animation.BOUNCE
        }
    }

    this.markers.push(marker);
}

Keep in mind, the idea of Typescript is to have type safety. If you initialize a object in this way myObject = {} it does not have any type information.

Collectives™ on Stack Overflow

How to initialize child objects when using object in Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related