Cours JavaScript et TypeScript · Module 6: Bases de TypeScript

Les types de base (string, number, boolean, any, unknown)

8 min de lecture
Dans cette leçon12

Bienvenue de nouveau dans notre voyage à travers TypeScript au Jurassic Park ! Aujourd'hui, le Dr Henry Wu a une leçon spéciale pour toi. Tout comme catégoriser les espèces de dinosaures est crucial pour leur bon élevage et leurs soins, catégoriser les données en TypeScript est un élément fondamental pour écrire du code sûr.

Pourquoi les types sont-ils importants ?

Sans catégorisation appropriée, le chaos se répandrait vite dans le Jurassic Park : imagine donner aux prédateurs de la nourriture d'herbivores, ou placer de petites espèces inoffensives dans des enclos avec de grands prédateurs.

En programmation, les types jouent un rôle similaire : ils empêchent de « mélanger les espèces » de données qui ne devraient pas l'être. Examinons les types de données de base en TypeScript, à l'aide d'exemples liés à la gestion du parc.

String - les chaînes de caractères

Le type string en TypeScript représente du texte : noms d'espèces, descriptions, identifiants et autres données textuelles.

1// Declaring string type variables
2let speciesName: string = "Tyrannosaurus Rex";
3let dnaCode: string = "ACGTTGCA";
4let enclosureCode: string = "P-12";
5
6// String operations
7let fullDescription: string = `${speciesName} (DNA code: ${dnaCode}) - enclosure ${enclosureCode}`;
8console.log(fullDescription.toUpperCase()); // Displays: "TYRANNOSAURUS REX (DNA CODE: ACGTTGCA) - ENCLOSURE P-12"

Number - les nombres

Le type number gère à la fois les entiers et les nombres à virgule flottante. Il est idéal pour représenter l'âge des dinosaures, leur poids, le budget du parc et d'autres valeurs numériques.

1// Declaring number type variables
2let dinosaurAge: number = 5; // in years
3let dinosaurWeight: number = 7500.5; // in kilograms
4let bodyTemperature: number = 38.2; // in degrees Celsius
5
6// Mathematical operations
7let dailyFoodRation: number = dinosaurWeight * 0.05; // 5% of weight daily
8let annualMaintenanceCost: number = dailyFoodRation * 365 * 10; // food cost in dollars

Boolean - les valeurs logiques

Le type boolean représente des valeurs vrai/faux, idéales pour suivre des statuts, des conditions ou des indicateurs dans le système du parc.

1// Declaring boolean type variables
2let isPredator: boolean = true;
3let isActive: boolean = false;
4let isAdult: boolean = dinosaurAge >= 3; // calculated value
5
6// Use in conditional logic
7if (isPredator && isActive) {
8  console.log("WARNING: Active predator! Check enclosure security!");
9}
10
11// Use in a configuration object
12let securityProtocol = {
13  requiresDoubleEnclosure: isPredator,
14  requiresNightMonitoring: isActive,
15  allowedForVisitors: !isPredator || !isActive
16};

Any - le type quelconque

Le type any est comme une espèce de dinosaure inconnue qui peut se comporter de façon imprévisible. Il permet d'assigner n'importe quelle valeur à une variable et d'effectuer n'importe quelle opération dessus, ce qui peut être dangereux !

1// Declaring any type variables
2let researchSample: any = "DNA-123";
3researchSample = 42; // We can change the type to number
4researchSample = true; // We can change the type to boolean
5researchSample = { type: "blood", age: "unknown" }; // We can change the type to object
6
7// Opérations dangereuses
8researchSample.nonExistentMethod(); // TypeScript ne signalera aucune erreur !

ATTENTION : le Dr Wu déconseille fortement d'abuser du type any : c'est comme laisser entrer dans le parc des dinosaures non identifiés sans sécurité appropriée ! Ne l'utilise qu'en dernier recours, quand tu ne sais vraiment pas quel type de données tu vas recevoir.

Unknown - un type inconnu, mais plus sûr

Le type unknown est comme une nouvelle espèce de dinosaure en quarantaine : avant de la relâcher, tu dois soigneusement vérifier ses propriétés.

1// Déclaration de variables de type unknown
2let newDiscovery: unknown = fetchDataFromExcavation();
3
4// On ne peut pas effectuer d'opérations directement
5// newDiscovery.method(); // Erreur : Object is of type 'unknown'
6
7// On doit d'abord vérifier le type
8if (typeof newDiscovery === "string") {
9  console.log(newDiscovery.toUpperCase()); // OK
10} else if (typeof newDiscovery === "number") {
11  console.log(newDiscovery.toFixed(2)); // OK
12} else if (newDiscovery instanceof DinoFragment) {
13  console.log(newDiscovery.analyzeDNA()); // OK
14}

Les types littéraux - restreindre les valeurs

Les types littéraux permettent de définir un ensemble strict de valeurs autorisées, ce qui est utile par exemple pour définir des espèces de dinosaures ou des zones de sécurité.

1// Literal types
2type PredatorSpecies = "Tyrannosaurus" | "Velociraptor" | "Spinosaurus";
3type ThreatLevel = 1 | 2 | 3 | 4 | 5;
4type EnclosureStatus = "active" | "under maintenance" | "closed";
5
6// Using literal types
7let currentPredator: PredatorSpecies = "Velociraptor";
8let threat: ThreatLevel = 4;
9let tEnclosureStatus: EnclosureStatus = "active";
10
11// Attempting to assign a disallowed value will cause an error
12// currentPredator = "Stegosaurus"; // Error: Type '"Stegosaurus"' is not assignable to type 'PredatorSpecies'

L'inférence de types - détection automatique du type

TypeScript peut inférer automatiquement le type d'une variable à partir de la valeur qui lui est assignée, ce qui permet un code plus concis.

1// Automatic type detection
2let dinoName = "Blue"; // TypeScript infers type string
3let age = 3; // TypeScript infers type number
4let isActive = true; // TypeScript infers type boolean
5
6// TypeScript prevents incorrect assignment
7// dinoName = 42; // Error: Type 'number' is not assignable to type 'string'

Union Types - les types union

Les types union permettent de spécifier qu'une variable peut prendre des valeurs de plusieurs types différents, ce qui est utile dans de nombreux scénarios du parc.

1// Declaring a variable that can be string or number
2let identifier: string | number;
3
4identifier = "TREX-001"; // OK
5identifier = 12345; // OK
6// identifier = true; // Error: Type 'boolean' is not assignable to type 'string | number'
7
8// Function handling different dinosaur data types
9function processData(data: string | number | boolean) {
10  if (typeof data === "string") {
11    return data.toUpperCase();
12  } else if (typeof data === "number") {
13    return data.toFixed(2);
14  } else {
15    return data ? "ACTIVE" : "INACTIVE";
16  }
17}

Null et Undefined

En TypeScript, null et undefined sont des valeurs spéciales qui peuvent être utiles pour représenter l'absence de données, par exemple quand un dinosaure n'a pas encore reçu de puce RFID.

1// With strictNullChecks enabled in tsconfig.json
2let rfidTag: string | null = null; // Dinosaur hasn't received a tag yet
3let lastCheckup: Date | undefined; // Checkup hasn't been performed yet
4
5// Checking before use
6function checkStatus(dino: { name: string, tag: string | null }) {
7  if (dino.tag === null) {
8    return `${dino.name} has no RFID tag - requires tagging`;
9  } else {
10    return `${dino.name} tagged with ${dino.tag}`;
11  }
12}

Application pratique des types de base

Considérons un système de surveillance de la santé des dinosaures dans lequel nous utilisons différents types de données :

1// Interface describing the structure of dinosaur data
2interface DinosaurData {
3  id: number;
4  name: string;
5  species: string;
6  age: number;
7  weight: number;
8  isPredator: boolean;
9  healthStatus: "good" | "fair" | "needs attention" | "critical" | null;
10  rfidTag: string | null;
11  lastCheckup: Date | undefined;
12}
13
14// Function checking whether a dinosaur needs veterinary intervention
15function needsIntervention(dino: DinosaurData): boolean {
16  // A dinosaur needs intervention if:
17  // - its health status is critical
18  // - it hasn't had a checkup in the last 30 days
19  // - it has no RFID tag
20
21  const today = new Date();
22  const thirtyDaysAgo = new Date();
23  thirtyDaysAgo.setDate(today.getDate() - 30);
24
25  return (
26    dino.healthStatus === "critical" ||
27    dino.healthStatus === null ||
28    dino.rfidTag === null ||
29    (dino.lastCheckup === undefined || dino.lastCheckup < thirtyDaysAgo)
30  );
31}
32
33// Example usage
34const raptorBlue: DinosaurData = {
35  id: 101,
36  name: "Blue",
37  species: "Velociraptor",
38  age: 5,
39  weight: 350,
40  isPredator: true,
41  healthStatus: "good",
42  rfidTag: "VR-101-BLUE",
43  lastCheckup: new Date("2023-08-15")
44};
45
46const trixie: DinosaurData = {
47  id: 205,
48  name: "Trixie",
49  species: "Triceratops",
50  age: 12,
51  weight: 8500,
52  isPredator: false,
53  healthStatus: "needs attention",
54  rfidTag: "TC-205-TRIXIE",
55  lastCheckup: undefined
56};
57
58console.log(`Blue needs intervention: ${needsIntervention(raptorBlue)}`);
59console.log(`Trixie needs intervention: ${needsIntervention(trixie)}`);

Résumé

Bien utiliser les types de base en TypeScript, c'est comme gérer avec précision différentes espèces de dinosaures au Jurassic Park : cela garantit la sécurité et la prévisibilité.

TypeUtilisation au Jurassic ParkExemple
stringNoms, descriptions, identifiants"Velociraptor", "P-12"
numberÂge, poids, coûts5, 7500.5, 38.2
booleanStatuts, conditions, indicateurstrue, false
anyDonnées de structure inconnue (à utiliser avec prudence !)Anciens systèmes, données externes
unknownAlternative plus sûre à anyDonnées nécessitant une validation
types unionValeurs pouvant être de différents typesstringnumbernull
types littérauxEnsemble restreint de valeurs"active""inactive"

Dans la prochaine leçon, nous examinerons des types plus complexes comme les tableaux, les tuples et les énumérations, qui nous permettront de modéliser encore mieux la structure des données de notre parc.

Le Dr Henry Wu nous le rappelle : « Tout comme en génétique des dinosaures, en TypeScript la précision des types est la clé du succès et permet d'éviter... les surprises. »

Code de cette leçon : index.ts
1// Types de base dans le Parc Jurassique
2console.log("Types de base TypeScript\n");
3
4// ===========================================
5// 1. STRING - textes
6// ===========================================
7console.log("=== TYPE STRING ===");
8
9let species: string = "Tyrannosaurus Rex";
10let dnaCode: string = "ACGTTGCA";
11let paddockId: string = "P-12";
12
13// Template literals
14let fullDescription: string = `${species} (DNA: ${dnaCode}) - Paddock ${paddockId}`;
15console.log(fullDescription);
16console.log(`Uppercase: ${species.toUpperCase()}`);
17
18// ===========================================
19// 2. NUMBER - nombres
20// ===========================================
21console.log("\n=== TYPE NUMBER ===");
22
23let age: number = 5; // ans
24let weight: number = 7500.5; // kg
25let temperature: number = 38.2; // °C
26let hexValue: number = 0xFF; // 255
27let binaryValue: number = 0b1010; // 10
28
29console.log(`Age: ${age} years`);
30console.log(`Weight: ${weight}kg`);
31console.log(`Temperature: ${temperature}°C`);
32
33// Mathematical operations
34let dailyFeed: number = weight * 0.05;
35let yearlyFeedCost: number = dailyFeed * 365 * 10;
36console.log(`Daily feed: ${dailyFeed}kg`);
37console.log(`Yearly cost: $${yearlyFeedCost}`);
38
39// ===========================================
40// 3. BOOLEAN - logical values
41// ===========================================
42console.log("\n=== TYPE BOOLEAN ===");
43
44let isCarnivore: boolean = true;
45let isActive: boolean = false;
46let isAdult: boolean = age >= 3;
47let isHungry: boolean = true;
48let isDangerous: boolean = isCarnivore && isHungry;
49
50console.log(`Is carnivore: ${isCarnivore}`);
51console.log(`Is active: ${isActive}`);
52console.log(`Is adult: ${isAdult}`);
53console.log(`Is dangerous: ${isDangerous}`);
54
55// Logique conditionnelle
56if (isDangerous) {
57  console.log("Security level: CRITICAL");
58} else {
59  console.log("Security level: NORMAL");
60}
61
62// ===========================================
63// 4. ANY - type quelconque (à éviter !)
64// ===========================================
65console.log("\n=== TYPE ANY ===");
66
67let mysteryData: any = "unknown";
68mysteryData = 123; // OK
69mysteryData = true; // OK
70mysteryData = { type: "fossil" }; // OK
71
72console.log("ANY doesn't check types - use carefully!");
73console.log("Mystery data:", mysteryData);
74
75// ===========================================
76// 5. UNKNOWN - any plus sûr
77// ===========================================
78console.log("\n=== TYPE UNKNOWN ===");
79
80let unknownData: unknown = "mysterious DNA sequence";
81
82// We must check the type before use
83if (typeof unknownData === 'string') {
84  console.log("Unknown data length:", unknownData.length);
85} else {
86  console.log("Not a string");
87}
88
89console.log("UNKNOWN nécessite une vérification du type");
90
91// ===========================================
92// 6. NULL et UNDEFINED
93// ===========================================
94console.log("\n=== NULL ET UNDEFINED ===");
95
96let emptyValue: null = null;
97let notInitialized: undefined = undefined;
98
99let optionalSpecies: string | null = null; // can be string or null
100let optionalAge: number | undefined; // can be number or undefined
101
102console.log("Empty value:", emptyValue);
103console.log("Not initialized:", notInitialized);
104console.log("Optional species:", optionalSpecies);
105console.log("Optional age:", optionalAge);
106
107// Vérification null/undefined
108function displaySpecies(s: string | null): void {
109  if (s !== null) {
110    console.log(`Species: ${s}`);
111  } else {
112    console.log("Species unknown");
113  }
114}
115
116displaySpecies(species);
117displaySpecies(null);
118
119// ===========================================
120// 7. Résumé
121// ===========================================
122console.log("\n=== RÉSUMÉ ===");
123console.log("string - textes et caractères");
124console.log("number - nombres (int, float, hex, binary)");
125console.log("boolean - true/false");
126console.log("any - type quelconque (à éviter)");
127console.log("unknown - any plus sûr");
128console.log("null - no value");
129console.log("undefined - non initialisé");
130
131console.log("\nTypes de base maîtrisés !");

Tu as repéré une erreur dans cette leçon ?

Teste tes connaissances

Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.

  1. 1. Que fait l’opérateur : après un nom de variable en TypeScript ?

Tâches pratiques dans le jeu

  • Éditeur de code

    Définis des variables de types string, number et boolean décrivant un dinosaure.

  • Tri horizontal

    Ordonne les éléments d’une déclaration de variable typée en TypeScript :

  • Clique dans l'ordre

    Ordonne les éléments d’une fonction TypeScript avec types :

Articles utiles