Property 'current' does not exist on type 'number | MutableRefObject (when number not set as its type)

36 Views Asked by At

I'm getting this TypeScript error:

Property 'current' does not exist on type 'number | MutableRefObject

It's occuring on the settings ref below.

I never set settings to a number and never gave the number type, so I don't know why it thinks it could be a number, it should only be a ref.

const useDatGui = (controls) => {
  const [updates, setUpdates] = useState(0)
  const loaded = useRef(false)
  const settings = useRef({
    
      mode: 'scale',
      roomWidth: defaultRoom.width,
      roomDepth: defaultRoom.depth,
      roomHeight: defaultRoom.height,
      boxWidth: 0.4,
      boxDepth: 0.3,
      boxHeight: 0.2,
    
  })
  useEffect(() => {
    if (typeof window != 'undefined' && !loaded.current) {
      const gui = new GUI()
      controls.forEach(([setting, { type, options }]) => {
        gui.add(settings.current, setting, options).onChange(() => {
          console.log('changed', setting)
          setUpdates(upd => (upd + 1) % 2)
        })
      })
      loaded.current = (true)
      return () => {
        gui.destroy()
        loaded.current = false
      }
    }
  }, [])
  return [updates, settings]
}
export default function Page() {

  const { selected, setState } = useContext(MyContext);
  const [updates, settings] = useDatGui([["mode", { type: "select", options: ["scale", "rotate", "translate"] }],
  [
    "roomHeight", { type: "range", options: 1 }
  ],
  [
    "roomWidth", { type: "range", options: 1 }
  ],
  [
    "roomDepth", { type: "range", options: 1 }
  ],
  [
    "boxDepth", { type: "range", options: 0.1 }
  ], [
    "boxWidth", { type: "range", options: 0.1 }
  ], [
    "boxHeight", { type: "range", options: 0.1 }
  ]])
  const wall = useMemo(() => {
    if (settings.current) {
      return ({
        ...defaultRoom,
        height: settings.current.roomHeight,
        width: settings.current.roomWidth,
        depth: settings.current.roomDepth,
      })
    }
  }, [defaultRoom, settings])
  const box = {
    width: settings.current.boxWidth,
    depth: settings.current.boxDepth,
    height: settings.current.boxHeight
  }
  //...
  return ...

Why does it add number as a possible type of settings?

0

There are 0 best solutions below