Como converter string em número em TypeScript: principais erros e como evitá-los

Introdução: Por que uma tarefa simples quebra o código

Todo desenvolvedor que trabalha com TypeScript, mais cedo ou mais tarde, enfrenta a tarefa: "Como converter uma string em número?". Parece simples, não é? Mas é justamente essa operação, aparentemente trivial, que se torna fonte de dezenas de bugs, especialmente na interface entre frontend e backend, onde os dados vêm de formulários de entrada, API ou análise de CSV.

No Stack Overflow, a pergunta "How to convert a string to number in TypeScript?" acumulou dezenas de milhares de visualizações. E não é por acaso. Os desenvolvedores se perdem em nuances: NaN, parseInt versus Number(), perda de precisão e comportamento inesperado com strings vazias. Neste artigo, analisaremos os principais erros ao converter string em número em TypeScript e mostraremos como evitá-los. Você aprenderá qual método escolher para cada tarefa e como escrever código verdadeiramente confiável.

Principais formas de converter string em número em TypeScript

Antes de falarmos sobre erros, vamos relembrar as ferramentas disponíveis no arsenal do desenvolvedor TypeScript. Cada uma se comporta de maneira diferente, e escolher o método errado é o primeiro e principal erro.

1. Função Number()

A forma mais óbvia. Number(value) tenta converter o valor passado em número. Se não for possível, retorna 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 unário de mais (+)

Sintaxe curta que faz o mesmo que Number(). Conciso, mas pode confundir iniciantes.

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 — atenção, esta é uma armadilha comum!

3. parseInt() e parseFloat()

Funções especializadas para analisar números inteiros e decimais. Elas "extraem" a parte numérica da string, ignorando os caracteres subsequentes.

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

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

Forma exótica que veio do JavaScript. Funciona apenas para números inteiros e descarta a parte decimal.

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

Top 5 erros ao converter string em número em TypeScript

Agora que analisamos as ferramentas, vamos ver onde os desenvolvedores mais tropeçam. Esses erros são verdadeiras "armadilhas" nas quais até programadores experientes caem.

Erro nº 1: Ignorar NaN

O erro mais comum é não verificar o resultado para NaN. O TypeScript não emitirá erro se você usar NaN em operações aritméticas ou comparações, mas o resultado será inesperado.

const input: string = "not a number";\nconst value: number = Number(input);\n\n// Erro: NaN participa dos cálculos\nconst total = value + 10;\nconsole.log(total); // NaN\n\n// Comparação com NaN é sempre falsa\nif (value === NaN) {\n  console.log("Isso nunca funcionará");\n}

Como evitar: Sempre use isNaN() ou Number.isNaN() para verificar. A segunda opção é preferível, pois não converte tipos não numéricos.

if (Number.isNaN(value)) {\n  console.error("Não foi inserido um número");\n  // Pode retornar um valor padrão ou mostrar um erro