En bref
Les bases du TypeScript tiennent en huit briques — et une bonne nouvelle : si ton JavaScript est solide, tu en connais déjà 90 %, il ne reste qu’à annoter. D’abord l’outillage : le compilateur tsc (installé via npm) transforme tes fichiers .ts en .js ordinaire. Puis les annotations sur les types primitifs (string, number, boolean) — et aussitôt leur contrepoint : l’inférence, qui laisse TypeScript déduire seul la plupart des types. Viennent les fonctions typées (paramètres et valeur de retour), les tableaux typés (string[]) et les unions (string | number) avec le rétrécissement qui va avec, la description des objets par type et interface — le cœur expressif du langage —, les propriétés optionnelles (?) et enfin le mode strict, à activer dès le premier jour, avec son ennemi juré : any, le type qui débranche le filet. Chaque brique se teste en direct dans le Playground officiel, sans rien installer.
Apprendre les bases du TypeScript ressemble moins à découvrir un langage qu’à mettre des étiquettes précises sur un langage qu’on possède déjà. Ce guide des bases du TypeScript parcourt les huit briques du socle en supposant tes réflexes JavaScript en place — le prérequis assumé de notre guide complet pour apprendre le TypeScript. Ouvre le Playground officiel dans un onglet : chaque exemple s’y teste en deux secondes.
Installer, compiler, annoter : tes premiers types
L’outillage d’abord. TypeScript s’installe en une commande via npm, et son compilateur tsc fait le travail central : transformer ton fichier .ts en fichier .js ordinaire — car les navigateurs, eux, ne parlent que JavaScript. Retiens l’architecture en une phrase : tu écris du TypeScript, le compilateur vérifie puis produit du JavaScript, et c’est ce JavaScript qui s’exécute. Pour les premiers jours, le Playground en ligne évite même l’installation : code à gauche, vérifications et résultat à droite.
L’annotation, ensuite — la gestuelle de base : let prenom: string = « Sami »; let age: number = 25; let actif: boolean = true; — deux-points, le type, et le contrat est posé : essaie d’affecter du texte à age, le soulignement rouge tombe avant même la compilation. Mais voici la première subtilité élégante : tu n’annoteras pas tout, loin de là. L’inférence fait le gros du travail — let ville = « Lyon »; est déjà une string aux yeux de TypeScript, qui l’a déduit de la valeur. La règle de style qui en découle : annote quand l’inférence ne peut pas deviner (paramètres de fonctions, variables déclarées vides) et laisse-la travailler partout ailleurs. Le concept de fond reste celui de la variable — TypeScript lui ajoute simplement une carte d’identité vérifiée.
Fonctions, tableaux et unions : typer la logique
Les fonctions sont l’endroit où le typage rapporte le plus : function calculeTTC(prixHT: number, taux: number): number { return prixHT * (1 + taux); } — chaque paramètre est typé, la valeur de retour aussi, et deux familles entières de bugs disparaissent : l’appel avec le mauvais type et l’oubli d’argument, tous deux signalés à l’écriture. Bonus quotidien : au moment d’appeler, ton éditeur affiche la signature complète — la fonction se documente elle-même, pour toi et pour quiconque relira.
Les tableaux déclarent leur contenu — const notes: number[] = [12, 15, 9]; — et refusent l’intrus dès l’écriture. Puis vient l’idée typiquement TypeScript : l’union. Un type peut en accepter plusieurs — let identifiant: string | number; — et le compilateur t’oblige alors à la prudence : avant d’utiliser une méthode de chaîne, vérifie que c’en est une (typeof identifiant === « string ») — à l’intérieur du if, TypeScript rétrécit le type et débloque les bonnes méthodes. Ce mécanisme, le narrowing, est ta première rencontre avec l’intelligence du compilateur : il suit ta logique et raisonne avec toi, branche par branche.
Interfaces, optionnels et le mode strict : décrire tes objets
Le cœur expressif du langage : décrire la forme des objets. Une interface Contact { nom: string; ville: string; email: string; } pose le contrat, et tout objet déclaré Contact doit s’y conformer — propriété manquante ou mal orthographiée, refus immédiat, exactement le filet dont le JavaScript des gros projets rêvait. Le mot-clé type rend un service voisin (type Contact = {…}) ; retiens la version simple du débat : interface pour décrire des objets, type pour les unions et compositions — et l’important est d’en choisir un et d’être constant. Ajoute la propriété optionnelle — telephone?: string; — pour les champs facultatifs : TypeScript te forcera alors à vérifier sa présence avant usage, transformant l’oubli classique du undefined en simple rappel à l’ordre.
Reste la brique de discipline : le mode strict. Activé dans la configuration (strict: true — coche-le dès ton premier projet, pas « plus tard »), il durcit toutes les vérifications, notamment sur null et undefined, les deux fantômes du JavaScript. Et il te met face à l’ennemi juré : any, le type-joker qui débranche le filet sur une valeur — chaque any est une zone de non-droit où les vieux bugs reviennent ; les éviter est le premier marqueur d’un TypeScript de qualité. Ton socle est complet : huit briques qui se testent en direct, s’installent en jours, et changent le confort de tous tes projets JavaScript. Fais-les travailler sur nos 10 exercices de TypeScript — dont la seconde moitié convertit de vrais programmes JavaScript existants, l’exercice roi — et garde le vocabulaire à portée : annotation, inférence, union, narrowing — quatre mots qui résument déjà tout le langage.
Dernier réflexe à installer dès aujourd’hui : survole systématiquement tes expressions dans l’éditeur ou le Playground — le type affiché est ta radiographie permanente du code, et vérifier ce que TypeScript a réellement compris vaut toujours mieux que le supposer. Ce petit geste, répété cent fois par semaine sans y penser, est le vrai accélérateur du socle : il transforme chaque minute de code en micro-leçon de typage.
Questions fréquentes
Quelles sont les notions de base à apprendre en TypeScript ?
Dans l’ordre : le compilateur tsc et le Playground, les annotations de types primitifs et l’inférence, les fonctions typées (paramètres et retour), les tableaux typés et les unions avec le narrowing, la description d’objets par interface, les propriétés optionnelles, puis le mode strict — en évitant any.
Faut-il annoter le type de toutes les variables ?
Non : l’inférence de TypeScript déduit seule la plupart des types depuis les valeurs. La bonne pratique consiste à annoter là où elle ne peut pas deviner — paramètres de fonctions, valeurs de retour des fonctions publiques, variables déclarées sans valeur — et à la laisser travailler partout ailleurs.
Quelle différence entre interface et type en TypeScript ?
Les deux décrivent des formes de données et se recouvrent largement. Repère simple pour débuter : interface pour décrire la structure des objets (extensible, idiomatique), type pour les unions, alias et compositions. L’essentiel est de choisir une convention et de s’y tenir dans un même projet.
À quoi sert le mode strict de TypeScript ?
Il active l’ensemble des vérifications rigoureuses, en particulier sur null et undefined, sources classiques de plantages JavaScript. Démarrer tout projet en strict évite d’accumuler du code laxiste à durcir plus tard — et pousse naturellement vers des types précis plutôt que des any de facilité.
Sources
Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.