Converter string para number em TypeScript (e number para string)

Para converter uma string em número no TypeScript, chame Number(text). O resultado tem o tipo number e é NaN quando o texto não é um número válido. Para texto com caracteres no final, como "42px", use parseInt(text, 10) ou 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

As quatro conversões retornam o tipo number. O TypeScript não sabe se o texto era válido; uma string inválida ainda gera um number, cujo valor é NaN.

Por que é preciso converter

Campos de formulário, parâmetros de URL, variáveis de ambiente e conteúdo de arquivos chegam como strings. O TypeScript não deixa você usar uma string onde se espera um 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.

Aritmética com -, * e / em uma string é erro. + é permitido, mas concatena, então "3" + 10 é a string "310"; por isso a conversão precisa vir primeiro: Number(quantity) * 10.

Uma type assertion também não resolve. quantity as number é rejeitado (TS2352), e forçar com as unknown as number só silencia o compilador: em tempo de execução o valor continua sendo uma string.

Number vs parseInt vs parseFloat vs + unário

As quatro funções concordam em entradas limpas e discordam em todo o resto. Esta tabela mostra a saída real de cada uma no Node:

As regras por trás da tabela:

• Number e o + unário são idênticos. Eles convertem a string inteira depois de remover os espaços das pontas, entendem 1e3 e hexadecimal com 0x e retornam NaN se sobrar alguma coisa. Uma string vazia ou só com espaços vira 0.
• parseInt e parseFloat leem a partir do início e param no primeiro caractere que não conseguem usar, então "42px" e "1,000" dão números parciais. Uma string vazia é NaN.
• parseInt descarta a parte fracionária e não entende expoentes: "1e3" para no e.
• Separadores numéricos (12_000) são válidos no código-fonte, não em strings.

Number é a opção mais rígida para validar entradas. parseInt e parseFloat servem para texto que de fato traz uma unidade ou sufixo, como tamanhos em CSS.

Tratando entradas inválidas: NaN

NaN tem o tipo number, então o compilador nunca avisa sobre ele. Verifique o resultado você mesmo, com Number.isNaN ou 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
}

Retornar number | undefined torna a falha parte do tipo, então todo código que chama a função precisa tratá-la antes de fazer contas. Number.isFinite também rejeita Infinity, que Number("Infinity") retorna sem reclamar.

Evite o isNaN(x) global: ele converte o argumento primeiro, então isNaN("abc") é true no JavaScript. A declaração do TypeScript só aceita um number, então passar uma string é o erro TS2345, um sinal para usar Number.isNaN em um valor já convertido.

String para inteiro

Sempre passe o segundo argumento de parseInt, a base: 10 para texto decimal. Ele é opcional, mas deixa a intenção clara e faz diferença em outras bases. Para obter um inteiro de uma string decimal, converta e depois arredonde explicitamente.

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 uma string: parseInt(12.7) é um erro de compilação (TS2345), o que é útil, porque no JavaScript parseInt em um número primeiro o converte em texto e dá respostas erradas para valores como 0.0000005 (retorna 5). Use Math.trunc para números. Para inteiros acima de Number.MAX_SAFE_INTEGER, BigInt(text) lê o valor completo (e lança um SyntaxError para texto inválido em vez de retornar NaN).

Número para string

Qualquer um entre String(n), n.toString() e `${n}` converte um número na sua forma de string mais curta. Os métodos de formatação dão mais controle:

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 arredonda o valor binário, não o decimal que você digitou, então (1.005).toFixed(2) é "1.00": 1.005 é armazenado como um pouco menos que 1.005. Para dinheiro, guarde os valores como centavos inteiros ou formate com Intl.NumberFormat.

String(n) também funciona com null e undefined (gerando "null" e "undefined"), enquanto n.toString() seria um erro de compilação com strict, já que o valor pode estar ausente.

Referência rápida