Le Guide Angular
  • Le Guide Angular par Wishtack
  • Pourquoi Angular ?
  • ECMAScript 6+
    • Un Peu d'Histoire
    • Propriétés du Langage
    • "Single-Threaded" donc Asynchrone
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibilité
  • TypeScript
    • Pourquoi TypeScript ?
    • De l'ECMAScript au TypeScript
    • Visibilité des Propriétés
    • Typing des Propriétés
    • Types
    • Interfaces
    • Inference
    • Duck Typing
    • Duck Typing Patterns
      • Compatibilité de Librairies
      • Entity Constructor
    • Décorateurs
      • Décorateurs de Propriété
      • Décorateurs de Classe
      • Décorateurs de Méthode & Paramètres
    • Quelques Liens
  • Tools
    • Git
    • Command Line
    • NodeJS
    • NPM
    • Yarn
      • Pourquoi Yarn ?
      • Définition et Installation des Dépendances
      • Scripts
      • Mise à Jour et Automatisation
    • Chrome
    • IntelliJ / WebStorm / VSCode
      • Raccourcis clavier IntelliJ / WebStorm
    • Floobits
    • Angular CLI
    • StackBlitz
    • Compodoc
  • Angular
    • Bootstrap
    • Composants
      • Root Component
      • Template Interpolation
      • Property Binding
      • Class & Style Binding
      • Event Binding
      • *ngIf
      • *ngFor
      • L'approche MVC
      • Création de Composants
      • Exemple
    • Container vs. Presentational Components
    • Interaction entre Composants
      • Input
      • Output
      • Exemple
    • Change Detection
      • Les Approches Possibles
      • Fonctionnement de la Change Detection
      • Optimisation de la Change Detection
      • Immutabilité
      • Quelques Liens
    • Project Structure & Modules
      • Entry Point
      • Définition d'un Module
      • Root Module
      • Feature Module
      • Shared Module
      • Exemple
    • Dependency Injection
      • Qu'est-ce que la "Dependency Injection" ?
      • Injection d'un Service Angular
      • Services & Providers
      • Portée des Services
      • Tree-Shakable Services
      • Class vs Injection Token
      • Exemple
    • Callback Hell vs. Promise vs. Async / Await
      • Callback Hell
      • Promise
      • Async / Await
    • Observables
      • Reactive Programming
      • Promise vs Observable
      • Subscribe
      • Unsubscribe ⚠️
      • Création d'un Observable
      • Opérateurs
        • Définition d'un Opérateur
        • Lettable Operators vs Legacy Methods
        • map
        • filter
        • mergeMap & switchMap
        • shareReplay
        • buffer
        • debounceTime
        • distinctUntilChanged
        • retry
      • Quelques Liens
    • Http
      • Pourquoi HttpClient ?
      • Utilisation de HttpClient
      • Utilisation dans un Service
      • Gestion de la Subscription ⚠️
    • GraphQL
    • Formulaires
      • Template-driven Forms 🤢
      • Reactive Forms 👍
        • Avantages des "Reactive Forms"
        • La boite à outils des "Reactive Forms"
        • Validation
        • Observation des Changements
    • Directives
      • Attribute Directive
      • Structural Directive
    • Pipes
    • Routing
      • Mise en Place du Routing
      • Lazy Loading
      • Project Structure
      • Route Guards
    • Testing
      • Unit-Testing
        • Jasmine
        • Unit-Test Synchrone
        • Test-Driven Development
        • Unit-Test Asynchrone
        • TestBed
        • Unit-Test d'un Service
        • Unit-Test d'un Composant
        • Unit-Test et Spies
        • Unit-Test et HttpClient
      • End-to-End
    • Sécurité
      • Quelques Liens
    • Animation
    • Internationalisation
    • Quelques Liens
  • Cookbook
    • Authentification et Autorisation
Powered by GitBook
On this page
  • Les types les plus fréquents
  • boolean
  • number
  • string
  • array
  • enum
  • string enum
  • Number, String, Boolean and Object
  • Paramètres optionnels

Was this helpful?

  1. TypeScript

Types

Les types les plus fréquents

boolean

let value: boolean;
value = true;

number

let value: number;
value = 10;
value = 10.3;
value = Infinity;
value = NaN;

string

let value: string;
value = 'Foo BAR';

array

let value: string[];

value = ['Angular', 'Python'];

value.push(42); // error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

enum

enum Role {
    Coder,
    Developer
}

let role: Role;

role = Role.Developer;

console.log(role); // 1
console.log(Role[role]); // Developer

Comme dans de nombreux langages, il est préférable d'éviter les enums à auto-incrément pour les raisons suivantes :

  • Ce type d'enums décourage le refactoring car il est nécessaire de "rebuild" toutes les applications et librairies qui en dépendent. (On revient aux problèmes de compatibilité binaire etc...)

  • Le debug est moins pratique.

  • Il faut absolument passer par un serializer/deserializer pour communiquer la valeur avec d'autres applications, services etc...

string enum

enum Role {
    Coder = 'coder',
    Developer = 'developer'
}

let role: Role;

role = Role.Developer;

console.log(role); // developer

Number, String, Boolean and Object

N'utilisez jamais les types suivants : Number, String, Boolean et Object.

Ce ne sont pas les types primitifs. Considérez-les comme "legacy".

Au lieu de Object, utilisez le type TypeScript object.

Paramètres optionnels

Contrairement à l'ECMAScript où tous les paramètres sont considérés optionnels, en TypeScript, les paramètres doivent être explicitement indiqués comme optionnels avec la syntaxe suivante :

const sendMessage = (email: string, message: string, subject?: string) => {
    console.log(`${email}: [${subject}] ${message}`);
};

sendMessage(); // error TS2554: Expected 2-3 arguments, but got 0.

sendMessage('contact@wishtack.com', 'Help!'); // contact@wishtack.com: [undefined] Help!
sendMessage('contact@wishtack.com', 'Help!', 'Coaching'); // contact@wishtack.com: [Coaching] Help!

... ou en spécifiant une valeur par défaut :

const sendMessage = (email: string, message: string, subject: string = null) => {
    console.log(`${email}: [${subject}] ${message}`);
};

sendMessage('contact@wishtack.com', 'Help!'); // contact@wishtack.com: [null] Help!
PreviousTyping des PropriétésNextInterfaces

Last updated 5 years ago

Was this helpful?