Pourquoi TypeScript

Ce que tu vas apprendre

• Ce qu'est TypeScript et le problème qu'il résout.
• Comment l'essayer sans rien installer, puis avec tsc.
• Comment lire un message d'erreur de type.

Une erreur que JavaScript laisse passer

Voici une fonction JavaScript pour un site de recettes.

function totalPersonnes(parts, invites) {
  return parts + invites
}

console.log(totalPersonnes(4, "2")) // "42"

Tu voulais 6, tu obtiens la chaîne "42". JavaScript ne t'a rien dit : il a collé les deux valeurs.

L'erreur n'apparaît qu'à l'exécution, parfois chez un visiteur. C'est ce que TypeScript veut éviter.

Ce que TypeScript ajoute

TypeScript est JavaScript auquel on ajoute des types. Un type décrit la nature d'une valeur : un nombre, du texte, une liste.

Tout code JavaScript valide est déjà du TypeScript valide. Tu ajoutes des types petit à petit.

Reprenons la fonction avec des types :

function totalPersonnes(parts: number, invites: number): number {
  return parts + invites
}

totalPersonnes(4, "2")

Ici, : number signifie « un nombre ». L'éditeur souligne "2" en rouge avant même que tu lances le code.

Le typage statique

On parle de typage statique : les types sont vérifiés avant l'exécution, en lisant le code. JavaScript, lui, ne connaît les types qu'au moment où le programme tourne.

Cette dernière ligne est importante : un navigateur ne comprend pas TypeScript.

Les types disparaissent à l'arrivée

Un outil appelé compilateur transforme ton fichier .ts en fichier .js en retirant les types. Le compilateur de TypeScript s'appelle tsc.

Les types n'existent donc que pendant l'écriture. Ils ne ralentissent pas ton site et ne protègent pas contre une donnée venue d'Internet : on y reviendra avec unknown.

Essayer sans rien installer

Le plus simple est le playground officiel, une page web où tu tapes du TypeScript et vois le résultat. Il est à l'adresse typescriptlang.org/play.

1. Ouvre la page.
2. Colle la fonction typée de plus haut.
3. Observe le soulignement rouge sous "2".
4. Passe la souris dessus pour lire l'erreur.

À droite, le playground peut aussi afficher le JavaScript obtenu après compilation. Tu y vois les types disparaître.

Essayer avec tsc

Pour travailler sur ton ordinateur, installe TypeScript dans ton projet. Il faut avoir Node.js et npm.

npm install typescript --save-dev

Crée ensuite un fichier recette.ts, puis compile-le :

npx tsc recette.ts

tsc affiche les erreurs de type, s'il y en a, et produit un fichier recette.js. Tu peux lancer ce fichier avec Node.js.

La documentation officielle conseille cette installation dans le projet plutôt que globale, pour que toute l'équipe utilise la même version.

Lire une erreur de type

Une erreur de TypeScript suit presque toujours le même modèle.

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

Les messages sont en anglais. Traduction : « un argument de type texte ne peut pas aller dans un paramètre de type nombre ».

Lis-les ainsi :

1. Repère le type que tu as fourni (string).
2. Repère le type attendu (number).
3. Corrige la valeur ou le type, selon ce que tu voulais vraiment.

TypeScript ne remplace pas les tests

TypeScript attrape les fautes de type, pas les fautes de logique. Si tu écris parts - invites au lieu de parts + invites, les types sont corrects.

Il rend surtout le code plus facile à relire et à modifier. Le nom d'un champ renommé est corrigé partout, ou signalé là où tu l'as oublié.

À retenir

• TypeScript est du JavaScript avec des types, vérifiés avant l'exécution.
• Les types sont retirés à la compilation : le navigateur ne voit que du JavaScript.
• Le playground sur typescriptlang.org/play permet d'essayer sans installation.
• Avec npm install typescript --save-dev puis npx tsc fichier.ts, tu compiles chez toi.
• Une erreur de type compare le type fourni au type attendu.
• TypeScript ne détecte pas les erreurs de logique.