Ajout au script avec TypeScript

Crédit image de couverture : Daria Kraplak

Table des matières

Présentation
Objectif de TypeScript
Comparaison de JavaScript et TypeScript
Conclusion

Introduction

Avant de plonger dans ce qu’est TypeScript, parlons d’abord de JavaScript ! Saviez-vous que JavaScript a été inventé en 1995 ? Moi non plus.

Pendant cette période, il répondait au besoin de traiter des pages Web simples dans les navigateurs des utilisateurs. Depuis 1999, JavaScript a été amélioré et peut gérer les pages Web amusantes et dynamiques que nous construisons aujourd'hui. De plus, c'est un langage de programmation assez simple à utiliser car il est flexible avec (léger spoiler ici) les types de données.

Cependant, il y avait un problème qui n’était pas résolu. Ironiquement, la raison pour laquelle JavaScript est facile à utiliser est la même raison pour laquelle il peut casser notre code. C'est ici que TypeScript peut nous aider !

Objectif de TypeScript

TypeScript est un surensemble de JavaScript. Qu'est-ce que cela signifie? Eh bien, pour certains, TypeScript n'est pas un langage de programmation car il est utilisé pour faciliter le code JavaScript préexistant. Quoi qu'il en soit, TypeScript nous aide, les utilisateurs de JavaScript, en renforçant la structure de notre code. Cela se fait en garantissant la cohérence des types de données pour chaque variable dont nous disposons. Ceci est bénéfique lorsqu'il s'agit de tests car cela met en évidence les bugs potentiels lors du développement et nous avertit avant que le code ne soit compilé en JavaScript.

Comparaison de JavaScript et TypeScript

Ils partagent ces types de données

• chaîne
• numéro
• booléen
• indéfini
• nul

Cependant, leur mise en œuvre nécessite une approche différente. Laissez-moi vous montrer comment !

Inférences

Lors de la définition d'une variable en JavaScript, son type de données peut changer ultérieurement si nous le souhaitons. C'est une autre histoire pour TypeScript, car le type de données d'une variable est soit déduit par TypeScript, soit explicitement indiqué par nous. Le type de données d’une variable peut devenir n’importe lequel s’il ne peut pas être déduit ou s’il n’est pas explicitement indiqué !

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25; 

Annotations de type

Dans la continuité de la sous-section ci-dessus, une autre façon de déclarer explicitement le type de données d'une variable dans TypeScript consiste à utiliser l'annotation de type. Cela signifie ajouter deux points et taper (: ) après avoir donné son nom à une variable.

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25; 

Formes

Que signifie « formes » en TypeScript ? Par exemple, lorsqu’il s’agit de chaînes, leurs méthodes ont leurs propres propriétés. Ces « propriétés » constituent la « forme » ou la structure de la variable. Pour accéder aux propriétés d’une variable, nous devons d’abord nous assurer que la méthode que nous utilisons fournit les informations nécessaires. JavaScript n'est pas strict à ce sujet et permet aux variables de changer de forme lors de l'exécution. Cependant, nous devons être prudents avec TypeScript car il recherche les propriétés exactes d'une variable. C'est comme insérer des blocs dans les contours qui correspondent à leurs formes.

// JavaScript 
// No need to state the data type here, just assign the variable a value. 
let color = ‘purple’;
// Since JavaScript is flexible, it is fine with this reassignment. 
color = ‘blue’;
// This is also the case even if the value changes to 10. 

// TypeScript 
// 'color' is declared and expected to have a string value.  
let color: string;
// Similar to the line above, except we assign a value as well.  
let color: string = 'red';
color = ‘purple’;  // 'purple' is a string value, so this is valid.  
color = ‘blue’;  // 'blue' is a string value, so this is valid.  

Il y en a bien plus que cela !

Conclusion

Ce furent mes premières impressions de TypeScript jusqu'à présent. On peut dire sans se tromper que je suis fasciné par la façon dont il peut élever ce que JavaScript peut déjà faire pour nous. J'ai hâte d'en savoir plus et de l'implémenter dans mes projets JavaScript !

J'espère que cela a piqué votre intérêt pour l'ajout de TypeScript à votre bac à sable/boîte à outils aux côtés de JavaScript. Qui ne voudrait pas que son code soit mieux structuré ?

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!