angular typescript interface default value

Question

My interface :

export interface MapMarker{
    longitude: number,
    latitude: number,
    popupText: string
}

My component

mapMarker: MapMarker;

ngOnInit() {
    this.mapMarker.latitude = location.coords.latitude;
    this.mapMarker.longitude = location.coords.longitude;
    this.mapMarker.popupText = "Your current Location"
  }

this tells me that can't set latitude of undefined. I know why is that. It's because mapMarker has a type MapMarker but is undefined, because it's undefined by default. What should I do? if I try mapMarker: MapMarker = null; still wrong.

I also tried mapMarker: MapMarker = {}; which gives me following error = Type '{}' is missing the following properties from type 'MapMarker': longitude, latitude, popupText

I need the solution, but i don't want to use 'any' type.

What TS is telling you is correct, an empty object isn't a MapMarker. Why not create the object in that method too? — jonrsharpe
– jonrsharpe, Commented Feb 24, 2019 at 22:03
let data = {}; data.latitude = location.coords.latitude; this is also the error. so let data:any = {}; this works. but it's bad. — Nika Kurashvili
– Nika Kurashvili, Commented Feb 24, 2019 at 22:07

jo_va · Accepted Answer · 2019-04-23 11:34:30Z

If you don't want to create an object and assign default values every time, use a class with default values for its properties instead. If you don't specify the values, defaults values will be used according to your property types.

export class MapMarker {
    longitude: number = 0;
    latitude: number = 0;
    popupText: string = '';
}

Then you can simply create an instance of your class and every field will be correctly initialized:

mapMarker: MapMarker = new MapMarker();

If you want to keep your interface, just implement it in the class:

export interface IMapMarker {
    longitude: number;
    latitude: number;
    popupText: string;
}

export class MapMarker implements IMapMarker {
    longitude: number = 0;
    latitude: number = 0;
    popupText: string = '';
}

If some of your properties are optional, use the optional operator for them:

export interface IMapMarker {
    longitude?: number;
    latitude?: number;
    popupText?: string;
}

But then, you will always have to make sure the property is not null before using it.

Vikas · Accepted Answer · 2019-02-25 08:33:06Z

Classes and interfaces are powerful structures that facilitate not just object-oriented programming but also type-checking in TypeScript. A class is a blueprint from which we can create objects that share the same configuration properties and methods. An interface is a group of related properties and methods that describe an object, but neither provides implementation nor initialization for them.

Since both of these structures define what an object looks like, both can be used in TypeScript to type our variables. The decision to use a class or an interface truly depends on our use case: type-checking only, implementation details (typically via creating a new instance), or even both! We can use classes for type-checking and the underlying implementation

if you are interested only in type-checking the responses Interface is a good choice Furthermore, an interface is a virtual structure that only exists within the context of TypeScript. The TypeScript compiler uses interfaces solely for type-checking purposes. Once your code is transpiled to its target language, it will be stripped from its interfaces - JavaScript isn’t typed, there’s no use for them there.

Since interfaces do not exist in runtime there is no runtime cost!

Regarding the issue you are facing:
Use this

mapMarker: MapMarker={longitude: 0,latitude: 0, popupText: ''};

Ivan · Accepted Answer · 2019-02-24 22:27:36Z

2

There are at least two options:

1 Make every property of MapMarker optional

export interface MapMarker{
   longitude?: number,
   latitude?: number,
   popupText?: string
}

2 Use class

export class MapMarker {
    longitude: number = 0;
    latitude: number = 0;
    popupText: string = '';
}

3 Just use a plain object with default value

mapMarker: MapMarker =  {
    longitude: number = 0;
    latitude: number = 0;
    popupText: string = '';
}

answered Feb 24, 2019 at 22:27

Ivan

1,5951 gold badge16 silver badges28 bronze badges

Comments

Rakesh · Accepted Answer · 2019-02-24 22:25:04Z

1

Use ? for optional properties in typescript like following. I hope this is what you want.

export interface MapMarker{
    longitude?: number,
    latitude?: number,
    popupText?: string
}

answered Feb 24, 2019 at 22:25

Rakesh

4,2922 gold badges21 silver badges31 bronze badges

Comments

Ankush Jain · Accepted Answer · 2019-02-25 05:54:14Z

0

Simply make use of Type Assertion like below

mapMarker: MapMarker = {} as MapMarker;

or

mapMarker: MapMarker = <MapMarker>{};

This will tell the TypeScript compiler to treats this empty object {} as an object of MapMarker interface.

Note that this will just prevent you from compile-time error, not runtime.

Eventually, you have to add properties (i.e. latitude, longitude etc.) in your variable mapMarker before those properties are being used by rest part of the application.

edited Feb 25, 2019 at 5:54

answered Feb 25, 2019 at 5:49

Ankush Jain

7,2434 gold badges41 silver badges71 bronze badges

Collectives™ on Stack Overflow

angular typescript interface default value

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related