在这种情况下如何声明类型

Question

我正在尝试为按钮声明类型。按钮将根据返回结果显示或不显示。

问题是，我不知道如何声明这种类型，因为它有很多返回属性。

此页脚按钮代码用于默认返回

interface footerButton{
text: string;
isEnabled: boolean;
}
function mapStateToProps(
state: AppState
): LessonDrawerStateProps {
let footerButton: footerButton | undefined << here is the problem
}
footerButton = (completedLessonIds.size > 1 && !currentUser) && {
text: "Save your progress",
isEnabled: true,
};

return { footerButton: footerButton }

正如你所看到的，我在声明mapStateToProps中的页脚按钮类型

当我将其定义为footerButton: footerButton | undefined时

这个程序给我这个错误

Type 'false | { text: string; isEnabled: true; }' is not assignable to type 'footerButton | undefined'.

所以我把它改成footerButton: footerButton | boolean

Type 'boolean | footerButton' is not assignable to type '{ text: string; isEnabled: boolean; } | undefined'.

这个程序又给我一个错误？那么在这种情况下我该怎么做呢

Answer 1

interface footerButton{
text: string;
isEnabled: boolean;
}
function mapStateToProps(
state: AppState
): LessonDrawerStateProps {
let footerButton: footerButton | undefined
}
if (completedLessonIds.size > 1 && !currentUser) {
footerButton = {
text: "Save your progress",
isEnabled: true,
};
}

return { footerButton: footerButton }

这应该行得通。

那么，问题出在哪里呢？当你使用这样的表达

footerButton = (completedLessonIds.size > 1 && !currentUser) && {
text: "Save your progress",
isEnabled: true,
};

如果条件是不通过，则会得到false。这个false实际上不是布尔值。它不可能是真的，只能是假的。但是，如果您像我上面所做的那样更改代码，您将拥有未定义的或您最初想要的对象。

Answer 2

如果您的按钮正在显示，但您只希望在特定情况下显示，请尝试使用变量和If(({}语句。创建一个布尔变量(比如buttonShow之类的(，只要你想显示按钮，你就可以使用if语句。有点像这样：

var buttonShow = false;
interface footerButton{
text: string;
isEnabled: boolean;
}
function mapStateToProps(
state: AppState
): LessonDrawerStateProps {
if(buttonShow){
let footerButton: footerButton 
}
}
footerButton = (completedLessonIds.size > 1 && !currentUser) && {
text: "Save your progress",
isEnabled: true,
};

return { footerButton: footerButton }

或者，您可以尝试键入null，这样就不会弹出未定义的错误。如果你不给事物一个值，它就会跳到undefined。但是如果你说例如"；var random=null&"；，那么你就不会得到错误。

祝你好运！