Typescript defining a state passed as a prop

Question

export interface ISideBarProps {
  open: any
  setOpen: any
}

export default function SideBar({ open, setOpen }: ISideBarProps) {
  return (
    <div
      className={`absolute left-0 top-0 h-screen w-[40vw] bg-gray-100 ${open ? "block" : "hidden"}`}
    >
      Sidebar
    </div>
  )
}

How would i define open and setopen properly as boolean states

Answer 1

you can use:

export interface ISideBarProps {
open:boolean,
setOpen:(open:boolean)=>void
}

Answer 2

Change the type of open and setOpen to boolean instead of any as below.

export interface ISideBarProps {
  open: boolean;
  setOpen: boolean;
}