Как правильно описать компонент через тип?

Question

[MishaXXL]

Как реализовать подобную логику, чтобы всею типизацию компонента или функции взял на себя тип или интерфейс?

type TCountBtn = ({incNum: () => void, num: number}) => FC

const CountBtn: TCountBtn = ({ incNum, num }) => {
    return(
      <div>
        <p>{num}</p>
        <button onClick={() => incNum()}>
          Btn {num}
        </button>
      </div>
    )
}

Comments

[Lynn «Кофеман»]

Что-то непонятно в чём именно вопрос

[Lynn «Кофеман»]

Ну, кроме того что надо правильно указать сигнатуру функции:

type TCountBtn = (props: {incNum: () => void, num: number}) => FC;

[WbICHA]

Lynn «Кофеман», и вернуть РеактНоду, а не ФЦ.)

[MishaXXL]

WbICHA,спасибо, подскажите еще пожалуйста, если у меня компонент через функцию создан или в мемо, как мне подобным способом протипизировать их?
У меня только через интерфейс получается свойствам тип присвоить
А хотелось бы вынести всю типизацию компонента из пропсов сразу к компоненту, как с тайпом

interface ICountBtn {
  setNum: () => void;
  num: number;
}

type TCountBtn = (props: {
  setNum: () => void, 
  num: number
}) => React.ReactElement

function CountBtn({ setNum, num }: ICountBtn ) {
  return(
    <div>
      <p>{num}</p>
      <button onClick={() => setNum()}>
        Click
      </button>
    </div>
  )
}

const CountBtn = memo(
function CountBtn({ foo, footer }: ICountBtn ) {
  console.log('render')
  return(
    <div>
      <p>{footer}</p>
      <button onClick={() => foo()}>
        Click
      </button>
    </div>
  )
})

Или в данном случае надо делать так?

const CountBtn: TCountBtn = ({ setNum, num }) => {
    return(
      <div>
        <p>{num}</p>
        <button onClick={() => setNum()}>
          Click
        </button>
      </div>
    )
}

const CountBtn2 = memo(CountBtn)

[WbICHA]

MishaXXL, const C: NamedExoticComponent<Props> = ...

[MishaXXL]

WbICHA, объясни пожалуйста, не совсем понял

[WbICHA]

MishaXXL, эмм... А что именно непонятно?

const CountBtn: NamedExoticComponent<ICountBtn> = memo(...)