Cómo convertir una cadena a número en TypeScript: principales errores y cómo evitarlos

Introducción: Por qué una tarea simple rompe el código

Cada desarrollador que trabaja con TypeScript, tarde o temprano se enfrenta a la tarea: «¿Cómo convertir una cadena a número?». Parecería, ¿qué podría ser más simple? Pero precisamente esta operación, aparentemente trivial, se convierte en la fuente de decenas de bugs, especialmente en la interfaz entre frontend y backend, donde los datos provienen de formularios de entrada, API o análisis de CSV.

En Stack Overflow, la pregunta «How to convert a string to number in TypeScript?» ha acumulado decenas de miles de visitas. Y no es casualidad. Los desarrolladores se ahogan en los matices: NaN, parseInt contra Number(), pérdida de precisión y comportamiento inesperado con cadenas vacías. En este artículo analizaremos los principales errores al convertir una cadena a número en TypeScript y mostraremos cómo evitarlos. Aprenderá qué método elegir para una tarea específica y cómo escribir código verdaderamente robusto.

Formas principales de convertir una cadena a número en TypeScript

Antes de hablar de errores, recordemos las herramientas que tiene en su arsenal un desarrollador de TypeScript. Cada una se comporta de manera diferente, y elegir el método incorrecto es el primer y principal error.

1. Función Number()

La forma más obvia. Number(value) intenta convertir el valor pasado a un número. Si no es posible, devuelve 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. Operador unario más (+)

Sintaxis corta que hace lo mismo que Number(). Es conciso, pero puede confundir a los principiantes.

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 — ¡atención, esto es una trampa común!

3. parseInt() y parseFloat()

Funciones especializadas para analizar números enteros y decimales. «Toman» la parte numérica de la cadena, ignorando los caracteres siguientes.

const userInput: string = "123px";\nconst width: number = parseInt(userInput, 10);\nconsole.log(width); // 123 — los caracteres 'px' se descartan\n\nconst height: string = "45.67em";\nconst parsedHeight: number = parseFloat(height);\nconsole.log(parsedHeight); // 45.67

4. Operadores bit a bit (~~, | 0)

Una forma exótica que proviene de JavaScript. Solo funciona para números enteros y descarta la parte decimal.

const str: string = "7.8";\nconst result: number = ~~str;\nconsole.log(result); // 7 — la parte decimal se pierde

Top 5 errores al convertir una cadena a número en TypeScript

Ahora que hemos analizado las herramientas, veamos dónde los desarrolladores suelen tropezar más a menudo. Estos errores son verdaderos «rastrillos» en los que incluso los programadores experimentados pisan.

Error n.º 1: Ignorar NaN

El error más común es no verificar el resultado contra NaN. TypeScript no generará un error si usa NaN en operaciones aritméticas o comparaciones, pero el resultado será inesperado.

const input: string = "not a number";\nconst value: number = Number(input);\n\n// Error: NaN participa en cálculos\nconst total = value + 10;\nconsole.log(total); // NaN\n\n// La comparación con NaN siempre es falsa\nif (value === NaN) {\n  console.log("Esto nunca funcionará");\n}

Cómo evitarlo: Siempre use isNaN() o Number.isNaN() para verificar. La segunda opción es preferible, ya que no convierte tipos no numéricos.

if (Number.isNaN(value)) {\n  console.error("No se ingresó un número");\n  // Puede devolver un valor predeterminado o mostrar un error