Fondamentaux de TypeScript : guide du débutant (✅

TypeScript a suscité des débats sans fin parmi les développeurs. Certains y voient un obstacle bureaucratique à la liberté de JavaScript, tandis que d’autres le saluent comme un phare dans les tranchées du code mal typé. Aimez-le ou détestez-le, TypeScript est là pour rester — et une fois que vous le connaîtrez, vous découvrirez peut-être que ce n'est pas un fardeau mais une bénédiction pour vos projets.

Dans cette série, nous explorerons TypeScript et couvrirons les bases, ainsi que quelques astuces et conseils de dépannage.

1. Introduction

Qu’est-ce que TypeScript ?

TypeScript est un sur-ensemble de JavaScript typé statiquement qui se compile en JavaScript brut. En termes plus simples, il s'agit de JavaScript avec des fonctionnalités supplémentaires qui vous aident à détecter les erreurs plus tôt et à écrire un code meilleur et plus maintenable.

Considérez TypeScript comme un assistant convivial qui revérifie votre travail avant de le soumettre. Il vous permet de :

• Repérez les erreurs pendant que vous codez, pas après le déploiement.
• Écrivez du code plus facile à lire et à comprendre.
• Faites évoluer vos projets sans perdre de vue la façon dont les choses se connectent.

Pourquoi utiliser TypeScript ?

Soyons pratiques. Pourquoi devriez-vous vous soucier de TypeScript alors que JavaScript fonctionne déjà ?

Avantages réels :

1. Détectez les erreurs tôt : évitez les pièges courants, comme transmettre le mauvais type de données à une fonction.

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. Autocomplétion et documentation : les éditeurs modernes (comme VS Code) fournissent de riches suggestions et documentation de saisie semi-automatique au fur et à mesure que vous tapez.

2. Évolutivité du code : les fonctionnalités de TypeScript brillent dans les projets plus importants où le maintien de la cohérence est essentiel.

3. Collaboration d'équipe améliorée : les types clairs permettent aux membres de l'équipe de comprendre plus facilement votre code en un coup d'œil.

J'ai trouvé TypeScript particulièrement utile pour planifier des applications plus volumineuses ; comprendre quels types de données je vais traiter et quelles données mes fonctions prennent/renvoie.

Conditions préalables

Avant de vous lancer, assurez-vous d'avoir des connaissances de base en JavaScript. Vous devriez connaître :

• Variables et types de données (par exemple, let, const, string, number)
• Fonctions
• Tableaux et objets

Si vous n'êtes pas encore sûr de vous, prenez le temps de revoir les bases de JavaScript.

---

2. Configuration de votre environnement

Installation de TypeScript

TypeScript est un outil qui nécessite une installation pour démarrer. En quelques étapes seulement, vous pouvez préparer votre environnement pour commencer à coder en TypeScript. Voici comment procéder :

Pour commencer à utiliser TypeScript, vous devez installer Node.js. Une fois que vous avez ça :

1. Installez TypeScript globalement :

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. Vérifiez l'installation :

   npm install -g typescript

Configuration du code VS

VS Code est l'un des éditeurs les plus populaires pour le développement TypeScript. Il fournit une gamme de fonctionnalités et d'extensions qui rendent le codage plus facile et plus efficace. Installons-le :

VS Code est l'éditeur incontournable pour les développeurs TypeScript. Voici comment le configurer :

1. Installer VS Code : télécharger ici
2. Ajoutez ces extensions utiles :
   • ESLint : pour pelucher votre code TypeScript.
   • Plus joli : pour un formatage de code cohérent.
   • TypeScript Hero : Pour une productivité améliorée.

Créer votre premier projet TypeScript

La mise en pratique est la meilleure façon d'apprendre TypeScript. Cette section vous guide tout au long de la configuration de votre premier projet, de la création de fichiers à l'exécution de votre code.

1. Créez un nouveau dossier pour votre projet et accédez-y :

   tsc --version

1. Initialiser un nouveau projet :

   mkdir typescript-starter
   cd typescript-starter

1. Ajouter du TypeScript :

   npm init -y

1. Créez un fichier tsconfig.json :

   npm install --save-dev typescript

1. Écrivez votre premier fichier TypeScript :

   npx tsc --init

1. Compilez et exécutez :

   echo "console.log('Hello, TypeScript!');" > index.ts

Vous venez d'écrire et de compiler votre premier programme TypeScript !

---

3. Présentation des types de base

La puissance de TypeScript réside dans son système de types. Explorons quelques types de base :

Types primitifs

Les types primitifs sont les éléments constitutifs du système de types de TypeScript. Ils incluent des types de données de base tels que des chaînes, des nombres et des booléens. Voici un aperçu rapide de comment les utiliser :

1. chaîne :

   npx tsc index.ts
   node index.js

1. numéro :

   let name: string = "Alice";

1. booléen :

   let age: number = 25;

Types avancés

En plus des primitives, TypeScript prend en charge des types plus complexes tels que des tableaux, des tuples et des types spéciaux comme tous et inconnus. Ces types rendent votre code flexible tout en préservant la sécurité.

1. Tableaux :

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. Tuples :

   npm install -g typescript

1. n'importe lequel (à utiliser avec parcimonie) :

   tsc --version

1. inconnu (plus sûr que n'importe quel) :

   mkdir typescript-starter
   cd typescript-starter

1. void (fonctions qui ne renvoient rien) :

   npm init -y

1. null et non défini :

   npm install --save-dev typescript

---

4. Premiers pas avec les annotations de type

Les annotations de type dans TypeScript permettent aux développeurs de spécifier le type d'une variable, d'un paramètre ou d'une valeur de retour de fonction. Cela garantit que le code adhère à une structure définie, ce qui facilite la détection des erreurs pendant le développement et maintient la cohérence tout au long du projet.

Pendant que vous écrivez votre code comme vous le faites habituellement, prenez note des fonctionnalités ci-dessous que vous pouvez intégrer

Saisie de variables de base

Définissez les types de vos variables afin qu'elles soient toujours définies correctement et que le reste de l'application comprenne ce qu'elles sont.

   npx tsc --init

Saisie des paramètres de fonction

De même, pour les fonctions, vous pouvez définir les types des arguments, ainsi que le type du retour.

   echo "console.log('Hello, TypeScript!');" > index.ts

Annotations sur les types de retour

   npx tsc index.ts
   node index.js

Exemple pratique : profil utilisateur

TypeScript vous permet de déclarer vos propres types pour mieux structurer et appliquer des règles dans votre code. En utilisant le type ou l'interface, vous pouvez définir des types personnalisés pour les objets, les fonctions ou même les unions. Cela rend non seulement votre code plus robuste, mais améliore également la lisibilité et la cohérence dans les projets plus importants.

   let name: string = "Alice";

---

5. Démarrage rapide avec les interfaces

Syntaxe de base

Les interfaces dans TypeScript définissent la structure des objets, garantissant qu'ils ont des propriétés et des types spécifiques. Cette section vous montre comment les créer et les utiliser :

   let age: number = 25;

Propriétés facultatives

Parfois, toutes les propriétés d'un objet ne sont pas obligatoires. TypeScript vous permet de définir des propriétés facultatives dans les interfaces pour gérer de tels cas avec élégance.

   let isStudent: boolean = true;

Propriétés en lecture seule

Les propriétés en lecture seule sont utiles lorsque vous souhaitez vous assurer que certaines valeurs ne peuvent pas être modifiées une fois définies. Voici comment les utiliser dans les interfaces :

   let scores: number[] = [90, 85, 88];

Exemple concret : réponse de l'API

L'utilisation d'interfaces pour saisir les réponses API vous garantit de gérer les données des serveurs de manière sûre et efficace. Voici un exemple pratique :

   let user: [string, number] = ["Alice", 25];

---

6. Projet pratique : créer une liste de tâches simple

La pratique est la clé pour maîtriser TypeScript. Dans ce projet, vous créerez une application simple de liste de tâches qui exploite les fonctionnalités que vous avez apprises jusqu'à présent :

1. Créez un type Todo :

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. Créez un tableau simple de tâches :

   npm install -g typescript

1. Ajoutez quelques fonctions pour ajouter des tâches et marquer les tâches comme terminées :

   tsc --version

---

7. Prochaines étapes

C'est tout pour l'instant, j'espère que vous avez apprécié ce tutoriel. Je travaillerai sur des didacticiels supplémentaires pour approfondir les fonctionnalités et les cas d'utilisation utiles de TypeScript.

• À venir : plongée approfondie dans les fonctions TypeScript et les types avancés.
• Ressources :
  • Documentation TypeScript
  • CodeSandbox pour pratiquer TypeScript en ligne.
• Défi : Créez une interface TypeScript pour un article de blog et utilisez-la pour vérifier une liste d'articles de blog.

À la prochaine fois !

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!