Comprenez la différence entre JavaScript et TypeScript
Maintenant que vous savez coder en JavaScript, il est temps de s’avouer quelque chose : nous n’écrivons jamais de code correct du premier coup, n’est-ce pas ?
Il est très courant, même chez les plus expérimentés d’entre nous, d’écrire un code envahi de bugs divers et variés. C’est seulement après l’avoir exécuté et testé plusieurs fois qu’on parvient à l’affiner, le corriger et le rendre fonctionnel.
Prenons le code ci-dessous :
function addition(x, y) {
return x + y;
}
const result = addition('10', '20');
console.log(result);On définit ici une fonction dont le but est d’additionner deux nombres.
À première vue, tout semble OK ici. Et pourtant, lorsqu’on exécute le code, voici ce qui est affiché dans la console :
> '1020'
Le développeur qui a écrit ces lignes s’attendait sans doute à recevoir le nombre 30, au lieu de ce 1020.
Ici, le souci est que nous essayons d’additionner des chaînes de caractères au lieu de nombres : notez bien les apostrophes autour de '10' et '20' ! Nous avons donc ici un problème de type.
Dans les langages de programmation, les variables sont “catégorisées”. Par exemple, les chaînes de caractères (délimitées par des apostrophes comme 'fraise' , 'radiateur' ou même '10' ) ont le type string. Les nombres (sans apostrophes donc, par exemple 10 ou 20 ) ont le type number.
En JavaScript, on ne se préoccupe que très peu de ces types, ce qui rend ce langage très souple, mais aussi peu robuste : il est tout à fait possible en JavaScript d’additionner des nombres avec des chaînes de caractères, même si cela n’a pas de sens !
Tout l’intérêt de TypeScript est d’ajouter des vérifications sur les types : il n’est plus possible de faire n’importe quoi avec les types qu’on manipule. Si vous essayez d’additionner des nombres avec des chaînes de caractères, TypeScript vous dira qu’il y a quelque chose qui cloche dans ce que vous faites !
Autrement dit, TypeScript ajoute une couche de sécurité sur votre code, en vous prévenant des erreurs éventuelles que vous pourriez écrire.
Grâce à cette rigueur, les problèmes liés aux types comme celui que nous venons de voir ne sont plus possibles, car TypeScript indique en avance que le code risque de ne pas fonctionner comme prévu.
Vous pouvez voir JavaScript comme votre cousin casse-cou avec qui vous pouvez faire tout et n’importe quoi, quitte à tomber et vous faire mal. TypeScript serait alors votre tante un peu stricte, qui va parfois vous agacer, mais qui reste malgré tout très protectrice et a toujours de précieux conseils à donner.
TypeScript, c’est tout simplement JavaScript dans un cadre plus sécurisé.
Même si TypeScript est un langage à part entière, il est important de comprendre qu’il ne s’agit que de JavaScript avec des fonctionnalités en plus. Cela signifie qu’un code JavaScript classique est un code TypeScript fonctionnel !
Je vais le dire autrement pour que ça soit plus clair pour vous : si vous avez déjà codé en JavaScript, alors vous avez déjà codé en TypeScript ! Et ce, sans le savoir, vous êtes trop fort ! 😎
TypeScript ne fait qu’apporter une notion de typage à votre code JavaScript, et c’est sur cette notion que ce cours va se concentrer.
Écrivez en TypeScript pour vous, pas pour vos utilisateurs
Si écrire du code TypeScript revient en effet à écrire du JavaScript “amélioré”, les choses se compliquent très légèrement quand il s’agit d’exécuter ce code.
Si vous lisez ce cours, il est probable que vous écriviez déjà du code JavaScript pour le web ou pour Node.js. Que ce soit via un navigateur Internet ou un terminal, votre code est exécuté par un interpréteur JavaScript. C’est cet interpréteur qui lit le code, l’analyse, le comprend puis l’exécute.
Et il se trouve que cet interpréteur ne comprend que JavaScript : il n’est pas capable de gérer TypeScript !
Il est donc nécessaire de transformer nos fichiers TypeScript en fichiers JavaScript. Fort heureusement, cela ne se fait pas manuellement : nous utiliserons un outil qui fera cette transformation pour nous. On appelle cette opération la compilation.
Ceux-ci exécuteront toujours du bon vieux JavaScript généré à partir de nos fichiers TypeScript. Puisque TypeScript n’est jamais exécuté par nos utilisateurs, cela implique un point très important de ce langage : il s’agit d’un outil destiné aux développeurs.
Comprenez bien que ce langage ne vous apportera pas de nouvelles fonctionnalités vous permettant de coder plus vite des choses plus complexes. Ce n’est pas son but ! Toute la philosophie derrière TypeScript est d’écrire du code plus robuste en indiquant clairement nos intentions à l’aide de types.
Utilisez TypeScript selon vos besoins
Maintenant que vous avez bien en tête l’intérêt de TypeScript (pour les deux au fond qui ne suivent pas, je le répète une dernière fois : ajouter une notion de type à votre code JavaScript afin de le rendre plus robuste), il est temps de parler du point qui fâche : les inconvénients de ce langage.
Comment ça, des inconvénients ? Pourquoi voudrais-je apprendre un langage qui n’est pas parfait ?
Tout d’abord, sachez qu’aucun langage n’est parfait. Chaque technologie apporte son lot de problématiques qu’il est important de connaître. Pas assez performant, pas complet, trop compliqué, trop peu connu sur le marché… Les défauts possibles sont nombreux !
Concernant TypeScript, voici quelques points que vous pourriez voir comme des inconvénients.
Point 1. Une nouvelle technologie à apprendre
Même si TypeScript se veut simple d’utilisation de par sa philosophie (être du JavaScript “amélioré”), ça n’en reste pas moins une nouvelle technologie à apprendre. C’est d’ailleurs pour ça que vous êtes sur ce cours ! Si votre projet est écrit en TypeScript, cela pourrait freiner la collaboration des développeurs ne sachant coder qu’en JavaScript. Il faut l’avoir en tête si vous souhaitez recruter du monde pour vous aider !
Point 2. Une complexité supplémentaire à appréhender
On l’a vu, il est nécessaire de compiler les fichiers TypeScript en fichiers JavaScript. Cette étape de compilation implique qu’il y a désormais un intermédiaire entre le code que vous écrivez et le code qui sera exécuté. Si vous aviez l’habitude de copier-coller votre code JavaScript dans la console de votre navigateur pour le tester, ça ne sera pas possible avec TypeScript !
De plus, si vous êtes déjà sur un projet bien évolué qui utilise des tests unitaires ou autres outils de vérification de code comme ESLint, vous allez devoir installer des adaptateurs pour que ces outils comprennent TypeScript.
Heureusement, l’écosystème autour de tout ça est déjà assez mature et propose plein de solutions pour vous aider, mais ça reste quand même des problématiques qu’on n’aurait pas sans TypeScript.
Point 3. Le code peut être plus difficile à lire
Même si TypeScript est “juste” du JavaScript amélioré, l’ajout des types ajoute un peu de bruit visuel dans notre code :
function addition(x: number, y: number): number {
return x + y;
}Si vous ne comprenez pas forcément tout ce qui est écrit dans ces lignes (et pour cause, nous n’avons pas encore vu comment écrire en TypeScript !), cette petite mise en bouche montre que la déclaration des types number se fait directement au milieu du code.
Ici, le cas est assez basique donc la lisibilité n’est pas trop impactée, mais pour les cas plus complexes, c’est une autre paire de manches.
Voici par exemple un extrait de code d’OpenClassrooms :
function getActiveRoleNames<
Variant extends EmployerEntityType,
Roles = Array<
Variant extends EmployerEntityType.ORGANIZATION ? Role : TeamRoleName
>
>(userRoles: Roles, fromTimestamp: number, roleType: Variant): EmployerRoleNameType[] {
// … Peu importe ce que fait la fonction !
}Il est certain que si vous n’avez pas l’habitude de la syntaxe de TypeScript, votre réaction face à ces lignes devrait être à peu près celle-ci : 😱
Ce problème de lisibilité est amoindri avec l’habitude : plus vous écrirez et lirez du TypeScript, plus tout ceci vous semblera clair. Mieux, les types ajoutés dans votre code pourront même vous servir de documentation, car vous saurez en un seul coup d'œil les types attendus et retournés par vos fonctions !
Mais effectivement, quand on débute, toute cette surcouche peut être un peu rebutante.
Point 4. La rigueur demandée peut être frustrante
Pour être réellement utile, TypeScript demande à expliciter correctement les types de toutes nos variables. Au moindre écart, à la moindre incohérence, TypeScript vous le fera remarquer.
Cette rigueur imposée, inexistante avec JavaScript, peut perturber et frustrer au début. Nous sommes tous passés par là, moi le premier, alors accrochez-vous !
Téléchargez et compilez TypeScript
Je ne connais pas du tout Node.js… Suis-je fichu pour suivre ce cours ?
Absolument pas ! Node.js nous servira uniquement à récupérer TypeScript et appeler son compilateur, rien de plus. Et je vous explique comment installer tout cela :
Vous avez besoin d'avoir un récapitulatif ? On reprend tout ici pas à pas concernant l'installation :
Une fois Node.js installé, créez un nouveau dossier où vous le souhaitez dans votre ordinateur, entrez dedans et lancez-y un terminal. Lancez la commande suivante pour initialiser un nouveau projet :
npm init -y
Ceci générera un fichier package.json, contenant les bases de la configuration d’un nouveau projet de développement.
Lancez ensuite la commande ci-dessous pour installer TypeScript :
npm install typescript --save-dev
Et voilà, vous êtes prêt à utiliser TypeScript ! Pour s’assurer que tout est OK, nous allons essayer de compiler du code. Créez dans le dossier du projet un fichier my-file.ts et copiez-collez dedans le contenu suivant :
const age: number = 10;Lancez alors la compilation de ce fichier via la commande ci-dessous :
npx tsc my-file.ts
Ceci génère un fichier my-file.js juste à côté de my-file.ts.
Si vous êtes curieux, je vous invite à regarder le contenu de ce fichier JavaScript pour voir comment le code TypeScript a été compilé.
Sachez que si votre code contient des erreurs de type, la compilation échouera !
Pour la suite du cours, sachez que je ne vous demanderai pas systématiquement de compiler. Je vous invite, cela dit, à le faire le plus souvent possible pour vérifier la validité de votre code.
En résumé
TypeScript, finalement, ce n’est que du JavaScript avec des types.
On n’exécute pas du TypeScript directement : on doit le compiler en code JavaScript.
Le but premier de TypeScript est d’améliorer l’expérience développeur en remontant en amont les erreurs de notre code.
Maintenant que tout est clair sur ce qu’est et n’est pas TypeScript, nous allons pouvoir nous attaquer au vif du sujet : écrire avec ce langage !
