Qu'est-ce que TypeScript ? Guide en langage simple pour non-développeurs

TypeScript est du JavaScript avec des types. Vous ajoutez des étiquettes qui indiquent quel genre de données chaque valeur doit contenir (un nombre, un texte, une liste de commandes), et TypeScript vérifie votre code pour repérer les incohérences avant même son exécution. Le site de TypeScript le décrit comme « du JavaScript avec une syntaxe pour les types » : les types sont retirés lors de la conversion en JavaScript ordinaire, qui fonctionne partout où JavaScript fonctionne.

Pourquoi c'est important quand on construit avec l'IA

Les modèles d'IA écrivent du code rapidement, et le code rapide comporte des erreurs : un champ appelé customerName dans un fichier et customer_name dans un autre, un prix passé comme texte plutôt que comme nombre, une fonction appelée avec une valeur manquante. En JavaScript simple, beaucoup de ces erreurs n'apparaissent que lorsque quelqu'un clique sur le mauvais bouton.

TypeScript en attrape plusieurs plus tôt, pendant l'écriture du code :

• L'IA reçoit une rétroaction immédiate. Les erreurs de type indiquent la ligne exacte qui pose problème, afin que l'agent puisse la corriger avant que vous ne la voyiez.
• Les changements sont plus sûrs. Si vous renommez un champ, TypeScript signale chaque endroit qui utilise encore l'ancien nom.
• Le code s'explique lui-même. Les types documentent ce qu'une fonction attend et ce qu'elle retourne, ce qui vous aide, vous, l'IA et tout développeur qui travaillera plus tard sur le projet.
• Les éditeurs deviennent plus intelligents. La complétion automatique et « aller à la définition » fonctionnent mieux, parce que l'éditeur sait quel est le type de chaque valeur.

C'est une raison importante pour laquelle de nombreux créateurs d'applications IA adoptent TypeScript par défaut.

Une analogie du quotidien

Pensez à un entrepôt de distribution avec des baies étiquetées. Chaque baie porte une pancarte : « Palettes seulement », « Réfrigéré », « Maximum 500 kg ». Quand une livraison arrive, un vérificateur à la porte compare les marchandises avec la pancarte. Du poisson congelé destiné à la baie des produits secs est arrêté à la porte, et non découvert une semaine plus tard, quand il sent mauvais.

TypeScript est le vérificateur à la porte. Les types sont les pancartes. La vérification se fait avant que les marchandises (votre code) ne soient utilisées. Et une fois tout en place, les pancartes sont retirées : le JavaScript exécuté ne contient plus aucun type.

Comment fonctionne TypeScript

1. Vous (ou l'IA) écrivez des fichiers .ts ou .tsx : du TypeScript, avec des étiquettes de type.
2. Le vérificateur de types lit le code et signale les incohérences comme des erreurs dans l'éditeur ou lors de la compilation.
3. Une étape de compilation retire les types, ce qui produit du JavaScript simple.
4. Le JavaScript s'exécute dans le navigateur ou sur un serveur (Node.js, Deno, Bun).

Une conséquence importante : TypeScript vérifie le code que vous avez écrit, pas les données qui arrivent pendant l'exécution de l'application. Si une API externe renvoie quelque chose d'inattendu, TypeScript ne le voit pas, à moins que vous n'ajoutiez une validation à l'exécution.

Exemple concret : un formulaire de réservation

Supposons que vous construisiez une application de réservation pour un salon de coiffure. Voici un type qui décrit une réservation :

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // le ? signifie que le champ est facultatif
};

Et une fonction qui calcule un acompte :

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Voyez maintenant ce que TypeScript repère.

Un champ mal écrit.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript signale que prise n'est pas une propriété connue et que price est manquant. En JavaScript simple, cela calculerait discrètement un acompte de NaN (non un nombre).

Le mauvais type de valeur.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript signale qu'une chaîne de texte ne peut pas remplacer un nombre. Sans lui, "40" * 0.2 fonctionne par hasard, mais "40" + 5 donne "405" : le genre de bogue qui apparaît sur une facture.

Un service qui n'existe pas.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript signale que "perm" ne fait pas partie des services autorisés. Lorsque le salon ajoutera plus tard des permanentes, vous l'ajouterez au type, et TypeScript affichera chaque endroit à mettre à jour : la liste des prix, le formulaire, les couleurs du calendrier.

Ce qu'il ne peut pas attraper. Si le formulaire de réservation envoie price: "40" du navigateur au serveur, TypeScript côté serveur ne le voit pas à l'exécution. C'est pourquoi les applications bien conçues valident aussi les données entrantes, souvent avec une bibliothèque de validation qui vérifie la forme des données et les transforme en véritable Booking.

TypeScript ou JavaScript

Termes courants expliqués

Erreurs courantes et idées reçues

• « TypeScript rend le code exempt de bogues. » Il repère les incohérences de forme des données, pas une logique erronée. Un acompte de 2 % au lieu de 20 % passe la vérification de types sans problème.
• « Les types me protègent des mauvaises données. » Les types disparaissent à l'exécution. Validez les données venant des utilisateurs, des formulaires et des API.
• any partout. Lorsqu'une IA est bloquée, elle peut recourir à any ou à // @ts-ignore pour faire taire les erreurs. Cela cache les problèmes au lieu de les corriger.
• Ignorer les erreurs de type parce que l'aperçu fonctionne. Certains outils exécutent quand même du code comportant des erreurs de type. Ces erreurs restent des bogues en attente de se manifester.
• « TypeScript est plus lent. » Les types sont retirés avant l'exécution ; le JavaScript qui tourne est essentiellement le même.
• « C'est seulement pour les grandes équipes. » Les créateurs solo en profitent aussi, surtout quand une IA fait l'essentiel des modifications.

Quoi demander à votre outil IA

• « Utilise TypeScript avec le mode strict activé. »
• « Définis des types partagés pour nos enregistrements principaux (Customer, Booking, Invoice) et utilise-les à la fois dans l'interface et le backend. »
• « N'utilise pas any ni @ts-ignore pour contourner les erreurs ; corrige le problème de fond et dis-moi lequel c'était. »
• « Valide toutes les données entrantes sur le serveur, pas seulement avec des types. »
• « Lance le vérificateur de types et corrige toutes les erreurs avant de me dire que c'est terminé. »
• « Lorsque tu renommes un champ, mets à jour chaque endroit que TypeScript signale. »
• « Explique cette erreur de type en langage simple. »

Pour mieux vérifier ce que l'IA a produit, consultez comment revoir le code généré par l'IA et comment déboguer une application créée avec l'IA.

TypeScript dans Mythex

Si vous ne demandez rien de précis, Mythex démarre les nouveaux projets avec Vite + React + TypeScript + Tailwind. L'éditeur de code offre une intelligence du langage (complétion, diagnostics et aller à la définition pour TypeScript et JavaScript, entre autres), de sorte que les erreurs de type sont visibles dans le code et pas seulement dans l'aperçu. L'éditeur est en lecture seule sur le plan Gratuit et entièrement modifiable sur Pro. Vous pouvez toujours demander une autre configuration dans votre première demande : la page de documentation sur le choix de la technologie explique la marche à suivre, et la documentation de l'éditeur de code décrit ce que l'éditeur affiche.

Questions