打字稿:具有相同变量的不同类别中的不同类型

时间:2019-11-26 12:56:45

标签: reactjs typescript

我正在使用与打字稿3.7.2交互:我有三个组成部分: “菜单组件”,“登录用户”和“已登录”。

在“菜单组件”中,我具有“用户”属性,可以定义此属性或将其设置为null:

interface Props {
    user: UserIF | null;
}

“菜单组件”检查是否定义了“用户”属性。如果未定义(空),则菜单将重定向到“登录用户”组件,否则将重定向到“已登录”组件。

现在,我想在组件中定义打字稿定义,如下所示:

“登录用户”:

interface Props {
    user: UserIF | null;
}

“已登录”

interface Props {
    user: UserIF;
}

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

如何告诉打字稿“登录”组件中只有一个定义的用户变量?

1 个答案:

答案 0 :(得分:0)

您需要具有两个单独的接口:

interface NotLoggedProps {
    user: null;
}

interface LoggedProps {
    user: UserIF;
}

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

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