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?