Ce qu'est TypeScript
TypeScript est un langage de programmation open source développé par Microsoft et publié en 2012. C'est un sur-ensemble de JavaScript : tout code JavaScript valide est du TypeScript valide, mais TypeScript ajoute une couche de typage statique optionnel au-dessus de JavaScript. Avant d'être exécuté dans le navigateur ou sur un serveur, le code TypeScript est compilé (transpilé) en JavaScript standard.
Le typage statique est la caractéristique fondamentale de TypeScript. En JavaScript, une variable peut contenir n'importe quel type de valeur et changer de type en cours d'exécution. TypeScript permet de déclarer explicitement le type attendu d'une variable, d'un paramètre de fonction ou d'une valeur de retour. Si le code essaie d'utiliser une valeur d'un type incorrect, TypeScript signale l'erreur avant même l'exécution du programme.
C'est cette capacité à détecter les erreurs à la compilation plutôt qu'à l'exécution qui a fait de TypeScript le standard de facto du développement JavaScript professionnel. Aujourd'hui, les frameworks les plus importants de l'écosystème JavaScript, React, Next.js, Angular, Vue.js, Node.js, sont tous écrits en TypeScript ou supportent TypeScript nativement. L'écrasante majorité des projets web professionnels sérieux utilisent TypeScript.
Ce que le typage statique change concrètement
Pour comprendre l'apport de TypeScript, il faut comprendre ce que le typage statique résout dans JavaScript.
La détection précoce des erreurs. En JavaScript, une erreur de type (passer une chaîne de caractères là où une fonction attend un nombre, accéder à une propriété qui n'existe pas sur un objet) n'est détectée qu'à l'exécution, parfois en production devant les utilisateurs. TypeScript détecte ces erreurs dès qu'on écrit le code, dans l'éditeur, avant même de lancer l'application. C'est la différence entre corriger un bug en 30 secondes et passer deux heures à déboguer un problème en production.
L'autocomplétion et l'assistance à la saisie. Un éditeur de code qui comprend TypeScript peut suggérer automatiquement les méthodes et propriétés disponibles sur un objet, afficher la documentation inline et signaler les usages incorrects en temps réel. Cette assistance réduit la charge mentale nécessaire pour travailler sur un projet et accélère considérablement la productivité.
La documentation vivante. Les types TypeScript sont une forme de documentation qui reste toujours à jour parce qu'elle fait partie du code. Quand une fonction attend un paramètre de type User avec des propriétés id, name et email, cette information est explicite dans le code. Un développeur qui utilise cette fonction sait exactement ce qu'il doit passer sans avoir besoin de consulter une documentation externe.
La refactorisation plus sûre. Renommer une propriété, modifier la signature d'une fonction ou restructurer un module dans un projet JavaScript nécessite de trouver et corriger manuellement toutes les utilisations de ce qui a changé, avec le risque d'en oublier. TypeScript signale automatiquement tous les endroits du code qui sont impactés par une modification, rendant la refactorisation beaucoup plus sûre sur les grands projets.
Les concepts fondamentaux de TypeScript
Les types primitifs. TypeScript enrichit les types primitifs de JavaScript avec des annotations explicites. string, number, boolean, null, undefined, symbol sont les types de base. On peut annoter une variable : const name: string = "Studio Seja" indique que name est une chaîne de caractères et ne peut pas être réassignée avec un nombre ou un booléen.
Les interfaces et les types. Ce sont les outils pour définir la forme d'un objet. Une interface User peut déclarer que tout objet de ce type doit avoir une propriété id de type number, une propriété name de type string et une propriété email optionnelle de type string. Si une fonction reçoit un paramètre de type User, TypeScript vérifie que l'objet passé a bien cette structure.
Les génériques. Les génériques permettent de créer des fonctions et des classes qui fonctionnent avec différents types tout en maintenant la cohérence de type. Une fonction getFirstItem<T>(array: T[]): T retourne le premier élément d'un tableau de type T. Peu importe que T soit string, number ou User, TypeScript garantit que le type de retour correspond au type des éléments du tableau.
L'inférence de type. TypeScript est capable de déduire le type d'une variable depuis sa valeur initiale sans qu'on ait besoin de l'annoter explicitement. const count = 0 est automatiquement inféré comme number. Cette capacité réduit le verbosité du code TypeScript et explique pourquoi l'adoption de TypeScript ne nécessite pas d'annoter chaque ligne.
Les types utilitaires. TypeScript propose des types utilitaires intégrés qui facilitent la manipulation des types : Partial<T> rend toutes les propriétés d'un type optionnelles, Required<T> les rend toutes obligatoires, Pick<T, K> crée un type avec seulement certaines propriétés, Omit<T, K> crée un type en excluant certaines propriétés.
TypeScript dans l'écosystème Studio Seja
Dans les projets d'applications sur mesure développés chez Studio Seja, TypeScript est le standard systématique pour tous les projets Next.js. Son adoption est justifiée par plusieurs raisons pratiques.
Sur un projet avec plusieurs développeurs qui interviennent à des moments différents, TypeScript garantit que les interfaces entre les composants, les fonctions et les modules sont explicites et vérifiées. Un nouveau développeur qui rejoint un projet TypeScript peut comprendre la structure des données et les contrats entre les parties du code en lisant les types, sans avoir à lire l'ensemble du code ou la documentation.
Drizzle ORM, utilisé pour les interactions avec les bases de données PostgreSQL, génère automatiquement des types TypeScript depuis le schéma de la base de données. Cela signifie que les requêtes à la base de données bénéficient d'une vérification de type de bout en bout : si le schéma change, les erreurs sont détectées immédiatement dans tout le code qui utilise les données affectées.
FAQ
TypeScript est-il difficile à apprendre pour quelqu'un qui connaît JavaScript ?
La courbe d'apprentissage est progressive. On peut commencer à utiliser TypeScript en ajoutant progressivement des annotations de type à du code JavaScript existant, sans tout réécrire. Les concepts les plus courants (types primitifs, interfaces, inférence de type) s'apprennent en quelques jours. Les concepts avancés (génériques complexes, types conditionnels, mapped types) prennent plus de temps mais ne sont pas indispensables pour commencer à bénéficier de TypeScript.
TypeScript ralentit-il le développement ?
Au démarrage d'un projet, les annotations de type ajoutent un léger overhead. Sur la durée d'un projet, TypeScript accélère le développement : moins de bugs, refactorisation plus rapide, meilleure compréhension du code. La productivité nette est généralement supérieure avec TypeScript, particulièrement sur les projets qui durent plusieurs mois et impliquent plusieurs développeurs.
Peut-on utiliser des bibliothèques JavaScript dans un projet TypeScript ?
Oui. La plupart des bibliothèques populaires publient leurs définitions de types soit directement dans le package, soit via le dépôt DefinitelyTyped (packages @types/* sur npm). Pour les bibliothèques sans types disponibles, on peut déclarer des types minimaux ou utiliser any comme solution de contournement.
TypeScript est-il supporté nativement par les navigateurs ?
Non. Les navigateurs exécutent JavaScript, pas TypeScript. Le code TypeScript doit être compilé en JavaScript avant d'être exécuté. Dans les projets Next.js et React, ce processus de compilation est géré automatiquement par les outils de build (Webpack, Vite, Turbopack) et est transparent pour le développeur.
