Manipulez la syntaxe de TypeScript

Ajoutez des types à votre JavaScript

Pour pouvoir écrire en TypeScript, il nous faut créer un fichier… TypeScript !

Si les fichiers JavaScript ont pour extension .js, c’est tout aussi simple pour les fichiers TypeScript : leur extension est .ts ! Plutôt intuitif, n’est-ce pas ?

Si vous avez suivi le chapitre précédent, vous devriez déjà avoir un fichier my-file.ts. Si ce n’est pas le cas, ce n’est pas grave : nous allons de toute façon effacer son contenu pour repartir de zéro, alors créez simplement un nouveau fichier !

Je vous demanderai donc de copier-coller le code JavaScript ci-dessous dans votre fichier .ts :

function addition(x, y) {
    return x + y;
}
const result = addition('10', '20');
console.log(result);

Ici, nous avons donc du code JavaScript assez classique : une fonction addition  qui fait la somme de deux nombres. Si vous essayez de compiler ce code (via la commande  npx tsc my-file.ts   ), vous verrez que le fichier JavaScript généré est pour ainsi dire identique :

function addition(x, y) {
    return x + y;
}
var result = addition('10', '20');
console.log(result);

En gros, seul le mot-clé const  a été remplacé par var  .

Vous pouvez changer ce comportement via l’option --target  : npx tsc my-file.ts --target es6  . Vous pouvez en savoir plus dans la documentation officielle, mais je vous invite à ne pas vous attarder sur ce genre de détail pour le moment !

Si vous en doutiez encore, voici donc la preuve qu’un code JavaScript basique est du code TypeScript fonctionnel : le compilateur a tout compris et a généré le JavaScript sans aucun souci !

Bon, et si on ajoutait enfin des types à notre fonction addition  ? Vraisemblablement, nous souhaitons qu’elle n’accepte que des nombres en tant que paramètres. Pour ce faire, nous ajoutons la syntaxe :number  à droite de ces paramètres :

function addition(x: number, y: number) {
    return x + y;
}
const result = addition('10', '20');
console.log(result);

Arrêtons-nous quelques secondes sur cette nouvelle syntaxe.

Pour indiquer un type, la syntaxe principale est le caractère :   suivi du type en question. L’espace après  :   est optionnel, vous n’êtes pas obligé de le mettre.

Pour commencer, retenez que TypeScript propose ces trois types basiques (appelés aussi types primitifs) :

1. number  (pour les nombres).

2. string  (pour les chaînes de caractères).

3. Et boolean  (pour les valeurs true  et false  ). 

Juste en ajoutant ces  : number   à droite de nos paramètres, TypeScript sait que notre fonction addition  s’attend à recevoir des nombres.

Il est également possible de définir le type de la valeur retournée par la fonction : pour ce faire, il suffit de réutiliser ce fameux  : number   après la liste des paramètres, juste avant l’accolade ouvrante :

function addition(x: number, y: number):number {
    return x + y;
}
const result = addition('10', '20');
console.log(result);

Grâce à cette indication du type de retour, TypeScript sait que result  est forcément un nombre. On peut cela dit être plus explicite en l’indiquant clairement. Comment ? Eh bien, toujours grâce à la fameuse annotation :number  !

function addition(x: number, y: number): number {
    return x + y;
}
const result:number = addition('10', '20');
console.log(result);

C’est terminé : notre petit code JavaScript est désormais devenu un joli code typé avec TypeScript. Ce n’était pas si difficile, pas vrai ?
Tentons maintenant de compiler le code (pour rappel, via la commande  npx tsc my-file.ts   ) :

Rassurez-vous, c’était totalement prévu ! Car ceci permet de faire la transition parfaite vers notre prochaine section : comment lire, comprendre et corriger cette erreur remontée par TypeScript ?

Découvrez comment TypeScript remonte les erreurs

L’une des compétences essentielles lorsqu’on développe en TypeScript est de comprendre ce qu’essaie de nous dire le langage. Il nous crie dessus, ça ne fait pas plaisir, c’est vrai… Mais essayons d’analyser ce qui l’embête dans notre code. Je remets ici l’erreur qu’il nous remonte :

Lorsqu’on essaie de compiler ce code, l’erreur qui en résulte commence ainsi  :

> my-file.ts:4:32

TypeScript nous indique le nom du fichier qui concerne l’erreur, puis le numéro de la ligne impactée, ainsi que la colonne. Juste avec ce début d’information, nous apprenons donc que l’erreur se trouve dans le fichier my-file.ts (ça on pouvait le deviner nous-même 😬). Grâce à l’indication  4:32  , on sait que le problème survient au niveau de la ligne 4, et encore plus précisément à partir du 32e caractère de cette ligne :

On peut donc en déduire que TypeScript n’aime pas le '10'  . Mais pourquoi ? Continuons la lecture de l’erreur :

> - error TS2345

Ici, TypeScript nous confirme qu’il s’agit d’une véritable erreur (on aurait pu avoir une simple alerte), et il précise cette étrange valeur : TS2345. Que cette suite de lettres et de chiffres ne vous fasse pas peur, il s’agit simplement d’un code d’erreur. Un code de ce genre est associé à chaque erreur que peut remonter TypeScript, ce qui permet de facilement les identifier. Cela simplifie la recherche d’informations et la communication entre les développeurs.

Heureusement que non ! Cela serait même totalement inutile, puisque TypeScript ajoute une description plus détaillée de l’erreur, juste après ce code :

> Argument of type 'string' is not assignable to parameter of type 'number'.

Ici, le message d’erreur indique que nous envoyons une string (une chaîne de caractères) alors que le paramètre s’attend à recevoir un nombre (comme on l’a défini ensemble). La solution est donc d’enlever les apostrophes autour des nombres que l’on envoie à la fonction addition  , afin de lui envoyer de véritables nombres, et non plus des strings :

function addition(x: number, y: number): number {
    return x + y;
}
const result:number = addition(10, 20);
console.log(result);

Lancez à nouveau une compilation : tout devrait être désormais rentré dans l’ordre ! Et si vous ouvrez le fichier my-file.js généré, vous pouvez constater que le JavaScript écrit n’a pas changé. Preuve une fois de plus que TypeScript n’est là que pour vous aiguiller durant le développement (quitte à vous disputer un petit peu !).

L’erreur remontée ici par TypeScript était assez claire à comprendre, mais je dois vous avouer quelque chose : lorsque le code est plus compliqué, il est possible que les messages de l’outil soient un peu plus cryptiques à comprendre.

Typez des objets

Jusque-là, notre exemple est plutôt simple, car notre fonction ne manipule que des nombres. Essayons de complexifier tout ça !

Pour ce faire, nous allons une fonction qui vise à endommager un personnage de jeu vidéo. Voyons tout cela en vidéo et ensuite vous trouverez le récapitulatif de la manipulation :

Allez on récapitule ? C'est parti !

Cette fonction prend en premier paramètre le personnage à blesser, et en deuxième paramètre le total de blessures. Sa valeur de retour est le nouveau total de points de vie du personnage :

function damage(characterToDamage, amount: number): number {
    characterToDamage.life -= amount;
    return characterToDamage.life;
}
const result = damage({ life: 100 }, 12);
console.log(result);

Dans cet exemple,  characterToDamage  n’a pas encore de type : comment faire pour le typer correctement ?

Ce paramètre est utilisé comme un objet : on essaie en effet de manipuler sa propriété life  via characterToDamage.life  . Pour définir qu’une variable est un objet, TypeScript utilise la même syntaxe que JavaScript, à savoir des accolades :

function damage(characterToDamage: {}, amount: number): number {```

Juste en appliquant ce changement, TypeScript nous signale cette erreur :

> Property 'life' does not exist on type '{}'.

Comme on vient de le voir, on essaye de manipuler la propriété life  , mais TypeScript ne sait pas encore que characterToDamage  la possède : il faut donc le lui dire !

function damage(characterToDamage: { life: number }, amount: number): number {```

Et c’est tout ! Le code complet devient donc :

function damage(characterToDamage: { life: number }, amount: number): number {
    characterToDamage.life -= amount;
    return characterToDamage.life;
}
const result = damage({ life: 100 }, 12);
console.log(result);

Amusez-vous à modifier l’appel à la fonction damage  en envoyant des arguments erronés. Essayez par exemple  damage({ life: 'douze' }, 12)   ,  damage({ vie: 100 }, 12)   , ou encore  damage({ life: 100, magic: 20 }, 12)   : TypeScript réagit à chaque fois en vous alertant sur les erreurs qu’il détecte. Plutôt sympa d’avoir un outil qui nous prévient de la sorte, non ? 😎

À vous de jouer !

Voici un petit exercice concret pour vous faire manipuler un peu TypeScript.

Votre mission, si vous l’acceptez, est de modifier le code ci-dessous afin de corriger toutes les erreurs qu’il contient.

// Ne modifiez que le typage TypeScript, ne touchez pas au code JavaScript !

function sayHello(target: { firstName: string, money: true }): number {
    return `Hello ${target.firstname}, you have ${target.money} on your bank account.`;
}
const message: boolean = sayHello({ firstname: 'World', money: 123 });

En résumé

• Pour indiquer des types basiques à nos variables, on utilise la syntaxe  :   + le nom du type en minuscules.

• TypeScript retourne des messages d’erreurs qui se veulent être le plus précis possible.

• La syntaxe pour déclarer le type d’un objet est très proche de celle de JavaScript.

Nous avons donc ajouté des types dans notre code, nous avons même vu comment typer des paramètres plus complexes, comme les objets : et si nous allions encore plus loin en créant nos propres types rien qu’à nous ?