javascript - 报错类型“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);