Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

2. React et TypeScript

Il est possible d’utiliser du JavaScript natif ou du TypeScript pour développer vos applications avec React. Il n’y a pas de recommandations particulières de la part de l’équipe React concernant le choix de l’un ou l’autre. Cependant, sachez que React est de mieux en mieux intégré avec TypeScript (Il est même possible de créer un projet React avec TypeScript en une seule ligne de commande), et que d’années en années TypeScript devient de plus en plus populaire. Sans compter de nombreuses librairies qui sont adaptées en TypeScript désormais.

De plus, TypeScript est généralement considéré comme une bonne pratique par la communauté des développeurs Web.

Mais… pourquoi utiliser TypeScript avec React, cela ne risque pas de ralentir mes développements et mon temps d’apprentissage ? 🤯

Alors, vous avez raison de poser la question. Effectivement, à (très) court terme, on gagnerait du temps à ne pas utiliser TypeScript dans nos développements. Mais je pense que vous souhaitez utiliser vos nouvelles compétences pendant au moins les quelques mois qui arrivent, et l’utilisation de TypeScript vous permettra rapidement d’économiser du temps de développement par la suite. Laissez-moi vous présenter les avantages principaux de l’utilisation de TypeScript, selon moi :

Code plus lisible (pas seulement pour vous)

Définir un type pour vos données, ou pour la valeur de retour de vos fonctions, vous permet de comprendre en un clin d’oeil le fonctionnement du code :

// La méthode getFruit prend un identifiant en paramètre, et renvoie un objet de type Fruit
getFruit(id: number): Fruit { ... }

// On peut ensuite créer un fruit facilement, à partir d'un identifiant de type nombre.
let ananas: Fruit = getFruit(7);

Même si nous n’avons pas encore pris le temps de comprendre la syntaxe de TypeScript, le code ci-dessous semble « parler de lui-même ». Sans avoir besoin de lire de documentation, on comprend que la méthode getFruit prend en paramètre un identifiant qui est un nombre, et renvoie un objet de type Fruit. De plus, la variable ananas est bien de type Fruit. 🍍

TypeScript nous aide donc à comprendre un code plus facilement.

Suggestions de code

Avec les éditeurs qui supportent le TypeScript, nous pouvons avoir une liste de proposition suggérés par votre éditeur. Reprenons notre exemple de fruits. Voici la classe fictive représentant un fruit dans notre application :

class Fruit {
  name: string; // 'name' est une chaîne de caractère
  weight: number; // 'weight' est le poids du fruit, c'est donc un nombre.
  colors: string[]; // 'colors' est un tableau des couleurs du fruit.
}

Si dans votre code vous commencez à taper le nom d’une variable qui est de type Fruit, alors votre éditeur de code vous proposera une petite liste déroulante avec les suggestions des propriétés ‘name‘, ‘weight‘ et ‘colors‘. Non seulement c’est assez pratique, mais surtout cela vous permet de savoir exactement quelle sont les propriétés ou les méthodes que vous pouvez utiliser pour chacun de vos objets. Cela vous évitera de devoir utiliser console.log partout dans votre application.

Moins d’erreurs

L’avantage d’avoir des types d’objets clairement définis, c’est la réduction d’erreurs potentielles. Reprenons notre exemple de fruits, voici ce que cela donne :

let ananas: Fruit = getFruit(7); // OK !
let ananas: Fruit = getFruit("sept"); // Erreur ! (Invalid Type)

// Sans TypeScript, on peut passer tout et n'importe quoi à notre variable.
// Nous n'avons aucune garantie que la variable 'ananas' est bien de type Fruit:
let ananas = "ananas"; 

Comme vous pouvez le constater, TypeScript vous aide à relever vos erreurs directement dans votre code à la ligne 2, avant la compilation. Sans cela, vous pouvez injecter des erreurs dans votre code, et ne vous en rendre compte que dans votre navigateur. Et c’est toujours très pénible de retrouver vos erreurs à coup de console.log… comme ça pourrait être le cas avec le code à la ligne 6.

En fait, avec TypeScript, il est plus dur d’écrire du code invalide. 😉

Une fois que votre code TypeScript a compilé vers du code JavaScript, vous pouvez être presque certain que ce code fonctionne.

Amélioration de votre code JavaScript, sans contraintes

Pour rappel, TypeScript est simplement une surcouche à JavaScript, donc vous pouvez tout à fait écrire du code JavaScript natif à l’intérieur de vos fichiers .ts, sans aucun problème. TypeScript ne vous impose pas de changer vos habitudes de développements actuelles. Vous pouvez continuer à code comme vous le faites, puis ajouter un peu de code TypeScript au fur et à mesure.

Voilà, si avec tout ça, vous n’êtes toujours pas convaincu de l’intérêt de TypeScript, alors je ne peux plus rien faire pour vous. 😅

Bien sûr, je plaisante, vous êtes libre de vous faire votre propre opinion sur TypeScript. Mais sachez que dans la suite de cette formation nous développerons notre application React avec TypeScript. Et nous allons voir tout de suite comment fonctionne TypeScript !