Meilleures pratiques pour les boucles for en TypeScript

Cet article explique les meilleures pratiques pour utiliser les boucles for en TypeScript.

YouTube Video

Meilleures pratiques pour les boucles for en TypeScript

Les instructions for sont une syntaxe fondamentale et puissante permettant d'effectuer des opérations répétitives. En TypeScript, tirer parti de la sécurité des types et écrire du code en tenant compte de la lisibilité et de la maintenabilité permet d'écrire un code efficace avec moins d'erreurs.

Choisir le bon type de boucle

TypeScript propose plusieurs constructions de boucle, chacune adaptée à différents cas d'utilisation. Choisir la boucle appropriée est essentiel pour la clarté du code et les performances.

Boucle for standard

1for (let i = 0; i < 10; i++) {
2    console.log(i);
3}

La boucle for standard est idéale lorsque vous avez besoin d'un contrôle précis sur l'index d'itération.

Bonnes pratiques

1const maxIterations = 10;
2for (let i = 0; i < maxIterations; i++) {
3    console.log(i);
4}

Lors de l'écriture d'instructions for, garder à l'esprit les points suivants peut vous aider à écrire un code plus sûr et plus lisible.

• Utilisez let pour les variables d'index
  • Utiliser let au lieu de var limite la portée au bloc, évitant ainsi des comportements inattendus.
• Utilisez des constantes et des noms de variables descriptifs pour rendre explicites les limites de la boucle.
  • Éviter les nombres magiques et utiliser des noms de variables significatifs améliore la lisibilité.

Boucle for...of

1const array = [1, 2, 3];
2for (let value of array) {
3    console.log(value);
4}

La boucle for...of est adaptée pour itérer sur des objets itérables comme les tableaux et les chaînes de caractères.

Bonnes pratiques

1const array = [1, 2, 3];
2for (const value of array) {
3    console.log(value);
4}

Lors de l'écriture de boucles for...of, prêter attention aux points suivants peut vous aider à écrire un code plus sûr.

• Utilisez const pour les variables de boucle
  • Si les valeurs ne sont pas modifiées dans la boucle, utiliser const aide à prévenir les réassignations accidentelles.

Boucle for...in

1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3    console.log(`${key}: ${obj[key]}`);
4}

La boucle for...in itère sur les propriétés énumérables d'un objet.

Bonnes pratiques

1const obj = { a: 1, b: 2, c: 3 };
2for (const key in obj) {
3    if (obj.hasOwnProperty(key)) {
4        console.log(`${key}: ${obj[key]}`);
5    }
6}

Lorsque vous écrivez une boucle for...in, vous pouvez considérer les points suivants.

• Filtrez les propriétés
  • Si vous devez éviter les propriétés héritées, vous pouvez utiliser hasOwnProperty.
• N'utilisez pas for...in avec les tableaux. Évitez d'utiliser for...in avec les tableaux. Cela pourrait parcourir toutes les propriétés énumérables, y compris celles qui ne sont pas des indices de tableau.

Méthode forEach

1const array = [1, 2, 3];
2array.forEach((value, index) => {
3    console.log(`Index: ${index}, Value: ${value}`);
4});

Lors de l'itération sur des tableaux, forEach est concis et élimine le besoin de gérer les indices.

Bonnes pratiques

Lors de l'utilisation de la méthode forEach, vous pouvez considérer les points suivants.

• Utilisez des fonctions fléchées
  • Utilisez des fonctions fléchées concises pour améliorer la lisibilité.
• Évitez les interruptions
  • forEach ne supporte pas break ou continue. Utilisez les boucles for...of ou for lorsque cela est nécessaire :.

Sécurité des types et prévention des erreurs

En exploitant le système de types de TypeScript, vous pouvez éviter les erreurs à l'exécution pendant les itérations :.

Définissez des types stricts pour les variables de boucle

1const items = [1, 2, 3];
2items.forEach(item => {
3    console.log(item * 2);
4});

1const items: number[] = [1, 2, 3];
2items.forEach((item: number) => {
3    console.log(item * 2);
4});

En spécifiant explicitement les types des variables de boucle, vous pouvez détecter rapidement les incompatibilités de type.

Évitez le type implicite any

1{
2  "compilerOptions": {
3    "noImplicitAny": true
4  }
5}

De plus, en activant noImplicitAny dans tsconfig.json, vous pouvez empêcher que des variables sans types explicites soient implicitement assignées au type any.

Utilisez ReadonlyArray lorsque nécessaire

1const numbers: ReadonlyArray<number> = [1, 2, 3];
2for (const value of numbers) {
3    console.log(value);
4}

Si vous parcourez un tableau qui ne doit pas être modifié, vous pouvez utiliser ReadonlyArray.

Considérations sur les performances

L'efficacité est cruciale pour les boucles traitant de grands volumes de données ou exécutées fréquemment :.

Choisissez la méthode d'implémentation de boucle la plus optimale.

Il existe différentes façons de mettre en œuvre des boucles, chacune ayant des différences en termes de lisibilité et d'efficacité d'exécution.

 1// Prepare input data (an array from 1 to 1000000)
 2const input: number[] = Array.from({ length: 1000000 }, (_, i) => i + 1);
 3
 4// --- for ---
 5console.time('for loop');
 6const squaresFor: number[] = [];
 7for (let i = 0; i < input.length; i++) {
 8    squaresFor.push(input[i] * input[i]);
 9}
10console.timeEnd('for loop');
11
12// --- while ---
13console.time('while loop');
14const squaresWhile: number[] = [];
15let i: number = 0;
16while (i < input.length) {
17    squaresWhile.push(input[i] * input[i]);
18    i++;
19}
20console.timeEnd('while loop');
21
22// --- for-of ---
23console.time('for-of loop');
24const squaresForOf: number[] = [];
25for (const num of input) {
26    squaresForOf.push(num * num);
27}
28console.timeEnd('for-of loop');
29
30// --- forEach ---
31console.time('forEach loop');
32const squaresForEach: number[] = [];
33input.forEach((num: number): void => {
34    squaresForEach.push(num * num);
35});
36console.timeEnd('forEach loop');
37
38// --- map ---
39console.time('map');
40const squaresMap: number[] = input.map((value: number): number => value * value);
41console.timeEnd('map');

L'efficacité varie en fonction de l'environnement d'exécution, mais par exemple, lors de l'exécution d'une boucle un million de fois, la différence peut devenir assez notable. Choisissez la méthode de boucle optimale en tenant compte de la maintenabilité et des performances.

Utilisez des méthodes d'itération natives

 1const squares = [1, 2, 3].map(value => value * value);
 2console.log(squares);
 3
 4const numbers = [1, 2, 3, 4, 5, 6];
 5const evenNumbers = numbers.filter(value => value % 2 === 0);
 6console.log(evenNumbers); // [2, 4, 6]
 7
 8const squaredEvens = numbers
 9    .filter(value => value % 2 === 0) // Keep only even numbers
10    .map(value => value * value);     // Square the remaining values
11
12console.log(squaredEvens); // [4, 16, 36]

Des méthodes comme map et filter peuvent être plus lisibles dans certains cas.

Privilégiez for...of pour la lisibilité

La performance ne doit être priorisée que dans des cas limités ; écrire un code lisible est généralement plus important. Par exemple, privilégier for...of peut améliorer la lisibilité.

1const fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(`${i}: ${fruits[i]}`);
5}

Bonnes pratiques

1const fruits = ["apple", "banana", "cherry"];
2
3for (const [index, fruit] of fruits.entries()) {
4    console.log(`${index}: ${fruit}`);
5}

En privilégiant les boucles for...of, vous pouvez écrire un code plus lisible et plus résistant aux erreurs. Comme le montre cet exemple, si vous avez également besoin des index d'un tableau, combiner entries() avec for...of est efficace.

Évitez les pièges courants

Modifier les collections pendant l'itération

1const array = [1, 2, 3];
2for (const value of [...array]) {
3    if (value === 2) {
4        array.push(4); // Avoid this!
5    }
6}
7console.log(array);

Modifier un tableau pendant une itération peut entraîner un comportement inattendu :. Utilisez une copie si nécessaire.

Tenez compte des cas limites

1const array: number[] = [];
2for (const value of array) {
3    console.log(value); // No output, but no errors
4}

Ce code fonctionne bien, mais si vous devez gérer des tableaux vides, vous pouvez l'améliorer comme suit.

1const array: number[] = [];
2if (array.length === 0) {
3    console.log("The array is empty.");
4} else {
5    for (const value of array) {
6        console.log(value);
7    }
8}

Tenir compte des cas limites peut aider à prévenir les erreurs dans le code ultérieur.

Conclusion

Pour maîtriser l'instruction for en TypeScript, il est essentiel de comprendre les différentes constructions de boucles, d'adhérer aux pratiques sécurisées pour les types, et d'optimiser les performances. Ces meilleures pratiques vous aident à écrire un code plus propre, plus fiable et plus facile à maintenir.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video