Comment convertir une chaîne en nombre en TypeScript : les erreurs les plus courantes et comment les éviter

Introduction : Pourquoi une tâche simple fait planter le code

Tout développeur travaillant avec TypeScript se retrouve tôt ou tard confronté à la tâche : « Comment convertir une chaîne en nombre ? ». Cela semble simple, n'est-ce pas ? Pourtant, cette opération, en apparence triviale, est à l'origine de dizaines de bugs, notamment à l'interface entre le frontend et le backend, où les données proviennent de formulaires, d'API ou de l'analyse de CSV.

Sur Stack Overflow, la question « How to convert a string to number in TypeScript? » a recueilli des dizaines de milliers de vues. Et ce n'est pas un hasard. Les développeurs se noient dans les nuances : NaN, parseInt contre Number(), perte de précision et comportement inattendu avec les chaînes vides. Dans cet article, nous analyserons les erreurs les plus courantes lors de la conversion d'une chaîne en nombre en TypeScript et montrerons comment les éviter. Vous découvrirez quelle méthode choisir pour une tâche spécifique et comment écrire un code vraiment fiable.

Les principales méthodes de conversion d'une chaîne en nombre en TypeScript

Avant de parler des erreurs, rappelons les outils à la disposition du développeur TypeScript. Chacun se comporte différemment, et choisir la mauvaise méthode est la première et principale erreur.

1. La fonction Number()

La méthode la plus évidente. Number(value) tente de convertir la valeur passée en nombre. Si cela est impossible, elle retourne NaN.

const str: string = "42";\nconst num: number = Number(str);\nconsole.log(num); // 42\n\nconst invalid: string = "hello";\nconst badNum: number = Number(invalid);\nconsole.log(badNum); // NaN

2. L'opérateur unaire plus (+)

Une syntaxe courte qui fait la même chose que Number(). Concise, mais peut dérouter les débutants.

const price: string = "99.99";\nconst numericPrice: number = +price;\nconsole.log(numericPrice); // 99.99\n\nconst empty: string = "";\nconst zero: number = +empty;\nconsole.log(zero); // 0 — attention, c'est un piège fréquent !

3. parseInt() et parseFloat()

Des fonctions spécialisées pour l'analyse des nombres entiers et décimaux. Elles « extraient » la partie numérique de la chaîne, en ignorant les caractères suivants.

const userInput: string = "123px";\nconst width: number = parseInt(userInput, 10);\nconsole.log(width); // 123 — les caractères 'px' sont ignorés\n\nconst height: string = "45.67em";\nconst parsedHeight: number = parseFloat(height);\nconsole.log(parsedHeight); // 45.67

4. Les opérateurs binaires (~~, | 0)

Une méthode exotique venue de JavaScript. Fonctionne uniquement pour les nombres entiers et supprime la partie décimale.

const str: string = "7.8";\nconst result: number = ~~str;\nconsole.log(result); // 7 — la partie décimale est perdue

Top 5 des erreurs lors de la conversion d'une chaîne en nombre en TypeScript

Maintenant que nous avons passé en revue les outils, voyons où les développeurs trébuchent le plus souvent. Ces erreurs sont de véritables « pièges » dans lesquels même les programmeurs expérimentés tombent.

Erreur n°1 : Ignorer NaN

L'erreur la plus courante est de ne pas vérifier le résultat pour NaN. TypeScript ne génère pas d'erreur si vous utilisez NaN dans des opérations arithmétiques ou des comparaisons, mais le résultat sera inattendu.

const input: string = "not a number";\nconst value: number = Number(input);\n\n// Erreur : NaN participe aux calculs\nconst total = value + 10;\nconsole.log(total); // NaN\n\n// La comparaison avec NaN est toujours fausse\nif (value === NaN) {\n  console.log("Cela ne fonctionnera jamais");\n}

Comment l'éviter : Utilisez toujours isNaN() ou Number.isNaN() pour la vérification. La deuxième option est préférable car elle ne convertit pas les types non numériques.

if (Number.isNaN(value)) {\n  console.error("La saisie n'est pas un nombre");\n  // On peut retourner une valeur par défaut ou afficher une erre