Convertir string a number en TypeScript (y number a string)

Para convertir un string a número en TypeScript, llama a Number(text). El resultado tiene tipo number, y vale NaN cuando el texto no es un número válido. Para texto con caracteres al final, como "42px", usa parseInt(text, 10) o parseFloat(text).

const input: string = "42";

const a = Number(input);       // 42
const b = parseInt(input, 10); // 42 (whole numbers)
const c = parseFloat("3.75");  // 3.75
const d = +input;              // 42 (unary plus, same as Number)

console.log(a + 1, b + 1, c + 1, d + 1); // 43 43 4.75 43

// And back: number to string
const text: string = String(a);
console.log(text, text.length); // 42 2

Las cuatro conversiones devuelven el tipo number. TypeScript no sabe si el texto era válido; un string inválido sigue dando un number, cuyo valor es NaN.

Por qué hay que convertir

Los campos de formulario, los parámetros de URL, las variables de entorno y el contenido de los ficheros llegan como strings. TypeScript no te deja usar uno donde se espera un número:

// This does not compile: a string is not a number.
const quantity: string = "3";
const total: number = quantity * 10;
console.log(total);

index.ts(3,23): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

La aritmética con -, * y / sobre un string es un error. + está permitido pero concatena, así que "3" + 10 es el string "310"; por eso la conversión tiene que ir primero: Number(quantity) * 10.

Una aserción de tipo tampoco sirve. quantity as number se rechaza (TS2352), y forzarlo con as unknown as number solo silencia al compilador: el valor sigue siendo un string en tiempo de ejecución.

Number frente a parseInt, parseFloat y el + unario

Las cuatro funciones coinciden con una entrada limpia y discrepan en todo lo demás. Esta tabla es la salida real de cada una en Node:

Las reglas detrás de la tabla:

• Number y el + unario son idénticos. Convierten el string entero tras quitar los espacios, entienden 1e3 y el hexadecimal 0x, y devuelven NaN si sobra algo. Un string vacío o solo con espacios se convierte en 0.
• parseInt y parseFloat leen desde el principio y se detienen en el primer carácter que no pueden usar, así que "42px" y "1,000" dan números parciales. Un string vacío es NaN.
• parseInt descarta la parte decimal y no entiende exponentes: "1e3" se detiene en la e.
• Los separadores numéricos (12_000) son válidos en el código fuente, no en los strings.

Number es la opción más estricta para validar entradas. parseInt y parseFloat sirven para texto que de verdad lleva una unidad o un sufijo, como los tamaños de CSS.

Entradas inválidas: NaN

NaN tiene tipo number, así que el compilador nunca avisa de él. Comprueba tú el resultado, con Number.isNaN o Number.isFinite:

function toNumber(text: string): number | undefined {
    if (text.trim() === "") return undefined; // Number("") would be 0
    const n = Number(text);
    return Number.isFinite(n) ? n : undefined;
}

for (const s of ["12.5", "", "abc", "7 ", "Infinity"]) {
    console.log(JSON.stringify(s), toNumber(s));
}

const age = toNumber("30");
if (age !== undefined) {
    console.log(age + 1); // age is number here
}

Devolver number | undefined hace que el fallo forme parte del tipo, así que cada llamada debe manejarlo antes de hacer aritmética. Number.isFinite también rechaza Infinity, que Number("Infinity") devuelve sin problema.

Evita el isNaN(x) global: convierte su argumento primero, así que en JavaScript isNaN("abc") es true. La declaración de TypeScript solo acepta un number, así que pasar un string es el error TS2345, una pista para usar Number.isNaN sobre un valor ya convertido.

String a entero

Pasa siempre a parseInt su segundo argumento, la base: 10 para texto decimal. Es opcional, pero documenta la intención e importa para otras bases. Para obtener un entero de un string decimal, convierte y luego redondea de forma explícita.

console.log(parseInt("0042", 10)); // 42
console.log(parseInt("ff", 16));   // 255
console.log(parseInt("1010", 2));  // 10

const price = Number("19.99");
console.log(Math.trunc(price), Math.round(price), Math.floor(price)); // 19 20 19

console.log(Number.isInteger(Number("7")));   // true
console.log(Number.isInteger(Number("7.5"))); // false

console.log(BigInt("9007199254740993")); // 9007199254740993n

parseInt espera un string: parseInt(12.7) es un error de compilación (TS2345), y eso es útil, porque en JavaScript parseInt sobre un número lo convierte primero a texto y da respuestas erróneas con valores como 0.0000005 (devuelve 5). Usa Math.trunc para números. Para enteros mayores que Number.MAX_SAFE_INTEGER, BigInt(text) interpreta el valor completo (y lanza un SyntaxError con texto inválido en lugar de devolver NaN).

Número a string

Cualquiera de String(n), n.toString() y `${n}` convierte un número a su forma de string más corta. Los métodos de formato dan más control:

const n = 1234.5678;

console.log(String(n));            // 1234.5678
console.log(n.toString());         // 1234.5678
console.log(`${n}`);               // 1234.5678
console.log(n.toFixed(2));         // 1234.57
console.log(n.toPrecision(3));     // 1.23e+3
console.log(n.toLocaleString("en-US")); // 1,234.568
console.log((255).toString(16));   // ff
console.log((5).toString().padStart(3, "0")); // 005

const label: string = n.toFixed(1); // every method here returns string
console.log(label);                 // 1234.6

toFixed redondea el valor binario, no el decimal que escribiste, así que (1.005).toFixed(2) es "1.00": 1.005 se guarda como algo un poco menor que 1.005. Para dinero, guarda las cantidades como céntimos enteros o formatea con Intl.NumberFormat.

String(n) también funciona con null y undefined (da "null" y "undefined"), mientras que n.toString() sería un error de compilación con strict, porque el valor podría faltar.

Referencia rápida