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

Dimitri Dumont

Développeur front-end

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.

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.

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 :

1type Props = {
2  name: string;
3  age: number;
4}
5
6const MyComponent = ({ name, age }: Props) => {
7  return (
8    <div>
9      <p>Nom: {name}</p>
10      <p>Âge: {age}</p>
11    </div>
12  );
13};
14

Hexa web

Des conseils pour un projet web ?

Nous contacter

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 :

1import React from 'react';
2
3const TaskList = ({ tasks }) => {
4  return (
5    <ul>
6      {tasks.map(task => (
7        <li key={task.id}>{task.text}</li>
8      ))}
9    </ul>
10  );
11};
12
13export default TaskList;
14

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 :

1type Task = {
2  id: number;
3  text: string;
4  completed: boolean;
5}
6

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

1import React from 'react';
2
3type Task = {
4  id: number;
5  text: string;
6  completed: boolean;
7}
8
9type TaskListProps = {
10  tasks: Task[];
11}
12
13const TaskList: React.FC<TaskListProps> = ({ tasks }) => {
14  return (
15    <ul>
16      {tasks.map(task => (
17        <li key={task.id}>
18          <input type="checkbox" checked={task.completed} />
19          <span>{task.text}</span>
20        </li>
21      ))}
22    </ul>
23  );
24};
25
26export default TaskList;
27

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.

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 :

1type Post = {
2  id: number;
3  title: string;
4  body: string;
5}
6
7const fetchPost = async (postId: number): Promise<Post> => {
8  const response = await fetch("https://api.example.com/posts/" + postId);
9  return await response.json();
10};

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.

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.

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.

Hexa web

Des conseils pour un projet web ?

Nous contacter

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.