Pourquoi utiliser Typescript dans un project React & Next.js ?

Le choix du langage de programmation pour le développement d'un projet front-end est important. Depuis quelques années, Typescript est de plus en plus utilisé pour les projets front-end pour ses avantages en matière de maintenabilité, de documentation et de productivité.

Dans cet article, nous allons découvrir pour quelles raisons nous vous conseillons de développer votre projet front-end en Typescript avec des exemples en React & Next.js.

Qu'est ce que Typescript

TypeScript est un langage de programmation open-source développé par Microsoft. Il s'agit d'un sur-ensemble de JavaScript qui ajoute un système de typage statique optionnel au langage. Contrairement à JavaScript, où les types des variables sont déterminés dynamiquement à l'exécution, TypeScript permet aux développeurs de spécifier les types des variables lors de la phase de développement.

De nombreux développeurs utilisent TypeScript pour le développement front-end, en particulier avec des frameworks populaires tels que React et Next.js. Grâce à ses fonctionnalités avancées et à son système de typage statique, TypeScript permet de créer des applications front-end plus robustes et plus fiables.

1. Reduction des bugs

L'une des premières raisons de choisir TypeScript pour un projet front-end est la réduction des bugs grâce aux types. Contrairement à JavaScript, où les types des variables sont déterminés dynamiquement, TypeScript permet aux développeurs de spécifier les types des variables lors de la phase de développement.

Voici un exemple de typage des props d'un composant React avec Typescript :

type Props = {
  name: string;
  age: number;
}
 
const MyComponent = ({ name, age }: Props) => {
  return (
    <div>
      <p>Nom: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

2. Refactoring simplifie

Avec TypeScript, vous pouvez effectuer des modifications en toute confiance, sachant que le système de types vous alertera si vous essayez d'accéder à des propriétés inexistantes, de passer des arguments incorrects à une fonction, ou d'utiliser des valeurs de type incorrect.

Pour vous donner un exemple concret, supposons que vous ayez un composant React dans un projet Next.js qui affiche une liste de tâches. Voici à quoi pourrait ressembler le composant en JavaScript :

import React from 'react';
 
const TaskList = ({ tasks }) => {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
};
 
export default TaskList;

Maintenant, supposons que vous souhaitiez ajouter une fonctionnalité pour marquer les tâches comme terminées. Vous pourriez d'abord commencer par définir un type pour les tâches dans TypeScript :

type Task = {
  id: number;
  text: string;
  completed: boolean;
}

Ensuite, vous pouvez mettre à jour votre composant pour utiliser ce type et ajouter une case à cocher pour chaque tâche :

import React from 'react';
 
type Task = {
  id: number;
  text: string;
  completed: boolean;
}
 
type TaskListProps = {
  tasks: Task[];
}
 
const TaskList: React.FC<TaskListProps> = ({ tasks }) => {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          <input type="checkbox" checked={task.completed} />
          <span>{task.text}</span>
        </li>
      ))}
    </ul>
  );
};
 
export default TaskList;

Grâce à TypeScript, vous pouvez ajouter la nouvelle fonctionnalité en toute confiance, sachant que le système de types garantit que toutes les références aux propriétés de tâche sont correctes.

Si vous avez accidentellement essayé d'accéder à une propriété inexistante ou de passer un type incorrect à une fonction, TypeScript vous aurait averti dès la phase de développement, ce qui vous aurait permis de corriger l'erreur avant même de tester le code.

3. Lisibilite du code amelioree

En définissant explicitement les types pour les variables, les props de composants et les valeurs de retour de fonctions, TypeScript rend le code plus compréhensible pour les développeurs. Par exemple, dans un composant React, définir les types des props permet de comprendre immédiatement quelles sont les données attendues par ce composant.

Par exemple, dans Next.js, lorsque nous définissons les types des données récupérées à partir d'une API, nous pouvons utiliser TypeScript pour spécifier ces types, ce qui rend le code plus compréhensible pour les autres membres de l'équipe.

Voici un exemple de typage des données récupérées à partir d'une API dans Next.js avec TypeScript :

type Post = {
  id: number;
  title: string;
  body: string;
}
 
const fetchPost = async (postId: number): Promise<Post> => {
  const response = await fetch("https://api.example.com/posts/" + postId);
  return await response.json();
};

4. Documentation

TypeScript fournit une documentation intégrée au code grâce à son système de types statiques. En utilisant des annotations de types et des interfaces, vous pouvez décrire clairement la structure des données, les props des composants, les types des fonctions, etc.

Cela permet aux autres développeurs (ou à vous-même à une date ultérieure) de comprendre rapidement le fonctionnement du code sans avoir à le parcourir en détail.

5. Amelioration de la productivite

Grâce à son système de typage statique, TypeScript offre une meilleure prise en charge de l'autocomplétion et de la documentation dans les environnements de développement.

Par exemple, lorsque nous utilisons des IDE comme Visual Studio Code ou Webstorm avec TypeScript, nous bénéficions de fonctionnalités avancées telles que l'autocomplétion des noms de variables, des méthodes et des props des composants React, ainsi que des informations contextuelles sur les types. Cela permet aux développeurs d'écrire du code plus rapidement et plus efficacement.

6. Integration transparente avec JavaScript

TypeScript est compatible avec JavaScript, ce qui signifie qu'il est facile d'intégrer du code JavaScript existant dans un projet TypeScript, offrant ainsi une transition en douceur pour les développeurs.

C'est d'ailleurs à la fois un avantage et un inconvénient de Typescript : vous pouvez l'installer dans votre projet sans forcement typer votre code. Ainsi, vous pouvez l'implémenter au fur et à mesure dans un projet existant.

FAQ

TypeScript ralentit-il le temps de build ?

Le temps de compilation augmente legerement, mais reste negligeable sur la plupart des projets. Next.js utilise SWC par defaut, qui compile TypeScript sans verification de types. La verification s'execute separement via tsc --noEmit, permettant de paralleliser build et type-checking en CI.

Faut-il typer toutes les variables explicitement ?

Non, TypeScript infere automatiquement les types dans la majorite des cas. Les annotations explicites sont recommandees pour les signatures de fonctions publiques, les props de composants et les retours de fonctions complexes. Pour les variables locales, l'inference suffit generalement.

Comment migrer progressivement un projet JavaScript vers TypeScript ?

Renommer les fichiers .js en .ts un par un et activer allowJs dans tsconfig.json. Cette configuration permet de mixer fichiers JavaScript et TypeScript. Commencer par les modules les plus critiques ou les plus modifies, puis augmenter progressivement le niveau de strictness.

TypeScript fonctionne-t-il avec les composants React Server Components ?

Oui, TypeScript supporte pleinement les Server Components de Next.js. Les types des props, des donnees fetchees et des metadonnees se definissent de la meme maniere que pour les Client Components. Les fonctions generateMetadata et generateStaticParams beneficient egalement du typage.

Quel est l'impact sur la taille du bundle final ?

Aucun, TypeScript est entierement supprime a la compilation. Le code produit est du JavaScript standard, identique a ce qui serait ecrit manuellement. Les types n'existent qu'au moment du developpement et de la compilation.

Conclusion

En conclusion, l'utilisation de TypeScript plutôt que JavaScript dans les projets front-end avec React & Next.js offre de nombreux avantages, notamment une meilleure sécurité grâce au typage statique, une productivité accrue grâce à l'autocomplétion et la documentation, ainsi qu'une maintenance facilitée et une meilleure collaboration entre les membres de l'équipe.

En tenant compte de ces avantages, les développeurs peuvent prendre des décisions éclairées pour choisir le langage de programmation le mieux adapté à leurs besoins.