Typescript two interfaces referencing each other, is it possible?

Question

I am currently having a problem where I have two interfaces, UserProfile & Interest. The code is as follows for the two interfaces:

export default interface UserProfile {
    userProfileId: string,
    rep: number,
    pfpUrl: string,
    bio: string,
    experience: "beginner" | "intermediate" | "expert",
    country: string,
    height: number,
    weight: number,
    age: number,
    createdAt: Date,
    updatedAt: Date,
    userId: string,
    interests: Interest[]
}

export default interface Interest {
    interestId: string;
    name: string;
    createdAt: Date;
    updatedAt: Date;
    UserProfiles: UserProfile[]
}

As shown both has a many to many relationship with each other. The problem is that an error occurs stating that 'Interest' cant be found maybe because it has not been initialized yet. If that is the case how would we solve such problem? I am just matching the structure of what my API returns. My API returns those structure when fetching for either UserProfile or Interest

Brandon · Accepted Answer · 2023-01-10 15:53:26Z

3

The issue is that you're exporting both as default. Make one or both of your interfaces a regular named export and your problem should be solved.

answered Jan 10, 2023 at 15:53

Brandon

4162 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jmsandiegoo Over a year ago

Thank you! Why did I not see that!

Brandon Over a year ago

No problem! Please don't forget to accept the answer so that others know the problem is solved :)

jmsandiegoo Over a year ago

Sure, just have to wait for a few more minutes to be able to do so.

Collectives™ on Stack Overflow

Typescript two interfaces referencing each other, is it possible?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related