报错类型“never”上不存在属性“childFocusFn”。ts(2339)，如何进行避免呢？

Question

我尝试使用 typescript创建一个 forwardRef + useImperativeHandle的demo示例：
demo如下：

import { forwardRef, useState, LegacyRef, useRef, Ref, createRef, useImperativeHandle } from 'react'
import './App.css'

//#region 子组件

const ChildComp = forwardRef((props, ref) => {

    const childRef = createRef<HTMLInputElement>() 

    useImperativeHandle(ref, () => ({
      childFocusFn: () => {
        childRef.current?.focus()
        console.log("childFocusFn called.")
      }
    }))

    return <>
      <input defaultValue="我是子组件" type='text' ref={childRef}></input>
    </>
  }
)

//#endregion

function App() {
  const ref = useRef(null)

  const clickFn = () => {
    if(ref.current) {
      ref.current.childFocusFn()  // 这里报错：类型“never”上不存在属性“childFocusFn”。ts(2339)
    }
  }

  return (
    <>
     <ChildComp ref={ref}></ChildComp>

     <button onClick={clickFn}>点击调用子组件方法</button>
    </>
  )
}

export default App

但是见报错结果：

类型“never”上不存在属性“childFocusFn”。ts(2339)

请问这个应该如何做才能避免呢？

Answer 1

 const ref = useRef<{ childFocusFn: () => void }>(null);

Answer 2

更建议在子组件文件中定义好ref类型并导出, 在父组件中导入使用

import React, { forwardRef, useState, LegacyRef, useRef, Ref, createRef, useImperativeHandle } from 'react'

//#region 子组件
export type ChildCompRef = {
    childFocusFn(): void
}

const ChildComp = forwardRef<ChildCompRef>((props, ref) => {

    const childRef = createRef<HTMLInputElement>()

    useImperativeHandle(ref, () => ({
        childFocusFn: () => {
            childRef.current?.focus()
            console.log("childFocusFn called.")
        }
    }))

    return <>
        <input defaultValue="我是子组件" type='text' ref={childRef}></input>
    </>
}
)

//#endregion


function App() {
    const ref = useRef<ChildCompRef>(null)

    const clickFn = () => {
        if (ref.current) {
            ref.current.childFocusFn()
        }
    }

    return (
        <>
            <ChildComp ref={ref}></ChildComp>
            <button onClick={clickFn}>点击调用子组件方法</button>
        </>
    )
}

export default App