Comment typer une application React avec TypeScript

TypeScript est un superset de JavaScript permettant de profiter des bénéfices d’un langage typé statiquement : remonter rapidement des erreurs de structure directement dans votre IDE, gagner du temps grâce à une auto-complétion dont il est difficile de se passer ensuite, fournir une sorte de documentation sur les structures de données utilisées dans le code… et cette liste de supers avantages n’est pas exhaustive !

Typer un composant React

Certains packages npm incluent leur types directement dans le package principal. Ce n’est pas le cas de React. Vous devrez donc installer @types/react et @types/react-dom pour profiter de la puissance de TypeScript avec React.

Notez que si vous initialisez un useState sans spécifier le type, sa valeur sera quand même devinée par TypeScript. Puisqu’ici on donne un tableau vide comme valeur par défaut, il est nécessaire de le typer explicitement :

Typer un Styled component

Comme pour React, il sera nécessaire d’installer @types/styled-components pour pouvoir typer les props de vos styled components en toute sérénité :

Typer une page Next.js

Si vous créez un composant page pour Next.js, utilisez NextPage de la même manière que vous utiliseriez React.FC. Tout simplement.

Ainsi, vous profiterez de l’auto-complétion et de la vérification des types pour toutes les méthodes spécifiques aux pages Next.js. Peut être même que vous découvrirez d’obscures fonctions super pratiques grâce à l’auto-complétion !

Typer un composant

Par défaut une fonction qui renvoit du JSX sera considéré comme un composant.

type Props: {
  start: number
}
function Counter ({start}: Props) {
  return <div>Hello World</div>
} 

Si votre composant peut recevoir des enfants, alors vous pouvez utiliser le type PropsWithChildren

type Props: PropsWithChildren<{ 

        start: number 

}>

Les hooks

Les hooks sont utilisable avec un générique pour indiquer le type de valeur qu’ils vont gérer mais il est inféré de base par les paramètres.

const [n, setN] = useState(3) // Le type sera automatiquement un nombre 

const [i, setI] = useState<number>() // Le type sera number | undefined

Pour les ref il faudra penser à mettre une valeur null par défaut pour qu’il puisse être inclu dans la prop ref

const ref = useRef<HTMLButtonElement>(null)

On peut aussi utiliser le type RefObject<T> pour représenter un objet de type ref.

Typer les composants

Vous avez plusieurs types qui sont intéréssant en connaitre en fonction de certaines situation.

• ReactNode, permet de représenter un noeud (un morceau de JSX, une chaine, null ou undefined)
• JSX.IntrinsicElements est un type interne qui permet de représenter tous les éléments HTML acceptés par React. On peut par exemple utiliser keyof JSX.IntrinsicElements si on veut qu’une props accepte un tag HTML.
• ComponentType<Props> représente un composant (une fonction ou une class) qui pourra être utilisé comme élément JSX. On peut ajouter un générique pour définir les props qui sont attendues