angular 2 export interface initialize inside component issue

Question

i am having kind of a goofy problem. inside my component i export some interfaces and whe i try to use them inside my component if i dont initialize them i am geting issues about undifined which i totaly normal. Is these any other way to init them without writting all that code again?

export interface Data {
    Code: string;
    Date: Date;
    OccurredDate: Date;
    Person: Person;
    Vehicle: Vehicle;
    Policy: Policy;
    OccurredLocation: OccurredLocation;
    Phones: Phone[];
    Notes: string;
    Actions: Action[];
}

export interface RootObject {
    Data: Data[];
    IsSuccessful: boolean;
    Messages: any[];
}

these are 2 of my interfaces and i init them like this:

export class SubscriberComponent {
        public myRootObject: RootObject = {
            Data: this.myData[0],
            IsSuccessful: true,
            Messages: null
        }
        public myData: Data ={
            Code: '',
            Date: new Date(),
            OccurredDate: new Date(),
            Person: null,
            Vehicle: null,
            Policy: null,
            OccurredLocation: null,
            Phones: null,
            Notes: '',
            Actions: null,
    }
}

when i try to use myData.Code if i dont initialize it with '' i get and error. any other way to init my templates without all that much code?

What is the exact error message? How do you use it to get the error? — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 30, 2017 at 9:51
inside template {{myData.Code}} if dont initialize it i get an error in [at-loader] ./ClientApp/app/components/SubscriberApp/subscriber.component.ts:44:20 TS2448: Block-scoped variable 'myData' used before its declaration. — kostas
– kostas, Commented Mar 30, 2017 at 9:54
You cannot change the way you initialize interface. But maybe all those parameters can be optionnal, or maybe you don't need a default value... — n00dl3
– n00dl3, Commented Mar 30, 2017 at 9:54

AVJT82 · Accepted Answer · 2017-03-30 12:08:08Z

The short answer of how to initialize an object of type Data would be:

myData = {} as Data;

But a bit more explanation... Interfaces are more of a "help" for the programmer himself, as well as the IDE, that can "warn" you with squiggly lines and errors that you are now assigning wrong type of values.

During runtime, this doesn't really matter though. Typescript is a superset of JavaScript, and TS will be compiled as JS during runtime, and in JS there are no interfaces.

To present this regarding interfaces, we could say we have an interface like so:

interface Foo {
  bar: number
  bas: string
}

and a object initialized like so: foo = {} as Foo;

Since using an Interface your IDE is helpful and warns you of assigning wrong type of data to foo.bar. BUT this would still run and assign the object to foo.bar:

this.foo.bar = { id:1, name: "name" };

So as mentioned on top of answer, if you do not need default values for your Data object, the proper way to initialize the object would be:

myData = {} as Data;

this will solve your undefined issue, since the object is initialized as an empty object. So unless you need default values, you can see it's pretty useless to initialize the properties, as the even the type of the properties can be overwritten.

Here's a sample of how you can overwrite a string value with an object just to have some reference on what I explained above :)

Demo

Collectives™ on Stack Overflow

angular 2 export interface initialize inside component issue

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