Tout ce que vous devez savoir sur les types en dactylographie

TypeScript : Guide du débutant sur la saisie statique en JavaScript

La flexibilité de JavaScript est une arme à double tranchant. Bien qu'il permette un prototypage rapide et une facilité d'utilisation, sa nature dynamique peut conduire à des erreurs d'exécution difficiles à déboguer. TypeScript, un sur-ensemble de JavaScript, résout ce problème en ajoutant un typage statique. Ce guide présente le système de types de TypeScript, expliquant ses avantages et comment l'utiliser efficacement.

Comprendre les types

En programmation, un type spécifie le type de données qu'une variable peut contenir. Le typage dynamique de JavaScript signifie que les variables peuvent changer de type librement :

<code class="language-javascript">let value = 42; // Number
value = "Hello"; // String</code>

Cette flexibilité, bien que pratique, peut entraîner des problèmes inattendus. Le typage statique de TypeScript vous oblige à déclarer le type d'une variable, évitant ainsi de telles erreurs :

<code class="language-typescript">let value: number = 42;
value = "Hello"; // Error: Type 'string' is not assignable to type 'number'</code>

L'importance des types

Le typage statique offre des avantages significatifs :

• Détection précoce des erreurs : Détecte les erreurs lors de la compilation, pas lors de l'exécution.
• Outils améliorés : Bénéficiez d'une saisie semi-automatique et d'une refactorisation améliorées dans votre IDE.
• Lisibilité améliorée du code : Les types servent de documentation intégrée.
• Évolutivité : Gérez plus efficacement des projets plus importants.

Types TypeScript fondamentaux

Explorons les principaux types de TypeScript :

1. Nombre : Représente des valeurs numériques :

   <code class="language-typescript">let age: number = 25;
   let pi: number = 3.14;</code>

2. Chaîne : Pour le texte :

   <code class="language-typescript">let name: string = "Alice";
   let message: string = `Hello, ${name}`;</code>

3. Booléen : Valeurs vraies/fausses :

   <code class="language-typescript">let isActive: boolean = true;</code>

4. Tableau : Une collection d'éléments :

   <code class="language-typescript">let numbers: number[] = [1, 2, 3];
   let names: string[] = ["Alice", "Bob"];</code>

   Ou en utilisant des génériques :

   <code class="language-typescript">let values: Array<number> = [10, 20, 30];</code>

5. Tuple : Un tableau avec une longueur et des types fixes :

   <code class="language-typescript">let tuple: [string, number] = ["Alice", 25];</code>

6. Enum : Définit les constantes nommées :

   <code class="language-typescript">enum Direction {
     Up,
     Down,
     Left,
     Right
   }
   let move: Direction = Direction.Up;</code>

7. Tout : Un type de caractère générique (à utiliser avec parcimonie !) :

   <code class="language-typescript">let random: any = 42;
   random = "Hello";</code>

8. Void : Pour les fonctions sans valeur de retour :

   <code class="language-typescript">function logMessage(message: string): void {
     console.log(message);
   }</code>

9. Nul et non défini : Représente explicitement nul ou non défini :

   <code class="language-typescript">let empty: null = null;
   let notAssigned: undefined = undefined;</code>

10. Jamais : Un type qui n'apparaît jamais (par exemple, une fonction qui renvoie toujours une erreur) :

    <code class="language-typescript"> function alwaysThrows(): never {
       throw new Error("This always throws!");
     }</code>

Types TypeScript avancés

TypeScript propose des types plus avancés pour les scénarios complexes :

• Types d'union: Autoriser une variable à contenir plusieurs types: let id: number | string;
• Types d'intersection: combiner plusieurs types: type Staff = Person & Employee;
• Type Aliases: Créer des noms de type personnalisés: type Point = { x: number; y: number; };
• Interfaces: Définir les formes d'objet: interface User { id: number; name: string; }
• Types littéraux: restreindre une variable à des valeurs spécifiques: let direction: "up" | "down";
• Affaires de type: Spécifiez explicitement un type: let input = <HTMLInputElement>document.getElementById("input");

Conseils pratiques pour les débutants

• Commencez par ajouter TypeScript à un projet JavaScript existant en utilisant tsc --init.
• Utilisez l'option de compilateur strict pour les meilleures pratiques.
• introduire progressivement les types à votre base de code.
• Utilisez un bon IDE comme le code VS pour la prise en charge de TypeScript.
• Évitez de surutiliser any.

Conclusion

Le système de type TypeScript améliore considérablement la qualité et la maintenabilité du code. En maîtrisant les types, vous rédigerez des applications plus robustes et évolutives. Embrassez le pouvoir de la frappe statique et améliorez votre flux de travail de développement!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!