Récemment, j'ai vu un tweet de Jamie Kyle sur l'utilisation de la déstructuration, des paramètres par défaut et des types en ligne :   https://twitter.com/buildsghost/status/1577030375158607872?s=20&t=0qa78fG7TzsSdxrsM1sCvg?embedable=true  Ce tweet et quelques composants React que j'ai vus récemment dans mon travail quotidien m'ont inspiré pour écrire ce billet de blog. Je veux vous montrer comment l'utilisation de la déstructuration et des types inline peut rendre votre TypeScript moins lisible !  À quoi ressemble la définition de la fonction TypeScript ?  En JavaScript et TypeScript, vous pouvez définir une fonction à l'aide du mot-clé de   ou de la fonction lambda/flèche. Les deux manières sont valables mais ont leurs différences. Jetons un coup d'œil à la simple fonction   . La logique de mise en œuvre ne nous concerne pas. function sendMessage   // sendMessage function written using `function` keyword function sendMessage(message: string) { // function logic } // same sendMessage written as arrow function const sendMessage = (message: string) => { // function logic };  Lorsque la définition de la fonction est assez simple, la fonction accepte quelques paramètres d'un type différent. S'il s'agit de primitives comme des chaînes ou des nombres, tout est lisible.  Supposons que vous souhaitiez transmettre des informations supplémentaires à côté du contenu de votre message à la fonction   . sendMessage   function sendMessage(message: { content: string; senderId: string; replyTo?: string; }) { // you can assess content using `message.content` here }  Comme vous pouvez le constater, TypeScript vous permet d'écrire une définition de type en ligne pour l'objet de   que vous souhaitez transmettre sans spécifier le type à l'aide du mot clé   ou   . message type interface  Ajoutons Destructuring. Lorsque vous transmettez un objet de   volumineux à votre fonction, TypeScript permet de séparer les arguments passés pour réduire le code passe-partout consistant à répéter plusieurs fois la variable de   . message message   function sendMessage({ content, senderId, replyTo, }: { content: string; senderId: string; replyTo?: string; }) { // you have access to `content` directly }  Pourquoi est-ce que je pense que c'est une mauvaise idée et comment pouvez-vous l'améliorer ?  Cela peut sembler une bonne idée, après tout, vous n'avez pas besoin d'écrire   autant de fois, n'est-ce pas ? Il s'avère que ce n'est pas si génial. Parlons de 5 raisons pour lesquelles je pense que c'est un anti-modèle. message  1. Vous ne savez pas d'où proviennent vos données  Lorsque vous lisez le corps de la fonction, vous voyez   , vous devez revérifier pour être sûr d'où vient cette fonction. Est-il passé en argument ou calculé quelque part dans la fonction ? senderId  2. Il est difficile d'écrire de la documentation  Il n'y a pas d'endroit naturel pour écrire des commentaires de documentation lorsque tous les types sont à l'étroit avec la déstructuration dans la définition de la fonction. Vous pouvez écrire des commentaires entre chaque champ de type, mais cela rend la définition de la fonction entière encore plus longue. Cela vous décourage activement d'écrire un résumé rapide des données que vous transmettez.  3. Il est difficile de transmettre ces données  Lorsque vos données sont déstructurées, vous devez les structurer à nouveau dans un nouvel objet si vous souhaitez les transmettre. Cela décourage la création de fonctions d'assistance plus petites et l'utilisation de la composition pour créer la logique de votre fonction principale.  4. Vous ne pouvez pas réutiliser les types d'arguments en dehors de cette fonction  Si vous avez besoin de réutiliser vos arguments de fonction dans des fonctions d'assistance lors de la composition de votre logique de fonction principale, vous devez taper le même ensemble de types à plusieurs reprises. Cela rend plus facile de ne pas écrire de types du tout.  5. Cela prend juste beaucoup de place  Avouons-le. C'est juste beaucoup de lignes de code qui occupent beaucoup d'espace à l'écran. Et en plus, il se concentre sur les détails d'implémentation - le type interne des arguments que vous transmettez à une fonction, qui n'est la plupart du temps pas pertinent lorsque vous regardez cette fonction.  Créez simplement un type pour cela  Extraire le type et le placer juste au-dessus de la fonction le rend beaucoup plus lisible. Il y a un endroit pour les commentaires de documentation, vous pouvez réutiliser ce type dans une autre fonction d'assistance et modifier la définition de type à un endroit si nécessaire.   /** * Message to send using XYZ API */ export type MessageToSend = { /** * Markdown string of the user's message */ content: string; /** * Id of the sender user */ senderId: string; /** * Other message ID if this is a reply */ replyTo?: string; }; function sendMessage(message: MessageToSend) { // function logic } function getUserIdsToNotify(message: MessaageToSend) { // function logic }  Ressources  Trouvez une liste des ressources que j'ai utilisées lors de la recherche de cet article de blog :   https://www.typescriptlang.org/docs/handbook/variable-declarations.html#object-destructuring

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Alongside

Twitter

Read My Stories

Cet audio est produit dans la langue originale de l'histoire !

L'utilisation de la déstructuration et des types en ligne peut nuire à votre base de code TypeScript

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps