I'm trying to find what to type React.createRef as. Header is a custom ponent. header.current always says

(property) React.RefObject.current: unknown Object is of type 'unknown'.

I can set it to type <any> but that's the easy way out. How do I get Typescript to play nice and stop plaining.

Example: React.createRef<any>()

Fully code:

   const header = React.createRef();
    const { container } = render(
      <Header{...props} headerRef={header} />,
    );
    const el = header.current.getButtonElement("button");

I've even tried setting it to a HTMLDivElement which is what it returns.

const header = React.createRef<HTMLDivElement>();

but the below still gives me an error: (property) React.RefObject.current: HTMLDivElement | null Object is possibly 'null'.

const el = header.current.getButtonElement("button");

I'm trying to find what to type React.createRef as. Header is a custom ponent. header.current always says

(property) React.RefObject.current: unknown Object is of type 'unknown'.

I can set it to type <any> but that's the easy way out. How do I get Typescript to play nice and stop plaining.

Example: React.createRef<any>()

Fully code:

   const header = React.createRef();
    const { container } = render(
      <Header{...props} headerRef={header} />,
    );
    const el = header.current.getButtonElement("button");

I've even tried setting it to a HTMLDivElement which is what it returns.

const header = React.createRef<HTMLDivElement>();

but the below still gives me an error: (property) React.RefObject.current: HTMLDivElement | null Object is possibly 'null'.

const el = header.current.getButtonElement("button");

• javascript
• reactjs
• typescript

• Passing HTMLDivElement is correct, however the issue is, you can't call header.current directly afterwards, because the header.current can be null. It's only once the associated div element has mounted, will header.current have a reference to that element. Where are you using const el ? – user2340824 Commented Jun 4, 2020 at 21:08
• I'm calling it in a unit test. If I use <any> then ref works but when I use HTMLDivElement it doesn't – me-me Commented Jun 4, 2020 at 21:42

1 Answer 1

This makes sense. TypeScript is trying to warn you that calling getButtonElement on something that MIGHT be undefined is "dangerous". You can work around this by refining the type first, like this:

const header = React.createRef<HTMLDivElement>();

// In test
const currentHeader = header.current;
if (!currentHeader) {
    // Handle the case where header isn't set yet
}

currentHeader.getButtonElement("button"); // At this point TypeScript knows currentHeader can't be null so the type check passes