reactjs - Eroare de tip când se folosește o funcție cu tipul de returnare NextPage

Deci următorul cod funcționează:

const HomePage: NextPage = () => (
  <div>
    <div>HomePage</div>
  </div>
);

Cu toate acestea, aș dori să respect ghidul de stil Airbnb, care în acest caz vă cere să folosiți o funcție denumită, ajungând la acest cod:

function HomePage(): NextPage {
  return (
    <div>
      <div>HomePage</div>
    </div>
  )
}

Totuși, compilatorul afișează următoarea eroare pentru codul de mai sus:

Type 'Element' is not assignable to type 'NextPage<{}, {}>'.
  Type 'ReactElement<any, any>' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'.
    Type 'ReactElement<any, any>' is not assignable to type 'FunctionComponent<{}>'.
      Type 'ReactElement<any, any>' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any> | null'.ts(2322)

Pot să ocolesc eroarea fie neprecizând tipul, fie transformând returnul în as unknown as NextPage, ambele părând mai degrabă soluții provizorii decât o rezolvare corectă.

Care este modul corect de a folosi funcțiile numite în acest caz?

Răspuns #1

Cele două blocuri de cod nu sunt exact la fel.

În primul caz, folosești corect NextPage pentru a tipiza variabila HomePage, care este o funcție.

În al doilea caz, folosești incorect NextPage pentru a tipiza valoarea returnată a HomePage (care nu este aceeași cu funcția în sine).

Poți tipa valoarea returnată a HomePage în mai multe moduri, folosind JSX.Element, React.ReactElement sau React.ReactNode.

function HomePage(): JSX.Element {
  return (
    <div>
      <div>HomePage</div>
    </div>
  )
}

Rețineți că nu este nimic în neregulă să tipizați funcția așa cum ați făcut în primul bloc de cod și este de fapt modalitatea recomandată în Next.js. Aceasta oferă tipizări atât pentru props-urile componentei, cât și pentru valoarea returnată.

Răspunsul #2

folosește tipul React.FC în loc de NextPage