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

4. Pas de limites avec TypeScript

Bon, nous allons maintenant voir ce que TypeScript a dans le ventre, et ce qu’il va nous apporter avec React. Et quoi de plus normal pour commencer, que de voir les types de TypeScript.

Le typage avec TypeScript

La syntaxe pour déclarer une variable typée avec TypeScript est la suivante :

// Syntaxe pour déclarer une variable typé en TypeScript 
var variable: type;

Vous êtes libre de choisir le type que vous voulez. Vous pouvez utiliser des types basiques ou alors créer vos propres types :

// On déclare un nombre :
var lifePoint: number = 100;
 
// On déclare une chaîne de caractère :
var name: string = 'Green Lantern'; 
 
// On déclare une variable qui correspond à une classe de notre application !
var greenLantern: Hero = new Hero(lifePoint, name); 
 
// On peut créer un autre héros de type Hero :
var superMan: Hero = new Hero(lifePoint, 'Superman'); 
 
// Je peux même créer un tableau de héros, qui contient tous les héros de mon application ! 
var heros: Array<Hero> = [greenLantern, superMan];

Le typage de nos variables est très pratique, puisque cela vous permet d’être sûrs du type des variables que vous utilisez. Pouvoir être sûr que notre tableau héros ne contient que des héros et pas des nombres ou autres choses, est plutôt confortable. Notre code devient plus robuste et plus élégant.

Pour vous prouver ce que je viens de vous dire, essayons d’ajouter une chaîne de caractères à la variable point de vie. Redéfinissez le code de votre fichier test.ts comme ceci :

var lifePoint: number = 100;
lifePoint = 'some-string';

Ensuite essayez de compiler ce code :

tsc test.ts

Vous obtiendrez alors cette magnifique erreur dans votre console 🙂:

Test.ts(7,1) :error TS2322 :Type ‘string’ is not assignable to type 'number'.

L’erreur est explicite, à la ligne 2 de votre fichier test.js, vous avez essayé d’assigner une string à une variable que vous aviez déclarée comme étant un nombre, et TypeScript vous l’interdit bien sûr.

En revanche si vous faites :

// Ce code ne causera pas d'erreur car lifePoint est bien de type number. 
lifePoint = 50;

Et sachez que TypeScript s’occupe de vérifier le type de toutes les variables typées pour nous. Si dans notre tableau de héros nous essayons d’ajouter un nouvel élément qui ne soit pas un héros, TypeScript nous retournerait une erreur. Bref, c’est magique non ?

Sachez que TypeScript propose également un type nommé ‘any’ qui signifie ‘tous les types’.