10 astuces et astuces de dactylographie essentielles pour les développeurs angulaires

Cet article traite d'une gamme de conseils et d'astuces qui s'appliquent aux projets angulaires et à d'autres projets dactylographiés.

Ces dernières années, la demande de frappe statique en JavaScript a augmenté rapidement. De grands projets frontaux, des serveurs plus complexes et des outils de ligne de commande complexes favorisent tous la nécessité d'une programmation plus défensive dans le monde JavaScript. De plus, le fardeau de la compilation d'une application avant son exécution n'est pas considéré comme une faiblesse, mais plutôt comme une opportunité. Bien qu'il existe deux concurrents solides (dactylographiques et flux), de nombreuses tendances indiquent en fait qu'un seul est susceptible de gagner - dactylographié.

En dehors des fonctionnalités marketing et bien connues, TypeScript a une communauté incroyable avec des contributeurs très actifs. Il a également l'une des meilleures équipes de l'industrie dans la conception des langues. Sous Anders Hejlsberg, l'équipe a réussi à transformer le paysage de grands projets JavaScript en une entreprise qui était presque entièrement alimentée par la dactylographie. Avec des projets très réussis comme VSTS ou Visual Studio Code, Microsoft lui-même est un fervent partisan de la technologie.

Mais ce qui attire n'est pas seulement les fonctionnalités de TypeScript, mais aussi les possibilités et les frameworks pour la prise en charge de TypeScript. La décision de Google d'adopter pleinement TypeScript comme la langue préférée pour Angular 2 s'est avérée être une situation gagnant-gagnant. Le type dactylographié a non seulement attiré plus d'attention, mais Angular lui-même a également beaucoup profité. En utilisant le typage statique, le compilateur peut déjà nous fournir des avertissements informatifs et des explications utiles sur les raisons pour lesquelles le code ne fonctionne pas.

Points clés

• Définitions des modules personnalisés: Lorsque les bibliothèques externes manquent de définitions de typeScript, créez vos propres définitions dans le fichier module.d.ts pour améliorer la précision de développement et peuvent contribuer à la communauté en partageant ces définitions.
• Comprendre les énumérations et les énumérations constantes: Utiliser const enum pour l'optimisation des performances, car elle ne génère pas de code d'exécution, tandis que les énions ordinaires génèrent du code d'exécution, ce qui leur permet d'être basé sur les exigences du projet conviennent à différents scénarios.
• Utilisez des expressions et des alias de type: Simplifier la maintenance du code et améliorer la réutilisabilité en utilisant les expressions de type et les alias, ce qui facilite les modifications et les vérifications de meilleur type tout au long de la base de code.
• Utilisez le discriminateur pour les types conjoints: Implémentez l'union d'authentification pour traiter les données de différentes formes plus efficacement, afin que les propriétés publiques puissent être utilisées en toute sécurité pour déterminer le contexte de type correct.
• Évitez d'utiliser any pour la spécificité: Gardez l'utilisation de any pour des données vraiment générales et travaillez dur pour définir des types plus spécifiques, ce qui aide à maintenir la sécurité du type et à réduire l'erreur d'exécution.
• Utilisez des génériques pour créer du code flexible et réutilisable: Appliquer des génériques pour créer des fonctions et des composants hautement réutilisables et flexibles qui peuvent fonctionner avec différents types tout en conservant la sécurité de type.

TypeScript Conseils 1: Fournissez votre propre définition de module

TypeScript est un superset de JavaScript. Par conséquent, chaque package NPM existant peut être utilisé. Bien que l'écosystème dactylographié soit énorme, toutes les bibliothèques ne sont pas livrées avec des définitions de type appropriées. Pire, pour certains (petits) packages, il n'y a même pas de déclaration distincte (sous la forme de @ types / {package}). À ce stade, nous avons deux choix:

1. Introduire du code hérité à l'aide de TypeScript Tips 7
2. Définissez vous-même l'API du module.

Ce dernier est certainement le premier choix. Nous devons quand même afficher la documentation du module, mais le taper empêchera les erreurs simples pendant le développement. De plus, si nous sommes très satisfaits de la définition de type que nous venons de créer, nous pouvons toujours le soumettre à @Types pour l'inclure dans NPM. Donc, cela nous donne également le respect et la gratitude de la communauté. bien!

Quelle est la façon la plus simple de fournir notre propre définition de module? Créez simplement un module.d.ts dans le répertoire source (peut également être nommé le même nom que le package - par exemple, pour le module inconnu du package NPM, il peut être nommé Unknown-module.d.ts).

Fournissons un exemple de définition de ce module:

<code class="language-typescript">declare module 'unknown-module' {
  const unknownModule: any;
  export = unknownModule;
}</code>

Évidemment, ce n'est que la première étape car nous ne devrions pas en utiliser du tout. (Il existe de nombreuses raisons d'expliquer cela. TypeScript Tips 5 montre comment l'éviter.) Cependant, il suffit de permettre à TypeScript de comprendre le module et d'éviter les erreurs de compilation, telles que "Module inconnu" Module inconnu "". La notation d'exportation s'applique ici au package classique de module.exports = ... type.

Voici l'utilisation potentielle de ces modules dans TypeScript:

<code class="language-typescript">declare module 'unknown-module' {
  const unknownModule: any;
  export = unknownModule;
}</code>

Comme mentionné précédemment, toute la définition du module est désormais dans la déclaration de type de la constante exportée. Si le contenu exporté est une fonction, la déclaration peut ressembler à ceci:

<code class="language-typescript">import * as unknownModule from 'unknown-module';</code>

Bien sûr, vous pouvez également utiliser des packages qui utilisent la fonction d'exportation de syntaxe du module ES6:

<code class="language-typescript">declare module 'unknown-module' {
  interface UnknownModuleFunction {
    (): void;
  }
  const unknownModule: UnknownModuleFunction;
  export = unknownModule;
}</code>

(Le contenu suivant est le même que le texte d'origine et est plus long. Pour éviter la duplication, les conseils de type 2-10 et le contenu ultérieur sont omis ici.) Veuillez vous référer au texte original vous-même selon les besoins en fonction du besoin. . Si j'ai besoin de continuer à générer le contenu restant, faites-le moi savoir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!