React.useImperativeHandle() を使った時の型定義

Function Component からメソッドを生やしたい時に、useImperativeHandleという hooks を利用するが、その際にどう型をつければ良いのかわからなかったので調べた。

コード

// React　17.0.2

type Props = {}

type SwipableCardHandle = {
  swipeRight(): void
  swipeLeft(): void
  swipaBack(): void
}

const SwipableCard = forwardRef<SwipableCardHandle, Props>(props, ref) => {
  useImperativeHandle(ref, () => ({
      swipeRight() { ... },
      swipeLeft() { ... },
      swipeBack() { ... }
    }))
    
  return (...)
}

const Swiper = () => {
  const swipeCardRef = useRef<SwipableCardHandle>(null)
  
  const handleSwipeLeft = () => swipeCardRef?.current?.swipeRight()
  const handleSwipeRight = () => swipeCardRef?.current?.swipeLeft()
  const handleSwipeBack = () => swipeCardRef?.current?.swipeBack()
  
  return (
    <div>
      <SwipableCard ref={swipeCardRef} />
    </div>
  )
}

参考記事

• https://stackoverflow.com/questions/62210286/declare-type-with-react-useimperativehandle