Photo de Timothy Cuenat sur Unsplash

J’ai un side-projet en React qui fête ses 2 ans en ce joyeux 26 mars 2024 ! (ça grandit si vite!)

Je l’avais démarré dans le but d’appliquer les riches enseignements vus lors de la formation Progressive Web Apps en React suivie chez Delicious Insights.

J’ai eu envie de me lancer dans l’apprentissage de TypeScript cette année et souhaitais l’appliquer à ce projet.

Ce projet étant utilisé aujourd’hui et ayant une certaine quantité de fonctionnalités, il était exclu de le refaire from scratch. Je me suis motivée en me disant que l’exercice de migration serait plus riche qu’une refonte.

Voici donc l’histoire de comment j’ai commencé à migrer un side-project React sur Typescript.

TypeScript ?

Pour la faire courte, c’est une couche qu’on peut appliquer sur tout projet Javascript afin de renforcer le typage des variables et de faire de la vérification statique des types (c’est-à-dire avant que le code soit exécuté par le client).

Cela peut permettre d’anticiper des bugs et comportements inattendus non souhaités, dès le développement !

Il y a plein de comportements un peu tristes en Javascript (possibilité d’accéder à une propriété qui n’existe pas …) qui conduisent à des bugs, leur documentation liste des exemples de cas problématiques. Typescript prévient ce genre de comportements.

La démarche

  • Installation de Typescript dans le projet npm i typescript
  • Ajout du fichier de configuration Typescript tsconfig.json
  • Création d’un nouveau composant en Typescript pour se familiariser doucement avec la syntaxe
  • Reprise d’un petit composant (login) existant dont l’extension a été renommée en .tsx
  • Collecte des problèmes … Correction des problèmes …
  • Configuration d’Eslint pour Typescript (sinon ça passait pas)
  • Et on passe au composant suivant ! ⛏

Le point fort de cette migration est que j’ai pu envoyer en production un premier lot de composants sous Typescript qui continuaient à vivre leur vie avec d’autres composants JS, pas encore ré-écrits.

Vous n’êtes pas obligés de tout migrer d’un coup, ce qui facilite grandement une démarche itérative !

Enseignements

  • Commencer du plus petit composant au plus gros !

J’ai commencé par typescriptiser (est-ce un verbe?) tous mes fichiers qui requêtaient des API par ex. pour ensuite aller vers les composants qui exploitaient les fichiers.

  • Je me suis remerciée d’avoir adopté une approche Atomic Design dans le projet

J’ai pu m’attaquer aux atomes, puis aux molécules, aux organismes pour finir avec les pages.

  • Tout ce qui retourne un composant doit être dans un fichier tsx

Y compris les contextes qui même s’ils fournissent des méthodes, restent des composants …

Interrogations

Quelle est la différence entre type et interface ?

Une interface reste ouverte à la différence d’un type. De ma compréhension, ça s’utilise plus quand on veut entrer dans une logique de composition. Les types peuvent utiliser les types primaires (booléen, number) et ne peuvent pas être modifiés après déclaration.

C’est encore flou pour moi le “quand utiliser l’un ou l’autre”, je n’ai pas encore eu de besoin où l’un s’appliquait mieux que l’autre mais j’ai préféré garder une consistence sur le projet. Je suis preneuse de vos retours sur le sujet :)

Pièges

Configuration de Eslint

J’avais Eslint en place sur mon projet. J’ai oublié d’installer une dépendance typescript-eslint, j’avais des erreurs liées à mes déclarations de type très obscures, je pensais que la syntaxe était incorrecte alors que le problème venait de Eslint qui n’était simplement pas configuré pour comprendre du Typescript…

En réaction à chaud, j’ai quand même beaucoup de mal avec la syntaxe Typescript mélangée aux concepts React comme le useState

  const [sessions, setSessions] = useState<Array<Session>>([]);

Je trouve qu’à la lecture, ce n’est pas du tout “intuitif”… J’imagine qu’il faut se laisser le temps de s’y habituer ! 😅

Appréciations

Le code produit est plus lisible, on gagne en rigueur aussi sur les objets qu’on manipule.

La démarche itérative qu’on peut avoir ! Les fichiers .ts, .tsx et .js peuvent cohabiter dans le même projet, c’est un travail de fond qui peut se faire au fur et à mesure qu’un projet vit.

Ressources utiles

Je finis cet article sur cette liste de ressources qui m’a été utile pour le premier lot envoyé en production !

Et vous ? Comment se sont passées vos migrations vers Typescript ? Des traumas à me partager ? 😅