Chaîne TypeScript en nombre : 5 méthodes pour une conversion facile

JavaScript était destiné à écrire de courts extraits de code de quelques lignes seulement qui devaient être intégrés dans des pages Web. Personne ne pouvait prévoir que JavaScript deviendrait aussi populaire qu’aujourd’hui ou qu’il serait utilisé pour écrire des applications comportant des milliers de lignes de code.

Même si JavaScript s’est développé et est désormais largement utilisé dans la création d’applications, ce n’est pas un langage parfait. Ses modestes débuts et son utilisation initiale prévue signifient que JavaScript présente certaines bizarreries qui peuvent faire de la création d'applications à grande échelle un cauchemar.

Par exemple, JavaScript ne générera pas d'erreur lorsque vous référencez des éléments qui n'existent pas dans un objet ou lorsque vous multipliez null par une valeur numérique.

Pour JavaScript, une chaîne vide ("") est égale à 0 (zéro) lorsque les deux sont comparées à l'aide d'un opérateur d'égalité (==). Pire encore, JavaScript ne vous montrera pas de telles erreurs dans votre code en développement. Vous ne verrez les erreurs qu'une fois que vous aurez exécuté votre programme.

Manuscrit, construit sur JavaScript, a donc été développé pour atténuer les défis qui surviennent lors de la création d'applications avec JavaScript. Pour y parvenir, TypeScript effectue une vérification de type statique lorsque vous écrivez votre code.

La vérification statique signifie détecter les erreurs dans votre code sans que vous ayez à exécuter votre code. La vérification de type statique vérifie ainsi les erreurs pendant le développement en fonction du type de valeurs utilisées dans le code.

TypeScript est un sur-ensemble typé de JavaScript. Être un sur-ensemble de JavaScript signifie que tout code JavaScript valide est également TypeScript valide. Être tapé signifie que TypeScript ajoute des règles sur la façon dont différents types de données peuvent être utilisés. TypeScript est également fortement typé et vous ne pouvez pas contourner les restrictions imposées par le système de types.

TypeScript est une étape importante et un développement important dans le développement Web. TypeScript vous permet d'écrire du code plus lisible et facile à maintenir. Il applique également de bonnes pratiques de codage et aide les développeurs à détecter et à éviter les erreurs lors de l’écriture du code.

TypeScript est plus fiable et plus facile à refactoriser, ce qui le rend idéal pour créer des applications à grande échelle par rapport à JavaScript. TypeScript étant fortement typé, examinons la conversion de type, son importance et la manière dont TypeScript gère les conversions de type.

Conversion de type dans TypeScript et son importance

La conversion de type est le processus de conversion d'une valeur d'un type de données à un autre, par exemple la conversion d'une valeur de chaîne en nombre. La conversion de type peut être effectuée implicitement, le compilateur convertissant automatiquement les types de données compatibles en cas de complications.

La conversion de type peut également être explicite, lorsqu'elle est explicitement requise dans le code source. C'est ce qu'on appelle souvent le transtypage.

La conversion de type est importante car elle permet aux développeurs de travailler avec différents formats de données tout en restant conformes aux types de données attendus dans TypeScript. Cela permet également de garantir des résultats prévisibles à partir des codes sources.

En tant que développeur, convertir vous-même les types vous permet de garantir que votre code répond toujours aux exigences de types de TypeScript. Cela rend votre code plus lisible et compréhensible et aide à éviter les erreurs liées au type.

Les conversions de types aident également à prendre en charge les validations de données et aident TypeScript à vous aider dans le développement en fournissant tous les outils intégrés, tels que la saisie semi-automatique, associés à des types spécifiques.

Un cas d’utilisation courant pour la conversion de type concerne les chaînes et les nombres. Lors de la conversion de chaînes en nombres dans TypeScript, pour éviter les erreurs dans votre code, convertit uniquement les chaînes numériques en nombres. Autrement dit, vous pouvez convertir des chaînes telles que « 1 », « 235 », « 5234.5 », etc. Cependant, ne convertissez pas les chaînes telles que « bonjour » en nombre.

Examinons les différentes manières de convertir des chaînes en nombres dans TypeScript :

Type Assertion using ‘as’

Lorsque vous travaillez avec différents types de données dans votre code TypeScript, vous aurez parfois plus d'informations sur le type d'une valeur que TypeScript ne peut pas connaître. Dans de tels cas, vous indiquez à TypeScript quel sera le type d'une variable et ne laissez pas le compilateur déduire le type. C'est ce qu'on appelle l'assertion de type.

L'assertion de type est effectuée à l'aide de as mot-clé. Pour utiliser l'assertion de type pour convertir une chaîne en nombre, définissez d'abord le type de la chaîne sur inconnu. En effet, par défaut, TypeScript considère toute conversion de type un magnifique à nombre être potentiellement une erreur. En effet, ni la chaîne ni le nombre ne se chevauchent suffisamment. Pour convertir une chaîne en nombre en utilisant comme suit :

/**
 * set the type of numString to be unkown, otherwise,
 * Typescript will infer numString to be a string value
 */
let numString: unknown = "23452";

// Type conversion using as - numString is converted to a number
// and assigned to the variable score
let score = numString as number;
console.log(score);
console.log(score * 35);

Sortie :

23452
820820

À partir de la sortie, notez que la variable numString a été converti en nombre et attribué à un score. On peut alors faire des calculs numériques comme la multiplication avec score car sa valeur est un nombre

Type Assertion Using <>

L'assertion de type utilisant <> peut également être utilisée pour convertir une chaîne en nombre. Cela fonctionne exactement comme si vous utilisiez le as mot-clé. La seule différence dans l'implémentation est la syntaxe, présentée ci-dessous :

let numString: unknown = "23452";
// Type assertion using <> to convert a string to a number
let score = <number>numString;

console.log(score);
console.log(score * 35);

Sortie :

23452
820820

Le résultat est le même que si vous utilisiez le as mot-clé. Encore une fois, n'oubliez pas de ne pas utiliser d'assertion de type pour convertir des chaînes qui ne contiennent pas de valeurs numériques.

Using the Number Constructor

Pour convertir une chaîne en nombre à l'aide du constructeur Number, passez la chaîne que vous souhaitez convertir en constructeur Number, comme indiqué dans l'extrait de code ci-dessous :

let numString = "23452"; // type inferred to string
let lives: string = "20"; // type annotated to string

// pass in string to Number constructor to convert to number
let score = Number(numString)
console.log(score / 17)

// pass in string to Number constructor to convert to number
let remainingLives = Number(lives);
console.log(remainingLives - 4)

Sortie :

1379.5294117647059
16

Lorsque vous utilisez le constructeur Number, vous n'avez pas besoin de définir le type de chaîne sur inconnu. Il fonctionne avec des valeurs de chaîne qui ont été annotées ou déduites d'une chaîne. Pensez cependant à passer des chaînes numériques telles que « 514 ». Si vous transmettez une chaîne qui ne peut pas être convertie en nombre, NaN (Pas un numéro) sera renvoyé.

Using the Unary plus (+) operator

L'opérateur unaire plus (+), qui précède son opérande unique, est évalué à l'opérande qu'il précède. Par exemple, +2 donne le nombre 2, +542 donne le nombre 542, et ainsi de suite. Cependant, 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é au nombre 0. Par conséquent, nous pouvons utiliser l’opérateur unaire plus (+) pour convertir des chaînes en nombres. Si vous transmettez une chaîne qui ne peut pas être convertie en nombre, NaN est renvoyé comme indiqué ci-dessous :

let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"

// Using the Unary plus (+) to convert strings to numbers
let num1 = +numString1;
let num2 = +numString2;
let notNumber = +word;

console.log(`${num1} is a ${typeof num1}`);
console.log(`${num2} is a ${typeof num2}`);
console.log(notNumber);

Sortie :

23452 is a number
973.82 is a number
NaN

L'utilisation de l'opérateur unaire plus (+) est un bon moyen de convertir des chaînes en nombres car il est rapide et n'effectue aucune opération supplémentaire sur ses opérandes.

Using parseInt() and parseFloat()

Tout 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 étant de type numéro. Cela dit, les comportements de parseInt() et parseFloat() diffèrent légèrement.

parseInt() prend un argument de chaîne, l'analyse et renvoie un équivalent entier selon la base spécifiée. parseFloat() récupère une chaîne et l'analyse en renvoyant un nombre à virgule flottante.

Par exemple, si vous transmettez « 897 » à la fois à parseInt() et parseFloat(), vous récupérerez le nombre 897. Cependant, si vous transmettez 897.75 à la fois à parseInt() et parseFloat(), parseInt() le fera. renvoie 897 tandis que parsefloat() renverra 897.75.

Par conséquent, lors de la conversion de chaînes numériques qui n'ont pas de décimale, utilisez parseInt(). Cependant, si la chaîne numérique a des décimales, utilisez parseFloat() comme indiqué dans le code ci-dessous :

let numString1 = "897.75";
let numString2 = "724";
let word = "hello";

console.log("Parsing numerical strings with decimal numbers")
console.log(`Using parseInt -> ${parseInt(numString1)}`);
console.log(`Using parseFloat -> ${parseFloat(numString1)}`);

console.log("Parsing numerical strings with whole numbers")
console.log(`Using parseInt -> ${parseInt(numString2)}`);
console.log(`Using parseFloat -> ${parseFloat(numString2)}`);

console.log("Parsing strings that can't convert to number")
console.log(parseInt(word));
console.log(parseFloat(word));

Sortie :

Parsing numerical strings with decimal numbers
Using parseInt -> 897
Using parseFloat -> 897.75
Parsing numerical strings with whole numbers
Using parseInt -> 724
Using parseFloat -> 724
Parsing strings that can't convert to number
NaN
NaN

Conclusion

Lorsque vous travaillez avec des valeurs de chaîne, telles que le résultat d'appels d'API, vous souhaiterez peut-être les convertir en nombres afin de pouvoir effectuer des calculs numériques dessus. Lorsqu'un tel besoin s'en fait sentir, envisagez les méthodes mises en évidence dans l'article pour convertir des chaînes en nombres.

Cependant, chaque fois que vous convertissez des chaînes en nombres, soyez prudent car vous pourriez obtenir NaN lorsque vous essayez de convertir une chaîne en nombre.

Pour éviter une telle erreur, assurez-vous que toutes les chaînes que vous souhaitez convertir en nombre sont des chaînes numériques. Vous pouvez également utiliser une instruction if pour vérifier NaN afin d'éviter les erreurs dans votre code.

Vous pouvez également explorer le haut Bibliothèques TypeScript et le runtime à connaître en tant que développeur.