Mettre à niveau une base de code React vers TypeScript 6.0 : qu’est-ce qui cesse de fonctionner en premier ?

La plupart des mises à jour des compilateurs passent inaperçues. TypeScript 6.0 est différent : il s’agit de la dernière version basée sur le compilateur JavaScript original et son but principal est de préparer les bases de code pour TypeScript 7, qui repose sur Go ; il propose donc moins de fonctionnalités et davantage de changements qui mettent en évidence des problèmes existants. Ce guide décrit ce que ressentira réellement une base de code React et se termine par une liste de contrôle pour la mise à niveau. Pour en savoir plus sur le rôle de 6.0 dans la transition vers un compilateur natif, consultez le rôle de pont de TypeScript 6 sur la voie vers un compilateur natif TS 7.

Des paramètres par défaut plus stricts en premier

TypeScript 6.0 active le mode strict par défaut, suppose l’utilisation de modules ES et change la cible par défaut en es2025. Les projets qui définissent explicitement chaque option ne sont pas affectés ; en revanche, ceux qui comptaient sur les anciennes valeurs par défaut plus permissives rencontreront de nombreux nouveaux erreurs. Dans le code React, les composants les plus touchés sont généralement ceux anciens : des props de type flou, des gestionnaires d’événements avec des paramètres implicites de type any, des références pouvant valoir null, ainsi que des appels à useState() sans argument de type. Il ne s’agit pas de régressions, mais plutôt d’ambiguïtés existantes qui sont désormais signalées.

Les cibles es3 et es5 sont également dépréciées, de sorte que la version minimale devient es2015. Pour de nombreuses applications React, cela ne change pas grand-chose, car Babel, SWC ou esbuild s’occupent de la conversion syntaxique tandis que tsc se contente de vérifier les types, mais assurez-vous-en avant de reconsidérer votre support des navigateurs. Exécutez la mise à niveau sur une branche séparée avec la compilation complète et les tests ; modifier les paramètres par défaut du compilateur un vendredi après-midi est un moyen fiable de gâcher un week-end.

Deduction cohérente pour les fonctions de style méthode

Une solution moins problématique concerne le cas où une fonction est considérée comme « sensible au contexte », ce qui signifie que les types de ses paramètres doivent provenir du contexte avant que l’inférence puisse se poursuivre. Dans 6.0, une expression function ou une abréviation de méthode n’est traitée de cette manière que lorsqu’elle utilise réellement this. Auparavant, choisir la syntaxe de méthode plutôt qu’une fonction flèche pouvait modifier l’inférence générique, même lorsque this n’était jamais utilisé. Le hook ci-dessous mélange les deux styles :

// Before: inconsistent inference depending on syntax
const useCounter = (initial) => {
  const [count, setCount] = useState(initial);

  // this pattern used to infer differently than an arrow fn
  const increment = function () {
    setCount((c) => c + 1);
  };

  return { count, increment };
};

Auparavant, un callback comme increment pouvait être inféré différemment d’une fonction flèche équivalente, et dans des hooks plus complexes cette différence pouvait faire passer un type moins strict aux appels. Désormais, la syntaxe choisie pour les callbacks et les aides retournées ne modifie plus les types résultants, ce qui élimine une source de confusion liée aux erreurs du type « pourquoi ce callback n’est-il pas vérifié ? ».

Importations plus propres avec le préfixe #/

Les importations par sous-chemin de Node définissent des alias privés dans le champ imports de package.json, et TypeScript 6.0 prend en charge le préfixe #/ à cet endroit, correspondant aux alias racine couramment utilisés par les bundlers. Déclarez la correspondance une seule fois :

{
  "imports": {
    "#/*": "./src/*"
  }
}

Les composants importent alors depuis la racine du projet au lieu de compter les segments ../ :

// No more relative path spaghetti in deeply nested components
import { useAuth } from "#/hooks/useAuth";
import { Button } from "#/components/ui/Button";

Puisque l’alias se trouve dans package.json et non seulement dans les paths de tsconfig.json, Node et TypeScript le résolvent de manière identique, sans plugin supplémentaire. Cela ne s’applique que dans les modes de résolution qui lisent les importations de package.json, tels que nodenext ou bundler.

Les types temporels sont fournis intégralement

TypeScript 6.0 intègre des déclarations pour l’API Temporal, qui a atteint la phase finale de sa normalisation par le TC39. Les équipes qui développent des interfaces utilisateur pour la planification, les réservations ou les tableaux de bord peuvent utiliser Temporal.PlainDate ou Temporal.ZonedDateTime sans avoir besoin d’un package supplémentaire, au lieu de devoir faire face à Date. Cependant, ces types ne fournissent pas de support en temps de exécution : vérifiez le support natif dans les navigateurs et versions Node cibles, et ajoutez un polyfill si nécessaire.

Faut-il mettre à jour maintenant ?

Oui, intentionnellement. L’équipe de TypeScript présente 6.0 comme une mise à jour stable, mais les changements sous-jacents sont réels :

• Auditez tsconfig.json et fixez chaque option sur laquelle vous comptez.
• Résolvez les nouveaux erreurs liées au mode strict dans les composants anciens, plutôt que de les masquer avec any.
• Vérifiez quel outil effectue le downleveling et quelle version cible il nécessite.

Pour les bases de code utilisant des composants de classe ou des stores gérés par des classes, envisagez d’activer noImplicitOverride afin que les membres surchargés nécessitent l’utilisation du mot-clé override.

En résumé

TypeScript 6.0 ne changera pas la manière dont vous écrivez des applications React, mais il met en évidence les problèmes cachés par des paramètres par défaut trop souples. Les résoudre dès maintenant, selon votre propre calendrier, est bien moins coûteux que de le faire plus tard dans l’année, surtout en passant de la version 6 à la version 7, ce qui ferait alors de cette mise à jour principalement une question de performance.