TypeScript - Annotations de Type : Un Guide pour Débutants

Salut là, future super star du codage ! ? Bienvenue dans notre passionnante aventure dans le monde de TypeScript et des annotations de type. En tant que votre enseignant de science informatique du quartier, je suis ravi de vous guider à travers cette aventure. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - nous allons commencer dès le début et progresser ensemble. Alors, attrapez votre sac à dos virtuel, et plongeons dedans !

Qu'est-ce que les Annotations de Type ?

Imaginez que vous préparez vos bagages pour un voyage. Vous avez différents sacs pour différents articles - un pour les vêtements, un pour les articles de toilette, et un pour les appareils électroniques. Les annotations de type dans TypeScript sont comme des étiquettes sur ces sacs. Elles nous disent, et disent à l'ordinateur, quel type de "trucs" (données) nous manipulons.

Dans le monde de TypeScript, les annotations de type sont un moyen de dire explicitement au compilateur quel type de valeur une variable, un paramètre de fonction ou une propriété d'objet peut contenir. C'est comme prévenir l'ordinateur à l'avance de ce à quoi s'attendre.

Pourquoi Utiliser les Annotations de Type ?

1. attraper les erreurs tôt : Elles nous aident à détecter les erreurs avant d'exécuter le code.
2. meilleure documentation du code : Elles rendent notre code plus facile à comprendre.
3. expérience de développement améliorée : Elles offrent une meilleure autocomplete et IntelliSense dans nos éditeurs de code.

Maintenant, voyons les différentes façons dont nous pouvons utiliser les annotations de type.

Annotations de Type pour les Variables

Lorsque nous créons une variable dans TypeScript, nous pouvons ajouter une annotation de type pour spécifier le type de valeur qu'elle devrait contenir.

Syntaxe de Base

let variableName: Type = value;

Voyons quelques exemples :

let myName: string = "Alice";
let myAge: number = 30;
let isStudent: boolean = true;

Dans ces exemples, nous disons à TypeScript :

• myName ne doit contenir que du texte (chaînes de caractères)
• myAge ne doit être qu'un nombre
• isStudent ne doit être que vrai ou faux (booléen)

Si nous essayons d'affecter un type de valeur différent ultérieurement, TypeScript nous préviendra :

myName = 42; //Erreur : Le type 'number' n'est pas assignable au type 'string'

Tableaux et Types Spéciaux

Nous pouvons également annoter les tableaux et utiliser des types spéciaux :

let favorites: string[] = ["pizza", "codage", "chatons"];
let anything: any = "Je peux être n'importe quoi !";
let maybe: unknown = 4;

• string[] signifie un tableau de chaînes de caractères
• any est un type spécial qui peut être n'importe quoi (à utiliser avec parcimonie !)
• unknown est une alternative plus sûre à any

Annotations de Type pour les Fonctions

Les fonctions peuvent avoir des annotations de type pour les paramètres et les valeurs de retour.

Syntaxe de Base

function functionName(param1: Type1, param2: Type2): ReturnType {
// corps de la fonction
}

Voyons quelques exemples :

function greet(name: string): string {
return `Bonjour, ${name} !`;
}

function add(a: number, b: number): number {
return a + b;
}

function logMessage(message: string): void {
console.log(message);
}

Dans ces exemples :

• greet prend une chaîne de caractères et renvoie une chaîne de caractères
• add prend deux nombres et renvoie un nombre
• logMessage prend une chaîne de caractères mais ne renvoie rien (void)

Fonctions Flèches

Les fonctions flèches peuvent également avoir des annotations de type :

const multiply = (a: number, b: number): number => a * b;

Annotations de Type pour les Propriétés d'Objet

Lorsque nous travaillons avec des objets, nous pouvons annoter leurs propriétés.

Syntaxe de Base

let objectName: { property1: Type1; property2: Type2 } = {
property1: value1,
property2: value2
};

Voyons un exemple :

let user: { name: string; age: number; isAdmin: boolean } = {
name: "Bob",
age: 25,
isAdmin: false
};

Ici, nous définissons un objet avec des types de propriétés spécifiques.

Interfaces pour les Objets Complexes

Pour les objets plus complexes, nous pouvons utiliser des interfaces :

interface Person {
name: string;
age: number;
hobbies: string[];
greet: () => void;
}

let employee: Person = {
name: "Charlie",
age: 30,
hobbies: ["lecture", "jeux vidéo"],
greet: () => console.log("Bonjour !")
};

Les interfaces nous aident à définir des shapes d'objets réutilisables.

Mettre Tout Ensemble

Maintenant que nous avons appris sur différentes annotations de type, voyons-les en action avec un exemple plus complexe :

interface Book {
title: string;
author: string;
pages: number;
isPublished: boolean;
}

function createBookList(books: Book[]): string[] {
return books.map(book => `${book.title} par ${book.author}`);
}

const myBooks: Book[] = [
{ title: "TypeScript 101", author: "Code Wizard", pages: 200, isPublished: true },
{ title: "JavaScript Adventures", author: "JS Ninja", pages: 150, isPublished: false }
];

const bookTitles: string[] = createBookList(myBooks);
console.log(bookTitles);

Cet exemple combine différents concepts que nous avons appris :

• Nous définissons une interface Book
• Nous créons une fonction createBookList qui prend un tableau d'objets Book et renvoie un tableau de chaînes de caractères
• Nous créons un tableau d'objets Book
• Nous appelons la fonction et stockons le résultat dans une variable avec l'annotation de type correcte

Conclusion

Félicitations ! Vous avez刚刚 pris vos premiers pas dans le monde des annotations de type TypeScript. Souvenez-vous, ces annotations sont comme des panneaux indicateurs amicaux vous guidant, vous et votre code, vers la sécurité. Elles peuvent sembler un peu accablantes au début, mais avec de la pratique, elles deviendront une seconde nature.

Alors que vous continuez votre parcours de codage, continuez à expérimenter avec différents types et annotations. N'ayez pas peur de faire des erreurs - c'est ainsi que nous apprenons et grandissons !

Voici un tableau pratique résumant les annotations de type que nous avons couvertes :

Annotation de Type	Exemple	Description
Types de Base	let name: string = "Alice";	Pour des valeurs simples comme des chaînes de caractères, des nombres, des booléens
Types de Tableau	let numbers: number[] = [1, 2, 3];	Pour des tableaux d'un type spécifique
Types de Fonction	function add(a: number, b: number): number	Pour les paramètres et les valeurs de retour des fonctions
Types d'Objet	let user: { name: string; age: number }	Pour les propriétés d'objet
Interfaces	interface Person { name: string; age: number }	Pour définir des shapes d'objets complexes

Continuez à coder, restez curieux, et souvenez-vous - chaque maître a déjà été un débutant. Bonne programmation TypeScript ! ??‍??‍?

Credits: Image by storyset