Reactjs Typescript：使用相同变量的不同类中的不同类型

我正在使用react with typescript 3.7.2：我有三个组件： “菜单组件”、“登录用户”和“登录”

在“菜单组件”中，我有一个“用户”属性，该属性可以定义或为空：

interface Props {
    user: UserIF | null;
}

“菜单组件”检查是否定义了“用户”属性。如果未定义（null），则菜单将重定向到组件“登录用户”，否则将重定向到“登录”组件

现在，我想在组件中定义typescript定义，如下所示：

“登录用户”：

“已登录”

Typescript现在抱怨用户在“登录”组件中也可以为Null。但是Typescript不知道变量user在“Logged in”组件中不能为null

---

如何告诉typescript“登录”组件中只有一个已定义的用户变量？

您需要两个独立的界面：

interface NotLoggedProps {
    user: null;
}

interface LoggedProps {
    user: UserIF;
}

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

---

并在不同的组件中相应地使用它们。

什么是

UserIF

？它是一个对象吗？这是用户变量的定义。导出接口UserIF{firstName:string；lastName:string；}如果已为

user

声明了默认值（空对象）（在大小写中），则可以使用partial

user:partial如果用户内容是动态的，并且来自异步http请求，该怎么办？您不能动态更改两个接口…您永远不能以动态方式更改接口。每个泛型类型都转换为最终类型。泛型类型仅用于代码重用。异步调用也是运行时的，此时不存在类型。
interface Props {
    user: UserIF;
}

interface NotLoggedProps {
    user: null;
}

interface LoggedProps {
    user: UserIF;
}

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