Question

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

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

interface Props {
    user: UserIF | null;
}

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

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

“登录用户”：

interface Props {
    user: UserIF | null;
}

“已登录”

interface Props {
    user: UserIF;
}

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

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

Answer 1

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

interface NotLoggedProps {
    user: null;
}

interface LoggedProps {
    user: UserIF;
}

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

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

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

1 个答案: