5 fonctionnalités TypeScript pour améliorer votre code au quotidien (d’après une conférence)

dans cette vidéo nous allons voir cinq astuces pour coder plus vite et mieux avec typescript récemment je suis tombé sur une vidéo de la conférence la plus importante au monde sur angular et qui concernait cinq astuces typesript pour vos applications avec ce framework mais en prenant le temps de réfléchir et bien je me suis rendu compte que ces astuces typescript sont valides quel que soit votre utilisation de ce méta langage que ce soit avec angular react ou vue nous allons donc voir ces cinq astuces que j'utilise toutes personnellement mais peut-être que ça n'est pas votre cas et une seule de ces astuces pourrait grandement vous simplifier la vie et on passe tout de suite à la première astuce qui est de générer des interfaces typescript automatiquement en effet en tant que développeur frontend vous devez souvent interagir avec un backend ou des AP tierces qui vous envoie des données au format gison le problème c'est que ces réponses au format gison et bien n'ont pas vraiment de type et généralement on utilise any pour éviter d'avoir à typer des objets qui sont trop gros et donc vous vous retrouvez avec le code que vous voyez à l'écran où on commence à introduire des méthodes qui retournent ENI et ça c'est pas très cool pour au moins trois raisons premièrement ce que vous êtes en train de faire c'est plus ou moins de désactiver la vérification des types et donc ça c'est un petit peu dommage quand on utilise typescript la deuxième raison c'est que vous désactivez l'autocomplession que typescript fournit automatiquement dans votre éditeur de code et troisièmement vous développez de mauvaises habitudes en commençant à vous habituer à utiliser ENI comme si ça n'était pas si grave que ça et donc au lieu d'apprendre à utiliser des types spécifiques et renforcer vos compétences en code et bien on commence à être un petit peu laxiste là-dessus heureusement ce qui est présenter comme première astuce dans la vidéo que j'ai vu sur la conférence et bien c'est d'utiliser le site quicktype.o qui va vous permettre de spécifier automatiquement des types pour les réponses du backend que vous utilisez autrement dit vous allez simplement lui passer le gison qui est la réponse du backend et vous allez recevoir une interface typescript à copier-coller directement dans votre code donc premièrement si vous souhaitez utiliser ce site ce que vous devez faire c'est aller dans la console de développement de votre navigateur pour récupérer la réponse du backend que vous voulez typer deuxièmement vous allez sur quicktype.ao et vous copiez-clez cette réponse à gauche sur le site et là automatiquement et bien quicktype.ioo va générer les interfaces qui correspondent à la structure de données que vous lui avez passé ensuite vous pouvez simplement récupérer cette structure de typage l'ajouter à votre projet et comme vous pouvez le voir à l'écran dans votre code vous allez remplacer ENI par une interface avec un tipage plus fort sans beaucoup d'effort comme on vient de le voir et voilà ça n'est pas plus compliqué que ça vous savez générer automatiquement des interfaces pour des types un peu velus en typescript et on passe tout de suite à la deuxième astuce qui est de pouvoir typer des objets que l'on construit étape par étape en effet très souvent pour construire un objet qu'on va utiliser au final dans une application fronend et bien on a parfois besoin de deux appels au backend c'est assez courant dès qu'on a un projet qui commence à gagner un un petit peu en complexité le problème c'est que en devant construire un objet qui dépend de deux requêtes HTTP différentes et bien entre le moment où on a déjà la réponse de la première requête et pendant qu'on est en train d'attendre la réponse de la deuxième requête et bien on est dans un état intermédiaire qui peut être un petit peu bâtard et notamment pour le typage on sait pas trop ce qu'on doit faire prenons l'exemple suivant vous avez des questionnaire en ligne à récupérer depuis un backend distant et donc vous allez avoir un objet question qui lui-même avoir plusieurs options le problème c'est qu'au moment où vous récupérez la question et bien vous avez pas encore toutes les options possibles vous devez attendre une autre requête à ce momentl on pourrait bien sûr marquer la propriété option comme facultative mais ça n'est pas vraiment le cas puisque toutes les questions doient avoir une série d'options associé donc ce qu'on viendrait faire ici c'est tricher en rajoutant un point d'interrogation par exemple et ça n'est pas ce que nous voulons faire puisque à ce moment-là en fait on décrirait un état invalide à la place on peut faire beaucoup mieux en typescript en utilisant un type d build in c'est-à-dire dire directement intégré à typescript qui s'appelle partial partial va nous permettre de créer un nouveau type à partir d'un type existant en expliquant que cette structure de données est partielle c'est-à-dire que toutes ces propriétés sont pour l'instant facultatives cela nous permet donc d'avoir un nouvel État qui décrit un type temporaire pour le type question qui lui est décrit de manière intacte sans corruption et pour construire ce nouveau type et bien c'est très simple il suffit d'utiliser partial avec entre chevron et bien le type que vous voulez rendre partiel c'est-à-dire pour des pour décrire un état temporaire donc comme vous voyez à l'écran il y a un gain énorme puisque l'objet question qu'on a décrit et bien décrit un état qui est valide et on vient juste créer un nouveau type à la volée avec partial pour décrire l'état temporaire sans corrompre l'état d'arrivée ainsi vous êtes maintenant capable de typer des objets qui doivent être créés en plusieurs étapes sans corrompre la ligne d'arrivée c'est-à-dire le type final et on passe tout de suite à la troisème astuce qui est d'utiliser des unions de type plutôt que des énumes alors celui-là c'est vraiment une croyance forte que j'ai il ne faut pas utiliser des énumes en typescript ça a très peu d'intérêt et je dirais même que ça a peu d'intérêt je dirais même que c'est dangereux et contre-productif voici pourquoi les énumes en typescript sont particulières puisque contrairement aux autres langages elles ont pas du tout autant de fonctionnalités donc prenons un exemple simple sur le code que vous voyez à l'écran on a une énume assez pête et méchante comme on peut le voir ici cette énume est très simple voire simpliste puisqu'elle ne fait que simplement d'écrire une liste de constantes quand on y réfléchit bien il y a plusieurs problèmes avec cette structure de données premièrement vous ne pouvez pas itéré dessus les éumes en typescript n'implémentent pas le pattern Iterable deuxièmement vous avez aucun avantage d'utiliser une enume comparé aux autres langages comme le java par exemple en Java une enume va être une instance d'une classe vous allez pouvoir lui ajouter des propriétés des méthode ce qui n'est pas le cas avec typescript donc ici on n pas gagné grand-chose en utilisant cette enum on a simplement décrit une liste de constantes et en plus à la compilation vous allez hériter d'une taxe puisque dans votre bundle finale vous allez retrouver la monstruosité JavaScript que vous voyez à l'écran directement dans votre code en production donc non seulement vous avez écrit du code qui produit pas grand-chose mais ça vient alourdir votre livrable final plutôt que d'utiliser cet enum et bien il est recommandé dans l'écosystème typescript d'utiliser à la place des unions de type les unions de type ont trois avantages principaux par rapport aux éumes premièrement ils sont beaucoup plus court et moins verbeux à écrire comme vous pouvez le voir sur l'écran ici on a simplement les strings qui décritent les directions que peut prendre un élément deuxièmement les type union peuvent être combinés eux-mêmes pour décrire une structure de données encore plus complexe sans problème et troisièmement vous bénéficiez gratuitement entre guillemets du typage de typescript puisque une fois que vous allez livrer votre code en production et bien tout le code typescript des union type ne se retrouveront pas dans le livraable final ils sont utilisés simplement pour le typage statique avec typescript donc c'est beaucoup plus léger à écrire vous ne perdez rien en passant sur les unions de type plutôt que les é et en plus la taxe sur votre livrable finale est de 0 kilct en utilisant les unions de type et on passe à la 4è astuce qui est l'inférence de type en utilisant l'opérateur de coalescence nul il est très courant dans une application frontain et bien d'avoir des valeurs qui attendent une première réponse du serveur avant d'être initialisé on se retrouve donc très couramment avec des variables qui ont soit une valeur soit undefined ou nul par exemple on peut donc obtenir en exagéré le genre de code que vous voyez à l'écran qui est à la fois très verbeux et très désagréable à travailler avec heureusement typescript a introduit avant JavaScript mais maintenant vous l'avez même dans le langage de base un opérateur qui s'appelle l'opérateur de coalescence nulle qui va vous permettre de vérifier avec simplement le double symbole point d'interrogation si une variable vaut nul ou unfine et si c'est le cas lui attribuer une valeur par défaut et l'intérêt de l'utiliser avec typescript et bien c'est que typescript va pouvoir deviner le type tout seul en sachant que cet opérateur pointe sur les valeurs Nules ou undfin précisément cet opérateur vous permet également d'écrire moins de code donc ça vous fera moins de bazar sur votre livrable final et ça chargera un tout petit peu plus vite et enfin ce nouvel opérateur est beaucoup plus efficace précis que l'ancienne manière de faire en Javascript où on utilisait l'opérateur ou en effet l'opérateur ou n'est pas basé sur les valeurs undefin ou nul précisément mais sur toutes les valeurs qui sont évaluées à fsy en javascript par exemple une chaîne de caractèrees vide zéro ou encore nan et bien vont être considér comme fsy et donc une valeur par défaut va leur être attribuée c'est très gênant si vous manipulez par exemple un âge qui vaut zéro ce qui est possible quelqu'un qui a moins d'un an et bien JavaScript va considérer que cette personne n'a pas d'âge et essayer de lui attribuer une valeur par défaut et donc comme on le voit à l'écran si vous manipulez un âge qui vaut zéro mieux vaut utiliser l'opérateur de coalessence nul donc vraiment je vous recommande d'utiliser cet opérateur sans modération dès que ça fait sens dans votre code il y a vraiment 5 minutes d'adaptation pour la syntaxe et ensuite c'est du pur bonus par rapport à ce qu'on avait jusque-l dans cet écosystème astuce numéro 5 simplifier les chemins d'importation avec typescript est-ce que vous avez déjà eu des chemins d'importation qui ressemblent à ça dans votre code effectivement ça n'est pas terrible et imaginez qu'ici on a qu'une seule ligne d'importation mais imaginez un projet un peu plus important où on aurait 30 lignes d'importation pour un fichier et les 30 lignes ressembleraient au code que vous venez de voir ça serait très désagréable de démarrer dans un fichier comme ça heureusement typescript permet de faire mieux que ça avec ce qu'on appelle les path mapping concrètement ça vous permet simplement de renommer des chemins d'importation vers des fichiers ce qui correspond exactement à ce qu'on veut faire donc essayons d'améliorer le chemin du fichier précédent pour rendre l'importation un peu moins lourde premièrement ce que vous devez faire c'est aller dans le fichier tsconfig.gison de votre projet et à l'intérieur vous allez pouvoir ajouter votre PAF mapping dans la propriété qui s'appelle PAF qui porte bien son nom et ensuite vous allez pouvoir utiliser la nouvelle importation en util an votre PAF mapping directement dans votre fichier comme vous pouvez le voir à l'écran ça rend les importations beaucoup plus claires et ça permet de mettre de l'intention dans la structure de votre projet ici vous vous demandez aussi peut-être pourquoi j'ai mis un arobas c'est une convention je ne crois pas que ce soit obligatoire mais je vous recommande de suivre cette convention puisque sans la convention vous aurez beaucoup de mal à faire la distinction entre les PAF mapping et les chemins normaux qui auraient quasiment le même nomage voilà maintenant vous avez des importations beaucoup plus structuré et ça montre que vous prenez soin de votre code base et ça ça fait plaisir et donc on a vu les cinq astuces mais je voulais vous en montrer une dernière une bonus une petite pépite et juste avant je me présente pour ceux qui seraient nouveau sur la chaîne je m'appelle Simon je suis développeur professionnel depuis 7 ans et instructeur sur udemi for business j'ai créé cette chaîne pour enseigner comment produire du code en entreprise puisque tous les tutoriels que j'avais suivi à l'époque et bien ne m'enseignez pas comment gérer des niveaux de complexité pour des projets en entreprise en effet faire une petite application de todo list ou un tableau camban c'est super pour apprendre à coder mais quand vous allez arriver en entreprise vous allez peut-être devoir coder un système de réservation de billets d'avion en ligne donc vous comprenez bien que le niveau de complexité est beaucoup plus important et comment on code ce genre de logiciel dans la vraie vie ça c'est une autre paire de manch et c'est ce que j'essaie de résoudre sur cette chaîne donc si la problématique vous intéresse et bien vous retrouverez une nouvelle vidéo chaque semaine sur la chaîne et on passe tout de suite à la 6e astuce bonus qui est une de mes préférées qui consiste à utiliser le mots-cé readon partout en typescript en effet vous pouvez abuser du motcé readon on neutilise jamais assez en typescript ça coûte pas grand-chose et c'est du pur bonus donc voici quatre endroits où vous pouvez l'appliquer quasiment systématiquement si ça fait sens premièrement dans toutes les propriétés d'un objet par exemple les propriétés d'un composant Web si vous décrivez une propriété qui n'a qu'une valeur possible et qui va pas changer pendant la durée de vie du composant marquezla comme readidon ainsi cette propriété sera immutable aussi quand vous injectez des services par exemple dans un composant Web ou dans un constructeur et bien utiliser le mot clé readon pour dire que le client de ce service ne va pas le muter vous allez simplement le consommer donc marquez-le comme readon il sera aussi immutable ça évite des erreurs parfois d'inattention ou parfois de sauvagerie totale troisième endroit vous pouvez utiliser ridon c'est dans les paramètres d'une fonction d'une méthode généralement il est recommandé quand vous appelez une méthode avec des paramètrre de ne pas venir muter ces paramètres là si vous devez retourner une valeur vous créez une copie et vous retournez une nouvelle valeur ça coûte pas grand-chose et ça aide à scaler des codes base assez facilement pour cela vous pouvez simplement utiliser readonly devant les paramètres de cette méthode ou de cette fonction pour être sûr de ne pas venir les muter dans le corps de la méthode ou de la fonction en question et enfin 4è endroitù vous pouvez utiliser readon sans modération c'est si vous avez une propriété qui est privée et vous utilisez un getter pour exposer cette valeur donc prenons un exemple vous avez une classe personne qui a un nom et ce nom n'a pas vocation à bouger et bien plutôt que de marquer le nom comme privé dans la classe et de l'exposer avec un getter ce qui fait un peu de travail vous pouvez simplement utiliser le mot-cé readidon ainsi vos clients y auront accès mais pourront pas venir corrompre la donnée donc je vous ai mis à l'écran et bien un petit récapitulatif des quatre endroits où vous pouvez abuser de readonly et comme vous pouvez le voir ça coûte pas grand-chose et ça vient améliorer la qualité de votre code instantanément donc on a vu les cinq astuces type script et bien qui viennent de la conférence initialement sur angular mais comme on peut le voir ça peut servir sur n'importe quel projet qui utilise du typescript et puis je vous ai rajouté en bonus le fait d'utiliser readon partout vous ne le regretterez pas et si vous avez d'autres astuces types sccript des petites pépites à donner et bien mettez-les en commentaire pour les partager avec tout le monde je serai le premier à vous répondre voilà en tout cas j'espère que la vidéo vous a plu et vous a apporté de la valeur et si vous cherchez en ce moment à devenir développeur web professionnel rapidement et bien voici trois manières don je peux vous aider gratuitement premièrement vous pouvez repasser de temps en temps sur la chaîne pour visionner une nouvelle vidéo sur un principe de code senior deuxièmement si vous souhaitez avoir des interviews de gens pointus dans notre industrie et bien vous pouvez poser vos questions en commentaire interagir en mettant des pouces bleus ça va faire connaître la chaîne suffisamment pour qu'on ait de la crédibilité si demain je vais demander à un teclit chez Google s'il veut passer sur la chaîne si on est 100000 il y a plus de Chan qu'il disent oui que si on est 90 et enfin j'ai mis en libre service et bien un workshop pour être prêt pour votre premier jour en entreprise sur JavaScript le langage derrière tous les framework frontain ce workshop dure entre 3 et 4h il est en libre accès et vous pouvez le rejoindre tout de suite en cliquant sur le premier lien en description juste sous cette vidéo par contre il ne sera accessible que jusqu'à fin juin puisque'ensuite il sera retiré pour être remplacé par un autre workshop en tout cas je vous dis à bientôt pour une prochaine vidéo bon code seigneor d'ici là Ciao