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

TypeScript est du JavaScript avec des types. Vous ajoutez des étiquettes indiquant le type de données que doit contenir chaque valeur — un nombre, un texte, une liste de commandes — et TypeScript vérifie votre code pour détecter 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 lorsque le code est converti en JavaScript ordinaire, qui fonctionne alors partout où fonctionne JavaScript.

Pourquoi c'est important quand on crée avec l'IA

Les modèles d'IA écrivent du code vite, 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 au lieu d'un nombre, une fonction appelée avec une valeur manquante. En JavaScript pur, beaucoup de ces erreurs n'apparaissent que lorsqu'on clique sur le mauvais bouton.

TypeScript en détecte beaucoup plus tôt, pendant l'écriture du code :

• L'IA reçoit un retour immédiat. Les erreurs de type pointent la ligne exacte qui pose problème, afin que l'agent puisse la corriger avant que vous ne la voyiez.
• Les modifications sont plus sûres. Renommez un champ, et TypeScript signale chaque endroit qui utilise encore l'ancien nom.
• Le code s'explique de lui-même. Les types documentent ce qu'attend et renvoie une fonction, ce qui aide vous, l'IA et tout développeur qui travaillera plus tard sur le projet.
• Les éditeurs gagnent en intelligence. La complétion automatique et « aller à la définition » fonctionnent mieux, car l'éditeur connaît le type de chaque valeur.

C'est une raison majeure pour laquelle de nombreux outils de création d'applications par IA utilisent TypeScript par défaut.

Une analogie du quotidien

Pensez à un entrepôt de livraison avec des alvéoles étiquetées. Chaque alvéole porte un panneau : « Palettes uniquement », « Réfrigéré », « 500 kg maximum ». Quand une livraison arrive, un contrôleur à la porte compare la marchandise au panneau. Du poisson surgelé destiné à l'alvéole des produits secs est arrêté à la porte, et non découvert une semaine plus tard à son odeur.

TypeScript, c'est le contrôleur à la porte. Les types sont les panneaux. La vérification a lieu avant que la marchandise — votre code — ne soit mise en service. Et une fois tout en place, les panneaux sont retirés : 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 sous forme d'erreurs dans l'éditeur ou lors de la compilation.
3. Une étape de compilation retire les types, ce qui produit du JavaScript classique.
4. Le JavaScript s'exécute dans le navigateur ou sur un serveur (Node.js, Deno, Bun).

Conséquence importante : TypeScript vérifie le code que vous avez écrit, pas les données qui arrivent pendant que l'application tourne. Si une API externe renvoie quelque chose d'inattendu, TypeScript ne peut pas le voir, sauf si vous ajoutez une validation à l'exécution.

Un exemple concret : un formulaire de réservation

Imaginons que vous créez une application de réservation pour un salon de coiffure. Voici un type décrivant une réservation :

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

Et une fonction qui calcule un acompte :

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

Voyons maintenant ce que TypeScript détecte.

Un champ mal orthographié.

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 pur, cela calculerait discrètement un acompte égal à NaN (pas un nombre).

Le mauvais type de valeur.

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

TypeScript signale qu'une chaîne de caractères ne peut pas être utilisée là où un nombre est attendu. Sans lui, "40" * 0.2 fonctionne par hasard, mais "40" + 5 donne "405" — le genre de bogue qui apparaît sur une facture.

Une prestation inexistante.

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

TypeScript signale que "perm" ne fait pas partie des prestations autorisées. Lorsque le salon ajoutera des permanentes, vous les ajouterez au type, et TypeScript affichera chaque endroit à mettre à jour : la liste des tarifs, le formulaire, les couleurs du calendrier.

Ce qu'il ne peut pas détecter. Si le formulaire de réservation envoie price: "40" du navigateur vers le 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 un véritable Booking.

TypeScript ou JavaScript

Termes courants expliqués

Erreurs courantes et idées fausses

• « TypeScript rend le code sans bogue. » Il détecte les incohérences dans la forme des données, pas une logique fausse. 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 provenant 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 masque les problèmes au lieu de les corriger.
• Ignorer les erreurs de type parce que l'aperçu fonctionne. Certains outils exécutent encore 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 l'IA réalise l'essentiel des modifications.

Quoi demander à votre outil de création par 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 le frontend et le backend. »
• « N'utilise ni any ni @ts-ignore pour contourner les erreurs ; corrige le problème de fond et dis-moi ce que c'était. »
• « Valide toutes les données entrantes sur le serveur, pas seulement avec les types. »
• « Lance le vérificateur de types et corrige chaque erreur avant de me dire que c'est terminé. »
• « Quand tu renommes un champ, mets à jour chaque endroit que TypeScript signale. »
• « Explique-moi cette erreur de type en français simple. »

Pour aller plus loin dans la vérification de ce que l'IA a produit, consultez comment relire 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 sur Vite + React + TypeScript + Tailwind. L'éditeur de code intègre une aide au langage — complétion, diagnostics et aller à la définition pour TypeScript et JavaScript, entre autres langages — afin que les erreurs de type soient visibles dans le code, et pas seulement dans l'aperçu. L'éditeur est en lecture seule sur Free et entièrement modifiable sur Pro. Vous pouvez toujours demander une autre configuration dans votre premier prompt ; la page de documentation sur le choix de la technologie explique la démarche, et la documentation de l'éditeur de code détaille ce qu'il affiche.

Questions