Vérification de type statique en JavaScript à l'aide de TypeScript

JavaScript est un langage de programmation populaire connu pour sa flexibilité et sa nature dynamique. Cependant, cette flexibilité peut parfois conduire à des bugs inattendus et à des bugs dans les applications volumineuses. Pour résoudre ce problème, TypeScript a été introduit en tant que sur-ensemble de JavaScript pour fournir des fonctionnalités de vérification de type statique. Dans cet article, nous explorerons les bases de la vérification de type statique en JavaScript à l'aide de TypeScript, ainsi que des exemples de code et des instructions pour vous aider à démarrer.

Qu'est-ce que la vérification de type statique ?

La vérification de type statique est le processus d'association de types à des variables, des paramètres de fonction et des valeurs de retour de fonction au moment de la compilation plutôt qu'au moment de l'exécution. Cela permet au compilateur de détecter les erreurs de type avant d'exécuter le code, réduisant ainsi le risque d'erreurs d'exécution et améliorant la qualité du code.

TypeScript : apporter la saisie statique à JavaScript

TypeScript étend la syntaxe JavaScript pour prendre en charge le typage statique. Il introduit une nouvelle syntaxe et de nouvelles constructions qui permettent aux développeurs de définir explicitement des types. En utilisant TypeScript, vous pouvez détecter les erreurs de type pendant le développement, bénéficier d'une meilleure prise en charge de l'éditeur de code et améliorer la maintenabilité globale du code.

Installer TypeScript

Pour commencer à utiliser TypeScript, vous devez avoir Node.js et npm (node ​​​​package manager) installés sur votre système.

Vous pouvez installer TypeScript globalement à l'aide de la commande suivante -

npm install -g typescript

Après avoir installé TypeScript, vous pouvez utiliser la commande tsc pour compiler le code TypeScript en JavaScript.

Déclarez les variables à l'aide de types

Dans TypeScript, vous pouvez déclarer explicitement le type d'une variable en utilisant la syntaxe :type.

Exemple

Considérons un exemple où nous voulons déclarer un message variable de type chaîne -

let message: string = "Hello, TypeScript!";
console.log(message);

Instructions

Dans cet extrait de code, nous déclarons la variable message sous forme de chaîne en utilisant la syntaxe :string. Le compilateur imposera que seules les valeurs de chaîne puissent être attribuées à la variable.

Sortie

La sortie de ce code est -

Hello, TypeScript!

Déclaration de fonction avec type

TypeScript vous permet de définir les types de paramètres de fonction et les valeurs de retour.

Exemple

Voyons un exemple de fonction simple qui ajoute deux nombres -

function addNumbers(num1: number, num2: number): number {
   return num1 + num2;
}

let result: number = addNumbers(10, 5);
console.log(result);

Instructions

Dans ce code, la fonction addNumbers accepte deux paramètres de type numérique et renvoie une valeur de type numérique. Les variables num1, num2 et result sont explicitement saisies sous forme de nombres.

Sortie

La sortie de ce code est -

15

Inférence de type

TypeScript dispose d'un puissant mécanisme d'inférence de type qui peut déduire automatiquement le type de variables en fonction de leur affectation.

Exemple

let age = 25;
console.log(typeof age);

let name = "John";
console.log(typeof name);

Dans ce code, nous ne déclarons pas explicitement les types d'âge et de nom. Cependant, TypeScript déduit leur type en fonction de la valeur attribuée.

Interface et annotations de type

TypeScript fournit une interface pour définir des types personnalisés. Une interface définit la structure d'un objet, y compris les noms et les types de ses propriétés. Considérons un exemple de définition d'une interface pour un objet utilisateur.

Exemple

interface User {
   id: number;
   name: string;
   email: string;
}

let user: User = {
   id: 1,
   name: "John Doe",
   email: "john@example.com",
};

console.log(user);

Instructions

Dans ce code, nous définissons une interface appelée Utilisateur, qui possède trois propriétés : identifiant, nom et email. Ensuite, nous déclarons une variable user de type User et attribuons un objet qui suit la structure de l'interface.

Sortie

La sortie de ce code est -

{ id: 1, name: 'John Doe', email: 'john@example.com' }

Type de syndicat

Considérez le code ci-dessous.

function displayResult(result: string | number): void {
  console.log("Result:", result);
}

displayResult("Success"); 
displayResult(200); 

Instructions

Dans cet exemple, l'argument pris par la fonction displayResult peut être une chaîne ou un nombre. Ceci est réalisé en utilisant des types d'union (String | Number) dans la signature de la fonction.

Entrez l'alias

type Point = {
   x: number;
   y: number;
};

function calculateDistance(point1: Point, point2: Point): number {
   const dx = point2.x - point1.x;
   const dy = point2.y - point1.y;
   return Math.sqrt(dx * dx + dy * dy);
}  

const p1: Point = { x: 0, y: 0 };
const p2: Point = { x: 3, y: 4 };

console.log(calculateDistance(p1, p2));

Instructions

Dans cet exemple, nous définissons le type alias Point pour un objet avec les propriétés x et y. La fonction calculateDistance prend deux objets Point comme paramètres et utilise le théorème de Pythagore pour calculer la distance entre eux.

Sortie

5

Conclusion

L'utilisation de TypeScript pour la vérification de type statique apporte de nombreux avantages au développement JavaScript, notamment la détection précoce des erreurs de type, une prise en charge améliorée de l'éditeur de code et une maintenabilité améliorée du code. En adoptant TypeScript, les développeurs peuvent écrire du code plus sûr et plus fiable tout en bénéficiant de la flexibilité et de la nature dynamique de JavaScript.

Dans cet article, nous avons exploré les bases de la vérification de type statique en JavaScript à l'aide de TypeScript, y compris les déclarations de variables, les déclarations de fonctions, l'inférence de type, les interfaces, les types d'union et les alias de type. Fort de ces connaissances, vous pouvez désormais commencer à créer des applications JavaScript robustes et évolutives à l'aide de TypeScript.

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!