Typescript avancé avec instance (Partie 1)

La semaine dernière, nous avons vu une petite introduction à Typescript, en particulier comment ce langage qui étend JavaScript peut nous aider à créer un code plus robuste. Comme ce n’est qu’une introduction, je n’a i pas mentionné certaines des caractéristiques du Typescript que vous aimeriez (ou pourriez avoir besoin) utiliser dans votre projet. Aujourd’hui, je vais vous montrer comment appliquer professionnellement Typescript dans des projets réels. Pour ce faire, nous examinerons d’abord une partie du code source du contenu de nelio pour voir par où nous commençons et quelles sont nos limites actuelles. Ensuite, nous améliorerons progressivement le code JavaScript Original en ajoutant quelques améliorations incrémentales jusqu’à ce que nous obtenions le type complet de code.
Comme vous le savez peut – être déjà, nelio content est un plugin qui vous permet de partager le contenu du site sur les médias sociaux. En plus de cela, il inclut des fonctionnalités conçues pour vous aider à générer constamment un meilleur contenu sur votre blog, telles que l’analyse de la qualité de vos messages, l’édition du calendrier pour suivre le contenu à venir que vous devez écrire, et plus encore. Calendrier d’édition du contenu de nelio. Le mois dernier, nous avons publié la version 2.0 avec une refonte visuelle et interne complète de nos plug – ins. Nous avons créé cette version en utilisant toutes les nouvelles technologies disponibles dans WordPress (dont nous avons récemment discuté dans notre blog), y compris l’interface REACT et le stockage Redux.
Par conséquent, dans l’exemple d’aujourd’hui, nous améliorerons ce dernier. Je veux dire, nous verrons comment créer un magasin Redux. Nellio content Edit Calendar Selector Edit Calendar est une interface utilisateur qui affiche les billets de blog que nous avons programmés pour chaque jour de la semaine. Cela signifie, au moins, que notre magasin
Redux a besoin de deux opérations de requête: l’une nous dit de programmer le post à une date donnée, et l’autre nous dit de donner l’ID du post et de retourner toutes ses propriétés. Supposons que vous ayez lu notre post sur ce sujet et que vous sachiez déjà que le sélecteur dans Redux prend l’état de réception comme premier paramètre, qui contient toutes les informations dans l’application, puis tout autre paramètre qu’il pourrait vouloir. Par conséquent, les deux sélecteurs d’échantillons en javascript sont les suivants:
Fonction getpost (State, id) {return status.posts [ID]} Fonction getpostsinday (State, Day) {return status.day [Day]?? []} Si vous voulez savoir comment je sais qu’un État a des propriétés posts et days, c’est simple: parce que je les ai définies. Mais c’est pourquoi j’ai décidé de les mettre en œuvre de cette manière. Nous savons que nous voulons avoir accès à nos informations sous deux angles différents: publier en une journée ou par Id. il semble donc logique de diviser les données en deux parties: d’une part, nous avons un attribut posts qui énumère tous les messages que nous obtenons du serveur et sauvegardons dans le stockage Redux. Logiquement, nous pouvons les enregistrer dans un tableau, puis effectuer une recherche séquentielle pour trouver les messages dont l’ID correspond à l’ID prévu… Mais les objets se comportent comme des dictionnaires, fournissant une recherche plus rapide. D’autre part, nous avons également besoin d’accéder aux messages programmés pour une journée donnée. De même, nous aurions pu utiliser un seul tableau pour stocker tous les messages et les filtrer pour trouver les messages qui appartiennent à une journée, mais l’utilisation d’un autre dictionnaire pourrait fournir une solution de recherche plus rapide. Enfin, si nous voulons un calendrier dynamique, nous devons mettre en œuvre des fonctionnalités qui nous permettent de mettre à jour les informations stockées dans le magasin. Par souci de simplicité, nous proposons deux approches simples: une qui nous permet
Ajoutez un nouveau billet au calendrier, ainsi qu’un autre qui nous permet de modifier les propriétés d’un billet existant.
La mise à niveau vers le magasin Redux nécessite deux sections. D’une part, nous avons des actions pour représenter les changements que nous voulons faire, et d’autre part, un réducteur qui applique les changements nécessaires à l’état actuel pour générer un nouvel état en fonction de l’état actuel du stockage et des actions qui doivent être mises à jour. Par conséquent, compte tenu de ce qui précède, nous pourrions faire ce qui suit dans le magasin: fonction receivenewpost (Post) {return {type: ‘receive _ new post’, Post,};} La fonction updatepost (postId, attributes) {return {type: ‘update post’, postId, Attributes,}} Voici le réducteur:
Réducteur de fonction (état, action) {état = état?? {Post: {}, jours: {}}; Constante postids = objet. Clé (état.posts); Switch (action.type) {case ‘receive _ new post’; if (postids.includes (action.postid)) {return State;} Renvoie {posts: {state.posts, [action.post.id] action.post,}, days: {state.days, [action.post.day]: [… State.days [action.post.day], action.post.id,],},}; Cas « mise à jour _ post»; Si (! Postids.includes (action.postid)) {renvoie l’état;} Objet du message: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re Renvoie {posts: {state.posts, [post.id]: Post,}, days: {object.keys (state.days). Reduce ((ACC, Day) = > ({ACC, [Day]: state.days [Day]). Filter ((postId = > postId! = = post.id),}, {}, [post.day]: [… State.days [post.day] post. ID,],},};} Retour à l’état;} Prenez le temps de tout comprendre et passons à autre chose!
De JavaScript à Typescript, la première chose que nous devrions faire est de traduire le Code précédent en Typescript. Puisque Typescript est un superensemble de Javascript, c’est déjà… Cependant, si vous copiez et collez les fonctions précédentes dans la plate – forme Typescript, vous verrez que le compilateur se plaint un peu parce qu’il y a trop de types implicites
N’importe quel magasin Redux est dans son état. Dans la section précédente, nous avons discuté de ses propriétés, donc nous avons défini la forme de base du type d’état: type State = {posts: any; days: any;}; Nous savons maintenant que les pays ont deux attributs (position et nombre de jours), mais nous ne savons pas très bien ce qu’ils sont parce qu’ils peuvent être n’importe quoi. Nous avons dit que nous voulions que les deux attributs soient des dictionnaires. C’est – à – dire, compte tenu d’une requête (l’ID du poste ou la date du jour du poste), nous avons besoin de données pertinentes (une liste de postes ou de postes, respectivement). Nous savons que les dictionnaires peuvent être implémentés en utilisant des objets, mais comment les dictionnaires sont – ils représentés par un script de type?
Si vous regardez la documentation de Typescript, vous verrez qu’il contient plusieurs types d’utilitaires pour gérer des situations assez courantes. Plus précisément, il y a un type appelé record qui semble être ce que nous voulons: il nous permet de taper des variables en utilisant des paires de clés \/ valeurs où les clés ont un type particulier de clé et la valeur est le type. Si nous appliquons ce type à notre exemple, nous obtenons le résultat suivant: type State = {posts: record ; Jours: enregistrements ; }; Du point de vue du compilateur, le type d’enregistrement fonctionne comme n’importe quelle valeur d’une clé donnée (dans notre exemple, le nombre de messages et le nombre de chaînes par jour) et le résultat sera toujours un objet de type (dans notre exemple, un message ou un nombre [], respectivement). Le problème est que ce n’est pas ce que nous voulons que le dictionnaire fasse: lorsque nous utilisons son ID pour rechercher des messages spécifiques, nous voulons que le compilateur sache que nous pouvons ou non trouver les messages pertinents, ce qui signifie que le résultat peut être des messages ou des messages non définis. Heureusement, nous pouvons facilement résoudre ce problème en utilisant un autre type d’utilitaire, le type partial: type State = {posts: Partial >; Jours: partie < Record >; }; Miles
Rare notre type de code alias voir les propriétés des messages dans notre pays… Qu’avez – vous vu? Un dictionnaire qui indexe numériquement les messages de type Post, n’est – ce pas? Imaginez maintenant que vous visualisez ce code au travail. Si vous rencontrez une telle personne, vous pourriez penser que de nombreux messages indexés pourraient être l’ID des messages indexés… Mais ce n’est qu’une hypothèse; Vous devriez vérifier le Code pour vous assurer. Et ces jours – là? Liste aléatoire des numéros d’index de chaînes. Ce n’est pas très utile, n’est – ce pas? Les types Typescript nous aident à écrire un code plus robuste grâce aux contrôles du compilateur, mais ils fournissent plus de fonctionnalités. Si vous utilisez des types importants, votre code sera mieux documenté et plus facile à entretenir. Donc nous définissons les types existants pour créer des types significatifs, n’est – ce pas? Par exemple, sachant que l’ID Post (nombre) et la date (chaîne) sont liés à notre domaine, nous pouvons facilement créer les alias de type suivants: type posid = nombre; Type day = String; Le type original est ensuite écrasé avec les alias suivants: type post = {id: posid; title: String; Author: String; Day: Day; status: String; isssticky: Boolean;}; Type status = {Post: part < Record >; Jours: partie < Record >; }; Un autre type d’alias que nous pouvons utiliser pour améliorer la lisibilité du Code est le type de dictionnaire, qui « cache » la complexité de l’utilisation de pièces et d’enregistrements derrière une structure pratique: le dictionnaire de type < Record = Partiellement >; Rendre le code source plus clair: type State = {posts: dictionary < Record; Jours: dictionnaire ; }; C’est tout! Et voilà! Avec seulement trois alias de type simples, nous pouvons enregistrer le Code d’une meilleure façon que d’utiliser des annotations. N’importe quel développeur après nous peut savoir en un coup d’oeil quel article est un dictionnaire, il utilise postId pour indexer des objets de type Post, et quel jour est