TypeScript - Types: A Beginner's Guide

Salut là, future superзвезды кодирования! Aujourd'hui, nous plongeons dans le monde fascinant des types de TypeScript. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - je serai votre guide amical sur ce voyage passionnant. D'ici la fin de ce tutoriel, vous serez étonné de voir combien vous avez appris. Alors, c'est parti !

Qu'est-ce que les types dans TypeScript ?

Avant de sauter dans le grand bain, parlons de ce qu'est un type et pourquoi c'est important. Pensez aux types comme des étiquettes que nous mettons sur nos données. tout comme nous organisons notre placard avec différentes sections pour les chemises, les pantalons et les chaussures, les types nous aident à organiser notre code et à empêcher de mettre une métaphore de chaussette dans le tiroir à chemises !

TypeScript est un supra-ensemble de JavaScript qui ajoute un typage statique optionnel. Cela signifie que nous pouvons dire exactement à TypeScript quel type de données nous manipulons, ce qui aide à attraper les erreurs avant que notre code ne soit même exécuté. C'est comme avoir un ami attentionné qui regarde par-dessus votre épaule, signalant les erreurs potentielles avant que vous ne les commettiez.

Le type Any : la carte joker de TypeScript

Commençons par le type le plus flexible de TypeScript : any. C'est comme le joker dans un jeu de cartes - il peut être n'importe quoi !

let maVariable: any = 42;
maVariable = "Bonjour, le monde !";
maVariable = true;

Dans cet exemple, maVariable peut être un nombre, puis une chaîne, puis un booléen. C'est très flexible, mais avec grand pouvoir vient une grande responsabilité. Utilisez any trop souvent revient à contredire l'intérêt d'utiliser TypeScript, donc utilisez-le avec modération !

Types intégrés : les briques de construction de TypeScript

TypeScript comes avec plusieurs types intégrés qui couvrent la plupart de nos besoins. Explorons-les un par un :

1. Nombre

let age: number = 30;
let price: number = 9.99;

Les nombres en TypeScript peuvent être des entiers ou des valeurs à virgule flottante. Pas besoin de se soucier de différents types de nombres comme dans certains autres langages !

2. Chaîne

let name: string = "Alice";
let greeting: string = `Bonjour, ${name} !`;

Les chaînes peuvent être définies avec des quotes simples, des quotes doubles ou des backticks. Les backticks permettent d'incruster des expressions en utilisant ${}.

3. Booléen

let isStudent: boolean = true;
let hasPassedExam: boolean = false;

Les booléens sont simples - ils sont soit true, soit false. Pensez à eux comme des questions oui/non pour votre code.

4. Tableau

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["pomme", "banane", "orange"];

Les tableaux peuvent contenir plusieurs valeurs du même type. Nous pouvons les définir en utilisant des crochets ou la syntaxe Array<T>.

5. Tuple

let person: [string, number] = ["Alice", 30];

Les tuples sont des tableaux avec un nombre fixe d'éléments, où chaque élément peut avoir un type différent. Ils sont comme une petite boîte organisée avec des compartiments spécifiques pour chaque article.

6. Enum

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

Les enums nous permettent de définir un ensemble de constantes nommées. Ils sont parfaits pour représenter un ensemble fixe d'options.

7. Void

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

Void est utilisé pour indiquer qu'une fonction ne retourne rien. C'est comme envoyer une lettre sans attendre de réponse.

8. Null et Undefined

let notDefined: undefined = undefined;
let empty: null = null;

Ces types représentent l'absence d'une valeur. Ils sont comme des boîtes vides - l'une intentionnellement vide (null) et l'autre qui n'a pas encore été remplie (undefined).

Voici un tableau récapitulatif des types intégrés que nous avons couverts :

Type	Description	Exemple
number	Valeurs numériques (entier ou à virgule flottante)	let age: number = 30;
string	Données textuelles	let name: string = "Alice";
boolean	Valeurs true ou false	let isStudent: boolean = true;
array	Collection de valeurs du même type	let numbers: number[] = [1, 2, 3];
tuple	Tableau de longueur fixe avec éléments de types spécifiques	let person: [string, number] = ["Alice", 30];
enum	Ensemble de constantes nommées	enum Color { Red, Green, Blue }
void	Absence de valeur de retour dans les fonctions	function logMessage(message: string): void { ... }
null	Absence intentionnelle de toute valeur d'objet	let empty: null = null;
undefined	Variable qui n'a pas été affectée de valeur	let notDefined: undefined = undefined;

Types définis par l'utilisateur : Fabriquer vos propres outils

Maintenant que nous avons couvert les types intégrés, parlons de la création de vos propres types personnalisés. C'est là que TypeScript brille vraiment !

1. Interfaces

Les interfaces nous permettent de définir la structure d'un objet. Pensez à elles comme des plans pour des objets.

interface Person {
name: string;
age: number;
greet(): void;
}

let alice: Person = {
name: "Alice",
age: 30,
greet() {
console.log(`Bonjour, mon nom est ${this.name}`);
}
};

Dans cet exemple, nous avons défini une interface Person et créé un objet qui suit cette structure. C'est comme créer un formulaire que les gens doivent remplir - tout le monde doit fournir les mêmes informations.

2. Classes

Les classes sont un moyen de créer des composants réutilisables. Elles sont comme des moules à cookies - vous définissez la forme une fois, et puis vous pouvez faire autant de cookies (objets) que vous le souhaitez !

class Student {
name: string;
grade: number;

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

study() {
console.log(`${this.name} étudie dur !`);
}
}

let bob = new Student("Bob", 10);
bob.study(); // Affiche : "Bob étudie dur !"

Ici, nous avons créé une classe Student avec des propriétés (name et grade) et une méthode (study). Nous pouvons créer autant d'étudiants que nous le souhaitons en utilisant cette classe.

3. Aliases de type

Les aliases de type nous permettent de créer de nouveaux noms pour des types. Ils sont utiles pour créer des types complexes ou donner des noms plus significatifs aux types existants.

type Point = {
x: number;
y: number;
};

let center: Point = { x: 0, y: 0 };

Dans cet exemple, nous avons créé un type Point qui représente un point dans l'espace 2D. C'est un moyen simple de regrouper des propriétés liées ensemble.

4. Types d'union

Les types d'union permettent à une valeur d'être l'un des plusieurs types. C'est comme dire : "Ce peut être soit cela, soit cela."

type Result = number | string;

function getResult(value: boolean): Result {
return value ? "Succès" : 404;
}

Ici, Result peut être soit un nombre, soit une chaîne. Cela est utile lorsque une valeur peut être de différents types en fonction de certaines conditions.

5. Types d'intersection

Les types d'intersection combinent plusieurs types en un. C'est comme dire : "Ce doit être cela ET cela."

interface Colorful {
color: string;
}

interface Circle {
radius: number;
}

type ColorfulCircle = Colorful & Circle;

let myCircle: ColorfulCircle = {
color: "rouge",
radius: 5
};

Dans cet exemple, ColorfulCircle est à la fois Colorful et un Circle. Il doit avoir à la fois une color et un radius.

Et voilà ! Nous avons couvert les bases des types de TypeScript, du flexible type any aux types intégrés et aux types définis par l'utilisateur. Souvenez-vous, les types en TypeScript sont comme vos supers pouvoirs de codage - ils vous aident à écrire un code plus propre et plus fiable, et à attraper les erreurs avant qu'elles ne deviennent des problèmes.

Alors, continuez votre voyage TypeScript, continuez à expérimenter avec ces types. Essayez de les combiner de différentes manières, et n'ayez pas peur de faire des erreurs - c'est ainsi que nous apprenons ! Avant de savoir dire, vous serez tapping away comme un pro, créant du code robuste et exempt d'erreurs.

Bonne programmation, et puissent vos types toujours être forts !

Credits: Image by storyset