문제

import React from "react"
interface Props {}

interface CallbackProps {
  a: number
  b: string
}

interface CallbackReturn {
  c: boolean
}

const Test: React.FC<Props> = (props) => {
  const callback = React.useCallback<(props: CallbackProps) => CallbackReturn>(
    (props) => {
      const {a, b} = props

      return {
        c: true,
      }
    },
    []
  )

  const x = callback({ a: 1, b: "弐" })
  console.log('x.c:', x.c)

  return <></>
}
export default Test

useCallback 자체에는 generic로 타입을 할 수 있지만, 여기서 말한다 callback 변수가 된 함수에는 generic은 건네줄 수 없다.

callback<Generic>(...)  // こうしたい場合

해결

함수를 반환하는 useMemo로 전환합니다. 이렇게 하면 dependency도 사용할 수 쓸데없이 함수를 생성하는 것은 없고, generic을 건네줄 수 있는 함수도 된다.

import React from "react"
interface Props {}

interface CallbackProps<T> {
  a: T
  b: string
}

interface CallbackReturn {
  c: boolean
}



const Test: React.FC<Props> = (props) => {
  const callback = React.useMemo(() => function<T>(
    props: CallbackProps<T>
  ): CallbackReturn {
    const { a, b } = props

    return {
      c: true,
    }
  },
  [])

  const x = callback<boolean>({ a: false, b: "弐" })
  console.log('x.c:', x.c)

  return <></>
}
export default Test