Coding style React & TS

• faire un type explicite pour les props de ses composants et toujours l'exporter
• pour les composants et pages, utiliser une fonction fléchée, ex: const Compo = () => {} (histoire de standardiser) et ne plus utiliser FC/FunctionalComponent

export const Compo = (props: Props) => <div>coucou</div>;

• pour les pages, bien utiliser (pour l'instant) le type NextPageWithLayout qui permettra de typer correctement la fonction getLayout sans vous casser le crâne à le faire vous même ; et exporter la page ensuite.

const MaPage: NextPageWithLayout = () => {}

// getLayout prend des children maintenant comme si c'était un composant normal
MaPage.getLayout = ({children}) => <BasicLayout>{children}</BasicLayout>;
export default MaPage;

• favoriser import { useState } from "react"; au lieu de React.useState

• ne pas faire import star => import * as React from "react"; 🙅

• si un composant n'a que children en props, utiliser PropsWithChildren ; aussi plus besoin de lui passer un type objet vide en generic PropsWithChildren<{}>, c'est maintenant pas défaut

• limiter vraiment au maximum l'utilisation de any. Dans un catch par exemple, il faut typer l'erreur en unknown et caster ou guarder ensuite en fonction de comment on l'utilise. Si jamais dans d'autres cas any est vraiment indispensable (dans un type complexe par exemple, ou dans un type extend) utiliser Any (avec un majuscule) venant de @common/utils/type.

• toujours renvoyer une error et pas autre chose (car JS peut throw n'importe quoi)

Exemple de gestion des erreurs dans un catch :

try {
  await compute();
} catch (error: unknown) {
  if(typeof error === "string") { // bad practice
    // message error
    handleMessageError(error);
  } else if (error instanceof PasContentError) {
    // known error
    handleBusinessError(error);
  } else if (error instanceof Error) {
    // other type of js error
   handleUnknownError(error);
  } else console.error("bad error object", error);
}