SBB SBB - 5 months ago 53
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?


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..


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 ={
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() parentRuleData: RuleData[] = [];
as well as the
toFormGroup(data: RuleData)
toFormGroup(data: RuleData[])
, the
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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download