I have these 2 components:

DraggableGameStart

import DraggableGameAnswers from './DraggableGameAnswers';
import { useRef } from 'react';

function DraggableGameStart() {
    const draggableGame = useRef<HTMLDivElement>(null);

    return (
        <div className="draggable-game-content">
            <div className="draggable-game" ref={draggableGame}>
                    <DraggableGameAnswers elementBounds={draggableGame}/>
                </div>
            </div>
        </div>
    );
}

export default DraggableGameStart;

and DraggableGameAnswers

import { RefObject } from 'react';
import { useEffect } from 'react';

type DraggableGameAnswersProps = {
    elementBounds: RefObject<HTMLDivElement>
}

function DraggableGameAnswers(props: DraggableGameAnswersProps) {
    let boundsArray: Array<number>[];
    useEffect(
        () => 
        boundsArray.push(props.elementBounds.current?.getBoundingClientRect().top)
    )  
    
    return (
        <div className="draggable-game-answers">
            test
        </div>
    );
}

export default DraggableGameAnswers;

but I get some errors:

Type number is not assignable to type 'void | Destructor' ;
Argument of type 'number | undefined' is not assignable to parameter of type 'number[]'.
  Type 'undefined' is not assignable to type 'number[]'.

and I can't really understand why.

Why are those errors being thrown and how can I fix them?

Edit:

I changed to this line according to a comment

let boundsArray: Array<number>;

and nothing changed just the second error changed to this:

Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'.

CodePudding user response：

This error is important for you to read ad understand.

Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'.

You'll notice that this value:

props.elementBounds.current?.getBoundingClientRect().top

Will not always be a number. If the current property is undefined then you get undefined instead. That's why this value has a type of number | undefined.

And you are pushing that to a an array of numbers, which will not accept undefined, so you get this error.

To fix it, you simply have to check if the value is not null or undefined before pushing it to the array.

    let boundsArray: Array<number>;
    useEffect(() => {
      const value = props.elementBounds.current?.getBoundingClientRect().top
      if (value != null) {
        boundsArray.push(value) // works
      }
    })  

Working example

CodePudding user response：

That error usually means you're passing a prop that doesn't fit the typescript interface you've defined for the component. I think what you're looking for in this case is forwarded refs, instead of passing a ref as a normal prop. It might look something like:

import { React, useEffect } from 'react';

const DraggableGameAnswers = React.forwardRef((props, ref) {
    let boundsArray: Array<number>[];
    useEffect(
        () => 
        boundsArray.push(ref.current?.getBoundingClientRect().top)
    )  
    
    return (
        <div className="draggable-game-answers">
            test
        </div>
    );
})

export default DraggableGameAnswers;

and then calling it like <DraggableGameAnswers ref={draggableGame}/> might at least point you in a different direction, if it doesn't solve the problem.