Après être tombé sur le matériel selon les principes du code propre pour TypeScript et le lire, j'ai décidé de reprendre sa traduction. Ici, je veux partager avec vous quelques extraits de cette traduction, car certains points de code TypeScript pur répètent les mêmes principes pour JavaScript, je ne les décrirai pas ici, si cela sera intéressant, la traduction de JS a déjà été publiée sur le hub (@ BoryaMogila ) ou Vous pouvez vous familiariser avec eux dans la source d'origine .

Pour commencer, voyons quels sont ces principes de code propre. Mais malheureusement, il est peu probable qu'il donne une définition claire du code propre. En partie, tout dépend des gens, par exemple, quand vous venez au musée, vous regardez la photo et pensez à quel genre de laideur, mais une autre personne arrive et dit quelle splendeur. Oui, nous avons certaines caractéristiques générales précises du monde où nous pouvons dire que l'une ou l'autre est belle, mais nous ne pouvons certainement pas donner une définition de tout cela. Il ne s'agit donc ici que de quelques petits critères de cette beauté, dont il choisit lui-même le respect. ce ne sont pas les règles qui sont gravées dans le granit. Ce ne sont que des recommandations.

Variables

Utilisez enum pour documenter

Enam's peut vous aider à documenter votre code. Par exemple, lorsque nous craignons que nos variables soient différentes des valeurs.

Mauvais:

const GENRE = { ROMANTIC: 'romantic', DRAMA: 'drama', COMEDY: 'comedy', DOCUMENTARY: 'documentary', } projector.configureFilm(GENRE.COMEDY); class Projector { // delactation of Projector configureFilm(genre) { switch (genre) { case GENRE.ROMANTIC: // some logic to be executed } } } 

Bon:

 enum GENRE { ROMANTIC, DRAMA, COMEDY, DOCUMENTARY, } projector.configureFilm(GENRE.COMEDY); class Projector { // delactation of Projector configureFilm(genre) { switch (genre) { case GENRE.ROMANTIC: // some logic to be executed } } } 

Les fonctions

Évitez la vérification de type

TypeScript est un surensemble de syntaxe JavaScript et ajoute des vérifications de type statiques supplémentaires pour le langage. Préférez toujours spécifier des types de variables, des paramètres et des valeurs de retour pour tirer pleinement parti de TypeScript. Cela facilite la refactorisation future.

Mauvais:

 function travelToTexas(vehicle: Bicycle | Car) { if (vehicle instanceof Bicycle) { vehicle.pedal(currentLocation, new Location('texas')); } else if (vehicle instanceof Car) { vehicle.drive(currentLocation, new Location('texas')); } } 

Bon:

 type Vehicle = Bicycle | Car; function travelToTexas(vehicle: Vehicle) { vehicle.move(currentLocation, new Location('texas')); } 

Utiliser des itérateurs et des générateurs

Utilisez des générateurs et des itérateurs lorsque vous travaillez avec des collections de données utilisées comme flux.
Il y a plusieurs raisons à cela:

• sépare l'objet appelé de l'implémentation du générateur dans le sens où l'objet appelé décide du nombre d'éléments
  avoir accès
• exécution paresseuse, les éléments sont transmis à la demande
• prise en charge intégrée des éléments d'itération à l'aide for-of syntaxe for-of
• les itérateurs vous permettent d'implémenter des modèles d'itérateurs optimisés

Mauvais:

 function fibonacci(n: number): number[] { if (n === 1) return [0]; if (n === 2) return [0, 1]; const items: number[] = [0, 1]; while (items.length < n) { items.push(items[items.length - 2] + items[items.length - 1]); } return items; } function print(n: number) { fibonacci(n).forEach(fib => console.log(fib)); } // Print first 10 Fibonacci numbers. print(10); 

Bon:

 // Generates an infinite stream of Fibonacci numbers. // The generator doesn't keep the array of all numbers. function* fibonacci(): IterableIterator<number> { let [a, b] = [0, 1]; while (true) { yield a; [a, b] = [b, a + b]; } } function print(n: number) { let i = 0; for (const fib of fibonacci()) { if (i++ === n) break; console.log(fib); } } // Print first 10 Fibonacci numbers. print(10); 

Il existe des bibliothèques qui vous permettent de travailler avec les itérateurs de la même manière qu'avec vos propres tableaux, en chaînant des méthodes telles que map , slice , forEach , etc. Voir l'exemple itiriri pour la manipulation avancée des itérateurs (ou itiriri-async pour manipuler les itérateurs asynchrones).

 import itiriri from 'itiriri'; function* fibonacci(): IterableIterator<number> { let [a, b] = [0, 1]; while (true) { yield a; [a, b] = [b, a + b]; } } itiriri(fibonacci()) .take(10) .forEach(fib => console.log(fib)); 

Objets et structures de données

Utiliser des getters et setters

TypeScript prend en charge la syntaxe des getters et setters. L'utilisation de getters et de setters pour accéder aux données d'objets est bien meilleure que d'accéder directement à ses propriétés. "Pourquoi?" demandez-vous. Voici une liste de raisons:

• Si vous souhaitez implémenter plus qu'un simple accès à une propriété, vous devez modifier l'implémentation en un seul endroit, et non dans tout le code
• La validation est facile à implémenter au niveau d'implémentation set
• Encapsulation de l'état interne
• Enregistrement et gestion des erreurs faciles à ajouter au niveau du getter et du setter
• Vous pouvez paresseusement charger les propriétés de votre objet, par exemple, à partir du serveur

Mauvais:

 type BankAccount = { balance: number; // ... } const value = 100; const account: BankAccount = { balance: 0, // ... }; if (value < 0) { throw new Error('Cannot set negative balance.'); } account.balance = value; 

Bon:

 class BankAccount { private accountBalance: number = 0; get balance(): number { return this.accountBalance; } set balance(value: number) { if (value < 0) { throw new Error('Cannot set negative balance.'); } this.accountBalance = value; } // ... } //  `BankAccount`   . //    ,      , //      ``, //      . const account = new BankAccount(); account.balance = 100; 

Créer des objets avec des champs privés / sécurisés

TypeScript prend public charge public moyens public (par défaut) , protected et private d'accéder aux propriétés de classe.

Mauvais:

 class Circle { radius: number; constructor(radius: number) { this.radius = radius; } perimeter() { return 2 * Math.PI * this.radius; } surface() { return Math.PI * this.radius * this.radius; } } 

Bon:

 class Circle { constructor(private readonly radius: number) { } perimeter() { return 2 * Math.PI * this.radius; } surface() { return Math.PI * this.radius * this.radius; } } 

Chers lecteurs, quels principes utilisez-vous lorsque vous utilisez TypeScript?

À suivre ...