如何使用 react 和 typescript 修复 boolean 类型或未定义的错误参数？

Question

i am getting the error

"argument of type boolean or undefined isnt assignable to parameter of type boolean. type undefined is not assignable to type boolean"

when i am passing prop from child to a usehook like below,

below is my code,

function Parent() {
    const [isDialogOpen, setDialogOpen] = React.useState(false);
    return (
        <Wrapper>
            <DialogComponent isDialogOpen={isDialogOpen}                     setDailogOpen={setDialogOpen}/>
         </Wrapper>
    );
}

interface ChildComponentProps {
    isDialogOpen: boolean,
    setIsDialogOpen: any,
}

function ChildComponent ({isDialogOpen, setIsDialogOpen} : ChildComponentProps) {
    const count= 10;
    useSomehook(isDialogOpen, count); //error here
    return (
        <Wrapper>
            <div>somedivs</div>
            {isDialogOpen && <Overlay/>}
        </Wrapper>
    );
}

i have useSomehook defined in other file like below,

export function useSomehook(enabled: boolean, count:number) {
    React.useEffect(() => {
        if (enabled) {
            trigger(count);
        }
    }, [enabled, count, trigger]);
}

I am new to using typescript. i am not sure how to fix this error. could someone help me with this. thanks.

Answer 1

You have a useState using a boolean. In typescript you have to be sure that whatever variable you pass as a boolean in this case can't be undefined.

There are multiple solutions, but a quick fix would be to fix you component like this.

function ChildComponent ({isDialogOpen, setIsDialogOpen} : ChildComponentProps) {
    const count= 10;
    useSomehook(isDialogOpen !== undefined ? isDialogOpen : false, count); //error here
    return (
        <Wrapper>
            <div>somedivs</div>
            {isDialogOpen && <Overlay/>}
        </Wrapper>
    );
}

This makes sure that if isDialogOpen is not undefined, we will use that value, otherwise we use the boolean "false". You can edit this to your liking of course.