Typescript: Different Types in different classes with same variable

Question

I am using react with typescript 3.7.2: I have three components: "Menu Component", "Login User" and "Logged in".

In the "Menu Component" I have a "user" property, this property can be defined or null:

interface Props {
    user: UserIF | null;
}

The "Menu Component" checks if the "user" property is defined. If it is not defined (null) then menu redirects to the component "Login User" otherwise it redirects to the "Logged in" component.

Now I would like to define the typescript definition in the components as follows:

"Login user":

interface Props {
    user: UserIF | null;
}

"Logged in"

interface Props {
    user: UserIF;
}

Typescript is now complaining that user can also be Null in the "Logged in" component. But Typescript doesn't know that the variable user can't be null in the "Logged in" component.

How can I tell typescript that I have only a defined user varaible in the "Logged in" component?

This is the definition of user variable. export interface UserIF { firstName: string; lastName: string; } — Paul
– Paul, Commented Nov 26, 2019 at 13:05
If you have declared a default value (an empty object) for user (in a reducer or so), you can just use partial user: Partial<UserIf>; — kind user
– kind user, Commented Nov 26, 2019 at 13:06

Maciej Sikora · Accepted Answer · 2019-11-26 13:08:28Z

1

You need to have two separated interfaces:

interface NotLoggedProps {
    user: null;
}

interface LoggedProps {
    user: UserIF;
}

type MenuProps = NotLoggedProps | LoggedProps; // at Menu level user can be logged or not

And use them accordingly in different components.

answered Nov 26, 2019 at 13:08

Maciej Sikora

20.3k4 gold badges52 silver badges50 bronze badges

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

2 Comments

kind user Over a year ago

What if the user content is dynamic and comes from async http request? You can't dynamically change two interfaces...

Maciej Sikora Over a year ago

You cannot never change interface in dynamic way. Every generic type is transformed into final type. Generic types are only for code reuse. Also async call is runtime, types not exists at this point.

Collectives™ on Stack Overflow

Typescript: Different Types in different classes with same variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related