SBB SBB - 23 days ago 7
TypeScript Question

Angular2 warnings when exporting interfaces from own file

I have about 5 interfaces that I am exporting and needing to use across multiple components. These interfaces are all related as each of them include / reference one of the others as an array of data.

Here is an example:

export interface ParentData {
UIVersion: number;
VersionID: number;
Rule: RuleData[];
}

export interface RuleData {
RuleParentID: number;
RuleVersionID: number;
MappedValue: number;
ProcessingOrder: number;
KeyID: number;
Value: string;
IsRuleRetired: boolean;
UserImpactCount: number;
Attribute: AttributeData[];
}

export interface AttributeData {
AttributeID: number;
AttributeName: string;
OperatorID: number;
OperatorName: string;
SQLOperator: string;
AttributeValue: ValueData[];
}

export interface ValueData {
RuleDetailID?: number;
AttrValue: number;
Value: string;
IsValueRetired: boolean
}


I created an interface file where I included all of these and then imported them into my components that use them.

When doing this, I get errors / failure to compile saying that they are missing or have no exported member.

However, if I include all 5 of them like the example in each component individually, it compiles, just throws warnings such as
"export 'ValueData' was not found in './../../../example.component
.

Are there any issues with exporting interfaces that reference each other being contained in their own file and imported into the component?

UPDATE:

I restarted the server after getting all of the component based interfaces removed and replaced by the import file. It compiled successfully, however, I get a warning per interface that is including an array of another interface.

export 'ValueData' was not found in
export 'AttributeData' was not found in
export 'RuleData' was not found in


I suppose this could be ignored for now assuming the definitions are actually there and typescript is just being weird..

UPDATE 2:

These warnings may be because I am not initializing the array?

@Input() parentRuleData: RuleData; // Rules Data

ngOnInit() {
this.ruleFormGroup = this.toFormGroup(this.parentRuleData);
}

private toFormGroup(data: RuleData) {
const formGroup = this._fb.group({
RuleParentID: [ data.RuleParentID ],
RuleVersionID: [ data.RuleVersionID ],
MappedValue: [ data.MappedValue],
ProcessingOrder: [ data.ProcessingOrder ],
KeyID: [data.KeyID ],
Value: [data.Value],
IsRuleRetired: [data.IsRuleRetired],
UserImpactCount: [data.UserImpactCount]
});

return formGroup;
}


However, if I change the
Input
to
@Input() parentRuleData: RuleData[] = [];
as well as the
toFormGroup(data: RuleData)
to
toFormGroup(data: RuleData[])
, the
ngOnInit
and
toFormGroup
methods throw errors:

Argument of type 'RuleData[]' is not assignable to parameter of type 'RuleData'.

Answer Source

On your last interface you are missing semicolon

export interface ValueData {
    RuleDetailID?: number;
    AttrValue: number;
    Value: string;
    IsValueRetired: boolean; <----
}

Additionally, seems like known issue

https://github.com/angular/angular-cli/issues/2034