Angular est construit sur TypeScript, un sur-ensemble de JavaScript qui introduit la sécurité des types, permettant aux développeurs de détecter les erreurs potentielles pendant le développement plutôt qu'au moment de l'exécution. Pour les développeurs familiers avec TypeScript, ce sera un paysage familier, mais si vous débutez avec TypeScript, passons en revue certaines de ses fonctionnalités clés, qui incluent saisie statique, interfaces, propriétés de classe et niveaux d'accessibilité (tels que publics et privés). Ces fonctionnalités seront cruciales tout au long de votre parcours dans le développement angulaire.

1. Saisie statique

L'une des fonctionnalités principales de TypeScript est la saisie statique. Contrairement à JavaScript, où les variables peuvent contenir des valeurs de n'importe quel type, TypeScript vous permet de spécifier explicitement les types de variables, de propriétés et de paramètres.

En JavaScript simple, vous pouvez déclarer des variables comme ceci :

let name = "Whiskers";
let age = 5;

Dans TypeScript, vous pouvez appliquer des types de données en les ajoutant à la déclaration de variable :

let name: string = "Whiskers";
let age: number = 5;

Avec cette configuration, TypeScript garantit que le nom est toujours une chaîne et que l'âge est toujours un nombre. Si vous essayez d'attribuer une valeur non valide, telle qu'une chaîne à age, le compilateur TypeScript générera une erreur et le code ne sera pas compilé.

Cela permet d'éviter les bogues potentiels dans votre code en détectant les erreurs pendant le développement, vous donnant ainsi plus de confiance dans l'exactitude de votre code.

2.Interfaces

Dans TypeScript, les interfaces permettent de définir la forme d'un objet. Cela signifie que vous pouvez spécifier les propriétés requises et leurs types, et TypeScript garantira que tout objet attribué à cette interface est conforme à la forme.

Par exemple, définissons une interface pour un objet Cat :

interface Cat {
    name: string;
    age: number;
    breed?: string; // optional property
}

Désormais, lorsque vous créez un objet chat, il doit respecter cette interface :

const fluffy: Cat = {
    name: "Fluffy",
    age: 3
};

Dans ce cas, le nom et l'âge sont des champs obligatoires, mais la race est facultative en raison du ?. Si vous essayez d'attribuer un objet Cat qui n'est pas conforme à l'interface, TypeScript signalera le problème :

const wrongCat: Cat = {
    name: "Whiskers",
    // missing 'age' property
};

Vous pouvez également rendre les propriétés facultatives à l'aide du ? symbole, permettant une flexibilité lorsque cela est nécessaire, tout en maintenant la sécurité du type.

3. Propriétés de classe

Les classes TypeScript sont similaires aux classes JavaScript mais avec une sécurité et des fonctionnalités de type supplémentaires. Par exemple, vous pouvez déclarer explicitement des types pour les propriétés de classe :

class Cat {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

Cela garantit que le nom est toujours une chaîne et que l'âge est toujours un nombre. De plus, vous pouvez définir des propriétés sans les initialiser dans le constructeur :

class Cat {
    name: string;
    breed?: string;
}

TypeScript garantira que ces propriétés sont conformes aux types que vous avez déclarés, rendant votre code plus prévisible et plus facile à déboguer.

4. Accessibilité publique et privée

Une autre fonctionnalité importante de TypeScript est la possibilité de contrôler l'accessibilité aux membres de la classe (propriétés et méthodes) à l'aide de modificateurs d'accès publics et privés. Par défaut, tous les membres de la classe sont publics en JavaScript et en TypeScript, ce qui signifie qu'ils sont accessibles de n'importe où. Cependant, vous pouvez explicitement marquer les membres de la classe comme privés pour restreindre leur accessibilité au sein de la classe.

Par exemple:

class Cat {
    public name: string;
    private age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    speak() {
        return `Meow! I am ${this.name}`;
    }
}

Dans cet exemple, la propriété name est publique, elle est donc accessible en dehors de la classe, mais la propriété age est privée, elle n'est donc accessible qu'au sein de la classe elle-même.

const whiskers = new Cat("Whiskers", 5);
console.log(whiskers.name); // Works fine
console.log(whiskers.age); // Error: 'age' is private

L'utilisation de private garantit l'encapsulation, empêchant les modifications accidentelles ou l'accès aux données de classe sensibles depuis l'extérieur de la classe.

5. Raccourci du constructeur

TypeScript fournit un raccourci pratique pour déclarer et initialiser les propriétés via le constructeur. Au lieu de déclarer manuellement les propriétés et de les affecter dans le constructeur, vous pouvez les déclarer directement dans la liste des paramètres du constructeur.

Voici un exemple simple :

class Cat {
    constructor(public name: string, private age: number) {}
}

Ce code est fonctionnellement équivalent au suivant :

class Cat {
    public name: string;
    private age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

Le raccourci du constructeur simplifie le code et réduit les répétitions. TypeScript génère automatiquement les déclarations et affectations de propriétés nécessaires, vous évitant ainsi d'écrire du code supplémentaire.

Conclusion

Dans cet article, nous avons couvert certaines des fonctionnalités clés de TypeScript que vous rencontrerez fréquemment dans le développement Angular :

• Saisie statique garantit que vos variables, propriétés et paramètres ont des types cohérents.
• Les Interfaces vous permettent de définir la forme des objets, ajoutant ainsi une structure supplémentaire à votre code.
• Les propriétés de classe donnent à vos classes des déclarations explicites et de type sécurisé pour les champs.
• L'accessibilité publique et privée garantit un accès contrôlé aux membres de la classe, améliorant ainsi l'encapsulation du code.
• Le raccourci du constructeur simplifie le processus d'initialisation des propriétés au sein des classes.

Ces fonctionnalités TypeScript sont fondamentales pour écrire des applications angulaires robustes et maintenables. Les comprendre vous aidera à exploiter tout le potentiel d'Angular lorsque vous créerez des applications évolutives et sécurisées.

Ensuite, passons à la préparation de votre environnement de développement pour Angular et configurons les outils dont vous aurez besoin pour commencer !