Initialement, JavaScript était conçu pour des fragments de code courts, destinés à être intégrés aux pages web. Nul n’aurait pu imaginer son essor fulgurant, ni son utilisation dans des applications massives, composées de milliers de lignes.
Bien que JavaScript ait évolué et soit aujourd’hui omniprésent dans la création d’applications, il est loin d’être parfait. Ses origines modestes et son objectif initial font qu’il présente des particularités qui peuvent transformer le développement d’applications de grande envergure en véritable défi.
Par exemple, JavaScript ne signalera pas d’erreur si vous tentez d’accéder à un élément inexistant dans un objet ou si vous multipliez la valeur « null » par un nombre.
De plus, pour JavaScript, une chaîne vide ( » « ) est considérée comme égale à 0 (zéro) lors d’une comparaison à l’aide de l’opérateur d’égalité (==). Pire encore, de telles erreurs ne sont pas détectées lors du développement. Vous ne les verrez qu’une fois votre programme en cours d’exécution.
TypeScript, basé sur JavaScript, a été créé afin de pallier ces problèmes rencontrés lors de la création d’applications. Pour ce faire, TypeScript effectue une vérification statique des types lors de la rédaction du code.
La vérification statique permet de détecter les erreurs de code sans avoir à l’exécuter. La vérification statique des types contrôle les erreurs durant la phase de développement en se basant sur le type des valeurs utilisées.
TypeScript est un sur-ensemble typé de JavaScript. Être un sur-ensemble implique que tout code JavaScript valide est également un code TypeScript valide. Être typé signifie que TypeScript impose des règles quant à l’utilisation des différents types de données. TypeScript est également fortement typé, ce qui limite la possibilité de contourner les contraintes imposées par le système de typage.
TypeScript constitue une avancée majeure dans le développement web. Il permet de rédiger du code plus lisible, plus facile à maintenir, et il applique de bonnes pratiques de codage. Il aide aussi les développeurs à détecter et éviter les erreurs dès la phase de rédaction.
Grâce à son typage fort, TypeScript se révèle plus fiable et plus facile à refactoriser, ce qui le rend idéal pour la création d’applications de grande envergure, contrairement à JavaScript. Étant donné que TypeScript est fortement typé, examinons la conversion de types, son importance et la façon dont TypeScript la gère.
Conversion de type dans TypeScript et son importance
La conversion de type est le processus par lequel une valeur est transformée d’un type de données à un autre, comme par exemple la conversion d’une chaîne de caractères en nombre. Elle peut être implicite, le compilateur convertissant automatiquement les types de données compatibles en cas de besoin.
La conversion de type peut aussi être explicite, c’est-à-dire requise explicitement dans le code source. On parle alors souvent de transtypage.
La conversion de type est cruciale car elle permet aux développeurs d’utiliser différents formats de données tout en respectant les types de données attendus par TypeScript. Elle contribue également à garantir la prévisibilité des résultats à partir du code.
En tant que développeur, effectuer vous-même les conversions de types vous permet de vous assurer que votre code respecte toujours les exigences de typage de TypeScript. Cela le rend plus lisible et compréhensible, et contribue à éviter les erreurs liées aux types.
Les conversions de types aident également à la validation des données, et fournissent à TypeScript les outils intégrés, tels que la saisie semi-automatique, associés à des types spécifiques.
Un cas courant d’utilisation de la conversion de type concerne les chaînes et les nombres. Lors de la conversion de chaînes en nombres dans TypeScript, il est préférable, pour éviter les erreurs, de ne convertir que les chaînes composées de chiffres. Ainsi, vous pouvez convertir des chaînes comme « 1 », « 235 », « 5234.5 », etc., mais pas des chaînes comme « bonjour ».
Voyons différentes façons de convertir des chaînes en nombres dans TypeScript :
Assertion de type avec ‘as’
Lorsque vous manipulez différents types de données dans votre code TypeScript, il arrive que vous ayez plus d’informations sur le type d’une valeur que TypeScript lui-même. Dans ces cas-là, vous indiquez à TypeScript le type d’une variable, au lieu de le laisser l’inférer. C’est ce que l’on appelle l’assertion de type.
L’assertion de type se fait à l’aide du mot-clé « as ». Pour l’utiliser afin de convertir une chaîne en nombre, il faut d’abord définir le type de la chaîne comme « unknown » (inconnu). En effet, par défaut, TypeScript considère toute conversion de type chaîne à nombre comme potentiellement erronée, car une chaîne et un nombre ne sont pas suffisamment similaires. Pour convertir une chaîne en nombre en utilisant « as », faites comme suit :
/** * Définir le type de numString à inconnu, sinon, * Typescript infèrera que numString est une valeur de chaîne */ let numString: unknown = "23452"; // Conversion de type à l'aide de as - numString est convertie en nombre // et affectée à la variable score let score = numString as number; console.log(score); console.log(score * 35);
Sortie :
23452 820820
Comme le montre le résultat, la variable numString a bien été convertie en nombre et affectée à « score ». Des opérations numériques, comme la multiplication, peuvent donc être effectuées avec la variable « score », car sa valeur est un nombre.
Assertion de type avec <>
L’assertion de type utilisant « <> » permet également de convertir une chaîne en nombre. Le résultat est identique à l’utilisation du mot-clé « as ». La seule différence réside dans la syntaxe, comme présenté ci-dessous :
let numString: unknown = "23452"; // Assertion de type avec < > pour convertir une chaîne en nombre let score = <number>numString; console.log(score); console.log(score * 35);
Sortie :
23452 820820
Le résultat est identique à celui obtenu avec le mot-clé « as ». N’oubliez pas qu’il ne faut pas utiliser l’assertion de type pour convertir des chaînes qui ne contiennent pas de valeurs numériques.
Utilisation du constructeur Number
Pour convertir une chaîne en nombre à l’aide du constructeur « Number », passez la chaîne à convertir à ce constructeur, comme indiqué dans l’extrait de code ci-dessous :
let numString = "23452"; // le type est inféré comme chaîne let lives: string = "20"; // le type est annoté comme chaîne // Passer la chaîne au constructeur Number pour la convertir en nombre let score = Number(numString) console.log(score / 17) // Passer la chaîne au constructeur Number pour la convertir en nombre let remainingLives = Number(lives); console.log(remainingLives - 4)
Sortie :
1379.5294117647059 16
Lorsque vous utilisez le constructeur Number, il n’est pas nécessaire de définir le type de la chaîne comme « unknown ». Il fonctionne avec des valeurs de type chaîne, qu’elles aient été annotées ou inférées comme telles. Pensez toutefois à passer des chaînes numériques, comme « 514 ». Si vous passez une chaîne qui ne peut pas être convertie en nombre, la valeur « NaN » (Not-a-Number) sera retournée.
Utilisation de l’opérateur unaire plus (+)
L’opérateur unaire plus (+), qui précède son opérande unique, est évalué à l’opérande qu’il précède. Ainsi, « +2 » donne le nombre 2, « +542 » donne le nombre 542, et ainsi de suite. Si l’opérande n’est pas un nombre, l’opérateur unaire plus (+) tente de le convertir en nombre.
Par exemple, « +”98” » sera évalué à 98 et « +”0” » sera évalué à 0. Il est donc possible d’utiliser l’opérateur unaire plus (+) pour convertir des chaînes en nombres. Si vous passez une chaîne qui ne peut pas être convertie en nombre, la valeur « NaN » est retournée, comme le montre l’exemple ci-dessous :
let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"
// Utilisation de l'opérateur unaire plus (+) pour convertir des chaînes en nombres
let num1 = +numString1;
let num2 = +numString2;
let notNumber = +word;
console.log(`${num1} est de type ${typeof num1}`);
console.log(`${num2} est de type ${typeof num2}`);
console.log(notNumber);
Sortie :
23452 est de type number 973.82 est de type number NaN
L’utilisation de l’opérateur unaire plus (+) est une bonne manière de convertir des chaînes en nombres, car elle est rapide et n’effectue aucune opération supplémentaire sur ses opérandes.
Utilisation de parseInt() et parseFloat()
Comme en JavaScript, TypeScript ne fait pas de distinction entre les nombres entiers et les nombres décimaux, également appelés nombres à virgule flottante. Tous sont considérés comme de type « number ». Cela étant dit, le comportement de parseInt() et parseFloat() diffère légèrement.
parseInt() prend en argument une chaîne, l’analyse et retourne son équivalent entier, en fonction de la base spécifiée. parseFloat() prend une chaîne et l’analyse pour retourner un nombre à virgule flottante.
Par exemple, si vous passez « 897 » à la fois à parseInt() et parseFloat(), vous récupérez le nombre 897. Cependant, si vous passez « 897.75 » à la fois à parseInt() et parseFloat(), parseInt() renverra 897, tandis que parseFloat() renverra 897.75.
Par conséquent, lors de la conversion de chaînes numériques sans décimale, utilisez parseInt(). Cependant, si la chaîne numérique contient des décimales, utilisez parseFloat(), comme indiqué dans l’exemple de code ci-dessous :
let numString1 = "897.75";
let numString2 = "724";
let word = "hello";
console.log("Analyse de chaînes numériques avec des nombres décimaux")
console.log(`Avec parseInt() -> ${parseInt(numString1)}`);
console.log(`Avec parseFloat() -> ${parseFloat(numString1)}`);
console.log("Analyse de chaînes numériques avec des nombres entiers")
console.log(`Avec parseInt() -> ${parseInt(numString2)}`);
console.log(`Avec parseFloat() -> ${parseFloat(numString2)}`);
console.log("Analyse de chaînes non convertibles en nombre")
console.log(parseInt(word));
console.log(parseFloat(word));
Sortie :
Analyse de chaînes numériques avec des nombres décimaux Avec parseInt() -> 897 Avec parseFloat() -> 897.75 Analyse de chaînes numériques avec des nombres entiers Avec parseInt() -> 724 Avec parseFloat() -> 724 Analyse de chaînes non convertibles en nombre NaN NaN
Conclusion
Lorsque vous manipulez des valeurs de type chaîne, comme les résultats d’appels d’API, il peut être nécessaire de les convertir en nombres afin d’effectuer des calculs numériques. Si tel est le cas, privilégiez les méthodes de conversion de chaînes en nombres décrites dans cet article.
Soyez cependant prudent lors de la conversion de chaînes en nombres, car vous risquez d’obtenir la valeur « NaN » si vous tentez de convertir une chaîne non numérique.
Pour éviter ce type d’erreur, assurez-vous que toutes les chaînes que vous souhaitez convertir en nombre sont bien des chaînes numériques. Vous pouvez également utiliser une instruction « if » pour vérifier la présence de « NaN » et éviter ainsi les erreurs.
Vous pouvez également explorer les principales bibliothèques TypeScript et le runtime à connaître en tant que développeur.