Types de base

TypeScript améliore JavaScript en ajoutant des annotations de type. Cela permet aux développeurs de spécifier le type de valeurs pouvant être attribuées aux variables, aux paramètres de fonction, etc., garantissant ainsi la sécurité des types au moment de la compilation.

 let isDone: boolean = false; // Boolean type let age: number = 30; // Number type let name: string = "Alice"; // String type 

Interfaces

Les interfaces dans TypeScript définissent la forme d'un objet. Elles constituent un moyen efficace de définir des contrats au sein de votre code et des contrats avec du code extérieur à votre projet.

 interface User { name: string; age: number; } let user: User = { name: "Bob", age: 25 }; // An object of type User 

Classes

TypeScript prend en charge les classes JavaScript modernes et ajoute des fonctionnalités supplémentaires telles que les modificateurs d'accès (public, privé et protégé).

 class Animal { private name: string; constructor(theName: string) { this.name = theName; } } let myAnimal = new Animal("Tiger"); 

Énumérations

Les énumérations sont un moyen de donner des noms plus conviviaux à des ensembles de valeurs numériques. Elles rendent le code plus lisible et plus facile à gérer.

 enum Color {Red, Green, Blue} let c: Color = Color.Green; 

Concepts intermédiaires

Génériques

Les génériques vous permettent de définir des fonctions, des interfaces et des classes réutilisables qui fonctionnent avec n'importe quel type, garantissant la sécurité des types sans perte de flexibilité.

 function identity<T>(arg: T): T { return arg; } let output = identity<string>("myString"); 

Types d'union

Les types d'union permettent à une variable de stocker différents types de valeurs, offrant ainsi plus de flexibilité dans votre code.

 let mixedType: number | string; mixedType = 20; // OK mixedType = "twenty"; // OK 

Décorateurs

Les décorateurs permettent d'ajouter à la fois des annotations et une syntaxe de métaprogrammation pour les déclarations de classe et les membres.

 function sealed(constructor: Function) { Object.seal(constructor); Object.seal(constructor.prototype); } @sealed class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } } 

Concepts avancés

Espaces de noms

Les espaces de noms sont utilisés pour organiser le code et éviter la pollution de la portée globale.

 namespace Shapes { export class Rectangle { constructor(public width: number, public height: number) { } } } let rect = new Shapes.Rectangle(10, 20); 

Types mappés

Les types mappés vous permettent de prendre un modèle existant et de transformer chacune de ses propriétés en un nouveau type.

 type Readonly<T> = { readonly [P in keyof T]: T[P]; }; type ReadonlyUser = Readonly<User>; 

Types conditionnels

Ces types vous aident à créer des types basés sur une condition.

 type Check<T> = T extends string ? "String" : "Other"; type Type = Check<number>; // Type is "Other" 

Types d'index

Types d'index Avec les types d'index, vous pouvez accéder de manière dynamique aux propriétés des objets.

 function getProperty<T, K extends keyof T>(obj: T, key: K) { return obj[key]; } 

Pour approfondir votre compréhension de TypeScript, une variété de ressources sont disponibles, adaptées à différents styles d’apprentissage et niveaux d’expertise.

Pour les débutants, le site Web officiel de TypeScript (typescriptlang.org) est la principale source de référence, offrant une documentation complète, des tutoriels et un terrain de jeu pour expérimenter le code TypeScript.

1. Simplicité accrue : SignalStore simplifie la gestion des flux de données en utilisant des signals réactifs natifs d'Angular.
2. Performances améliorées : Les signals réduisent le nombre d'opérations inutiles dans le cycle de détection d'Angular.
3. Moins de dépendances : Pas besoin d'ajouter une bibliothèque externe comme NgRx, SignalStore fonctionne directement avec Angular.

Comparaison entre les deux approches

1. ComponentStore :
   • Nécessite des subjects RxJS et des opérateurs pour manipuler l'état.
   • Utilise des sélecteurs pour accéder aux données.
   • Peut devenir complexe à mesure que l'état croît.
2. SignalStore :
   • S'appuie sur des signals pour suivre les changements d'état.
   • Offre un flux plus naturel et lisible.
   • Moins de code à écrire et à maintenir.

Exemple de transition

Avec ComponentStore :

 export class MyStore extends ComponentStore<MyState> { readonly updateValue = this.updater((state, value) => ({ ...state, value, })); } 

Avec SignalStore :

 import { SignalStore } from '@ngrx/signals'; export class MySignalStore extends SignalStore<MyState> { updateValue(value: number) { this.setState({ value }); } } 

Quand choisir SignalStore ?

• Idéal pour des composants avec un état limité et indépendant.
• Si vous utilisez déjà NgRx pour un état global complexe, SignalStore peut être un complément pour les besoins locaux.

En résumé, SignalStore simplifie la gestion de l'état avec Angular en tirant parti des signals, tout en offrant de meilleures performances et une réduction de la complexité. C'est une excellente option pour les développeurs souhaitant exploiter les nouvelles capacités d'Angular.

Cette méthode de tableau vous aide à déterminer si une ou plusieurs de ses valeurs correspondent à quelque chose que vous recherchez. Si cela ne vous semble pas clair, laissez-moi vous l'illustrer avec un exemple…

Voici une liste d'agents travaillant pour votre organisation ultra-secrète :

 var operatives = [ { id: 12, name: 'Baze Malbus', pilot: false }, { id: 44, name: 'Bodhi Rook', pilot: true }, { id: 59, name: 'Chirrut Îmwe', pilot: false }, { id: 122, name: 'Jyn Erso', pilot: false } ]; 

Vous voulez savoir s'il y a des pilotes parmi vos agents. Il existe de nombreuses façons d'atteindre cet objectif. La plupart des gens utiliseront probablement .forEach() et feront quelque chose comme ceci :

 var listHasPilots = false;operatives.forEach(function (operative) { if (operative.pilot) { listHasPilots = true; } }); 

Cela fait beaucoup de lignes juste pour voir si la liste contient un pilote. Essayons d'utiliser .some() !

 var listHasPilots = operatives.some(function (operative) { return operative.pilot; }); /* Nous pouvons même être plus concis avec les fonctions fléchées (ES6, Babel ou TypeScript) */ const listHasPilots = operatives.some(operative => operative.pilot); 

Comment ça marche ?

Eh bien, vous passez à .some() une fonction comme argument. Cette fonction s'exécute pour chaque valeur du tableau. Vous pouvez alors voir si la valeur correspond à la condition que vous avez écrite. La fonction doit renvoyer un booléen (bien qu'une valeur truey/falsy fonctionne également). Dès qu'une valeur true est renvoyée, .some() renvoie elle-même true. Si aucune des valeurs, lorsqu'elles sont traitées dans votre condition, ne renvoie true (si elles renvoient toutes false), alors .some() renvoie false.

Notez que dès qu'une seule valeur true est renvoyée, .some() arrête de vérifier les autres valeurs du tableau. Dans notre exemple ci-dessus, la fonction ne s'exécute que deux fois car le deuxième agent, Bodhi Rook, est un pilote. Pas besoin de vérifier les autres pilotes.

Si certaines de vos valeurs de tableau correspondent à ce que vous recherchez, .some() renvoie true. Sinon, il renvoie false.

.find()

Cette méthode de tableau fait exactement ce qu'elle dit : elle trouve ce que vous cherchez. En un mot, .find() renverra la première valeur qui correspond à la condition passée. Voyons-la en action avec les mêmes données que précédemment.

C'est la même chose que précédemment, sauf que cette fois au lieu de se demander si nous avons un pilote dans nos rangs, nous voulons le profil de ce pilote ! Sortons la valeur dont nous avons besoin en utilisant .find() :

 var firstPilot = operatives.find(function (operative) { return operative.pilot; }); /* avec les fonctions fléchées (ES6..) */ const firstPilot = operatives.find(operative => operative.pilot); 

Comme vous pouvez le voir, le code est exactement le même qu'avec .some() , la seule différence est que nous avons remplacé some par find ! Mais maintenant, au lieu de renvoyer un booléen, il renverra le premier pilote de notre liste.

Je tiens à souligner que .find() renverra la première correspondance. Si plusieurs valeurs correspondent à votre condition, cela n'aura pas d'importance. Seule la première correspondance sera renvoyée. Si vous avez besoin d'une liste de toutes les correspondances, vous devez utiliser .filter() au lieu de .find() .

Si aucune correspondance n'est trouvée, .find() renverra undefined .

Avantages

L'utilisation de .find() et .some() au lieu de boucles courantes comme .for() ou .forEach() non seulement rend votre code plus court, mais rend également votre intention plus claire. Une boucle peut être utilisée pour faire n'importe quoi, mais l'utilisation de .find() indique que vous recherchez un élément de tableau particulier. Quant à .some() , vous vérifiez clairement si le tableau contient des éléments qui correspondent à vos besoins ou non.

Rendez votre code plus clair ! Utilisez .find() et .some() lorsque cela est pertinent.

Explication : la méthode forRoot() renvoie un NgModule et ses dépendances de fournisseur.

Dans cet exemple, nous partageons un service pour suivre une valeur de compteur. Chaque fois qu'un composant incrémente la valeur stockée dans le service de compteur, je souhaite partager cela avec tous les composants.

Le problème se pose lorsque vous essayez d'introduire des modules chargés de manière différée. Notez que le composant chargé de manière différée ne partage pas la même valeur de compteur. Lorsque vous utilisez uniquement des composants chargés de manière différée, l'exemple ci-dessous fonctionnera si vous utilisez un service partagé, mais notez comment se comporte le composant chargé de manière différée. Le composant chargé de manière différée obtient sa propre instance du service.

 import { NgModule } from '@angular/core'; import { CounterService } from './counter.service'; @NgModule({ providers: [CounterService], }) export class SharedModule {} 

Voir plunker : https://stackblitz.com/edit/angular-no-for-root-72x3ht?file=app/lazy/lazy.component.ts

Solution : appelez forRoot() dans AppModule et renvoyez un ModuleWithProviders dans sharedModule.

shared.module.ts

 import { NgModule,ModuleWithProviders } from '@angular/core'; import { CounterService } from './counter.service'; @NgModule({ }) export class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: [ CounterService ] } } } 

app.module.ts

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { SharedModule } from './shared/shared.module'; import { AppComponent } from './app.component'; import { EagerComponent } from './eager.component'; import { routing } from './app.routing'; @NgModule({ imports: [ BrowserModule, SharedModule.forRoot(), routing ], declarations: [ AppComponent, EagerComponent ], bootstrap: [AppComponent] }) export class AppModule {} 

Voir Plunker : https://stackblitz.com/edit/angular-no-for-root-yfhkgz?file=app%2Fapp.module.ts

Le service de compteur est désormais partagé entre les modules chargés avec empressement et les modules chargés paresseusement.

Autres lectures recommandées : http://angularfirst.com/the-ngmodule-forroot-convention/

Remarque : je ne recommanderais pas de placer des services partagés et des directives partagées dans le même module.

Les variables sont la pierre angulaire de Sass, vous permettant de définir des valeurs réutilisables qui peuvent être appliquées de manière cohérente dans toutes vos feuilles de style. Cela favorise l'organisation du code, réduit la redondance et facilite les mises à jour de vos palettes de couleurs, tailles de police et autres éléments de conception.

 $primary-color: #007bff; $secondary-color: #dc3545; $text-color: #333; $background-color: #fff; .primary-button { background-color: $primary-color; color: #fff; } .secondary-text { color: $secondary-color; } 

Exploitez l'imbrication pour structurer vos feuilles de style

L'imbrication vous permet de regrouper des règles CSS liées au sein d'une structure hiérarchique, imitant la structure de vos éléments HTML. Cela améliore la lisibilité et la facilité de maintenance, en particulier pour les feuilles de style complexes.

 .navbar { background-color: #f0f0f0; border-bottom: 1px solid #ccc; & .nav-item { display: inline-block; padding: 10px 20px; text-decoration: none; color: #007bff; & .dropdown { position: relative; .dropdown-menu { display: none; position: absolute; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); padding: 10px 15px; z-index: 1; & .dropdown-item { display: block; padding: 5px 10px; text-decoration: none; color: #007bff; &:hover { background-color: #f0f0f0; cursor: pointer; } } } &:hover .dropdown-menu { display: block; } } }} 

Utilisez les mixins pour la réutilisabilité

Les mixins sont des blocs de code CSS réutilisables qui peuvent être invoqués avec des arguments, ce qui vous permet d'encapsuler des styles courants et de les appliquer facilement à différents composants ou éléments. Cela favorise la réutilisation du code et réduit la duplication.

 @mixin button-style($color, $background-color) { display: inline-block; padding: 10px 20px; margin: 10px 0; border: none; outline: none; cursor: pointer; text-decoration: none; font-weight: bold; color: $color; background-color: $background-color; } .primary-button { @include button-style(#fff, #007bff); } .secondary-button { @include button-style(#fff, #dc3545); } 

Exploitez la puissance des opérateurs

Sass propose une gamme d'opérateurs permettant de manipuler des valeurs, de combiner des styles et d'effectuer des calculs. Ces opérateurs peuvent rendre votre code plus concis et plus expressif.

 // Numeric Operators $width: 100px + 20px; $height: 200px - 10px; $fontSize: 16px * 1.2; $padding: 20px / 2; $borderRadius: 10px % 2; // Color Operators $color: #007bff + #ccc; $textColor: #fff - #007bff; $background: #007bff * 0.7; $shadowColor: #007bff / 1.5; // String Operators $userName: "Bard" + ", " + "the large language model"; $paragraph: "This is a paragraph of text." * 3; $title: "Welcome to my website" ~ "!"; $wordCount: length("Hello, world!"); // Comparison Operators //Equality (===): Checks if two values are equal. $a: 10; $b: 10; $result: $a === $b; // Inequality (!==): Checks if two values are not equal. $c: 5; $d: 10; $result: $c !== $d; // Greater than (>): Checks if the first value is greater than the second value. $e: 8; $f: 5; $result: $e > $f; // Less than (<): Checks if the first value is less than the second value. $g: 12; $h: 15; $result: $g < $h; 

Utilisez le débogueur pour identifier et résoudre les problèmes

Le débogueur intégré de Sass vous permet de parcourir votre code, d'inspecter les valeurs des variables et d'identifier les erreurs ou les incohérences. Cet outil de débogage peut s'avérer précieux pour le dépannage et l'amélioration de la qualité du code.

La directive @debug vous permet d'imprimer des messages directement sur la console pendant le processus de compilation Sass. Cela peut être utile pour déboguer du code Sass complexe ou comprendre le déroulement du processus de compilation.

Conclusion

Sass est devenu un outil essentiel dans l'arsenal du développeur front-end, offrant un moyen puissant et expressif de styliser les applications Web.

En maîtrisant les trucs et astuces décrits dans ce guide, vous pouvez exploiter tout le potentiel de Sass et créer des feuilles de style visuellement attrayantes, maintenables et évolutives qui élèvent vos projets de développement Web vers de nouveaux sommets.

Cependant, Protractor est obsolète et de nombreux développeurs utilisent désormais Cypress pour les tests E2E dans les applications Angular. Ce guide couvrira la configuration et l'écriture de tests E2E dans Angular à l'aide de Cypress.

Même si les tests ne font pas l'objet d'un consensus commun parmi les programmeurs, il s'agit certainement d'une stratégie impérative. Le développement piloté par les tests (TDD) et le développement piloté par le comportement (BDD) sont les approches les plus utilisées ; BDD a été créé à partir de TDD. Pour tester la plus petite unité de code, nous utilisons des tests unitaires ; pour tester le fonctionnement du système, nous utilisons des tests e2e.

L'exécution de tests de bout en bout (E2E) dans Angular implique généralement de tester l'intégralité du flux d'application, y compris les interactions des utilisateurs, la navigation et la validation des données. La meilleure approche pour exécuter des tests E2E dans Angular consiste à sélectionner le bon framework de test, à configurer un environnement de test robuste et à structurer efficacement vos tests. Voici un guide étape par étape :

Choisissez un framework de test

Les développeurs Angular utilisent souvent Protractor ou Cypress pour les tests E2E. Ce sont des frameworks de test populaires connus pour leur adoption généralisée et leur pertinence dans la communauté des tests. Chacun a ses propres forces et faiblesses :

Protractor

Il s'agit du framework de test E2E officiel pour Angular. Il est basé sur WebDriverJS et fonctionne bien avec les applications Angular prêtes à l'emploi. Protractor a été développé par l'équipe Angular, ce qui garantit sa stabilité et ses avantages pour tester les applications Angular. Cependant, il est considéré comme quelque peu obsolète par rapport aux outils plus récents comme Cypress.

Cypress

Cypress est un framework de test E2E moderne et convivial pour les développeurs. Il est connu pour sa facilité d'utilisation, son exécution rapide des tests et ses riches capacités de débogage. Alors que les tests Cypress sont très appréciés pour leur simplicité et leur rapidité, les tests Protractor sont souvent utilisés dans les projets Angular pour créer et exécuter des cas de test à l'aide de fichiers de configuration et de spécifications. Cypress est un choix populaire pour les projets Angular et convient aussi bien aux petites qu'aux grandes applications.

Configurez votre environnement de test :

Quel que soit le framework de test que vous choisissez, vous devrez configurer votre environnement de test :

Installez Node.js et npm si vous ne l'avez pas déjà fait. — Créez un projet Angular distinct pour vos tests E2E ou intégrez-les à votre projet Angular existant. — Installez le framework de test choisi (Protractor ou Cypress) et toutes les dépendances requises. — Configurez votre framework de test et écrivez un fichier de configuration pour vos tests E2E. Cela peut impliquer de spécifier l'URL de base de votre application Angular et d'autres paramètres. — Créez et organisez vos fichiers de test. Assurez-vous qu'ils sont structurés et nommés conformément aux conventions du framework de test que vous utilisez.

Écrivez des tests E2E :

Créez des tests E2E pour couvrir différents scénarios utilisateur et fonctionnalités d'application. Vos tests doivent interagir avec votre application comme le ferait un utilisateur :

Simuler des actions utilisateur telles que cliquer sur des boutons, remplir des formulaires et naviguer entre les pages.

Assurez-vous que l'application se comporte comme prévu, en vérifiant l'affichage correct des données, les messages d'erreur et d'autres éléments de l'interface utilisateur.

Organisez vos tests en suites et fichiers de spécifications significatifs pour les maintenir maintenables. Le fichier de spécifications est le fichier de test réel où les assertions sont situées et vérifiées.

Gérer l'authentification :

Si votre application Angular nécessite une authentification utilisateur, assurez-vous que vos tests E2E peuvent la gérer. Vous devrez peut-être créer des utilisateurs de test ou utiliser des jetons pour vous authentifier dans vos tests.

Services back-end simulés :

Pour isoler vos tests E2E des dépendances externes et garantir des tests cohérents, envisagez de simuler des services back-end. Utilisez des outils tels que ng-mocks, HttpClientTestingModule d'Angular ou des intercepteurs pour stub les appels et les réponses d'API.

Exécutez vos tests :

Exécutez vos tests E2E à l'aide des outils de ligne de commande du framework de test ou des intégrations avec les pipelines CI/CD. Exécutez vos tests localement pendant le développement et dans votre pipeline CI/CD pour détecter les régressions au plus tôt.

N'oubliez pas que les tests E2E sont un élément essentiel pour garantir la qualité et la fiabilité de votre application Angular. Révisez et mettez à jour régulièrement votre stratégie de test pour tenir compte des changements dans l'architecture et les exigences de votre application.

Dans les tests de bout en bout, vous imitez les actions, les activités et l'expérience d'un utilisateur réel utilisant l'application. Créez des suites de tests pour regrouper les tests associés, ce qui facilite la gestion et la maintenance de vos tests. Vous trouverez ci-dessous une liste de quelques bonnes pratiques pour tirer le meilleur parti des tests de bout en bout.

Tester les scénarios d'utilisateurs répétés

Les tests de bout en bout sont très complexes et nécessitent du temps pour tester complètement tous les cas extrêmes possibles. Évitez de tester tous les cas extrêmes possibles et concentrez-vous uniquement sur les scénarios les plus courants et les plus importants.

Priorisez les bons aspects

Il est important de prioriser ce que vous testez, car cela peut facilement devenir fastidieux et complexe. Par conséquent, il est important de prioriser les fonctionnalités impactées par l'entreprise avant de passer en revue d'autres cas extrêmes moins importants.

Rendre les tests réalistes

Parfois, vous souhaitez rendre les tests de bout en bout un peu plus réalistes. Dans la plupart des cas, les utilisateurs réels s'arrêtent pour regarder des images ou s'arrêtent et regardent quelques vidéos avant de poursuivre leurs actions. Les tests de bout en bout doivent refléter autant que possible les interactions réelles.

Surveillance des erreurs

Les tests de bout en bout sont un processus très complexe, car ils englobent la visite de l'ensemble de l'application ou parfois uniquement les fonctionnalités nouvellement ajoutées. Cependant, la complexité peut être réduite en s'assurant que de nombreuses erreurs sont résolues pendant le codage avant les tests de bout en bout.

Optimiser l'environnement de test

Vous pouvez faciliter le processus de test en créant un environnement de test optimal. La création d'un environnement de test optimal permet une configuration minimale au moment de tester et d'effacer les données pour votre prochain test.

Conclusion

Les tests de bout en bout mettent l'accent sur un flux plus fonctionnel.

Ils peuvent aider à détecter les problèmes avant la publication publique.

Les outils Protractor, Cypress, Playwright, etc. peuvent être utilisés pour les tests E2E

Les tests E2E sont un élément crucial pour garantir la fiabilité et la fonctionnalité de votre application Angular. En utilisant Cypress, vous pouvez écrire des tests complets qui simulent des interactions utilisateur réelles, garantissant ainsi que votre application se comporte comme prévu. La configuration de Cypress est simple et ses fonctionnalités puissantes en font un excellent choix pour les tests E2E modernes.