O JavaScript foi concebido para a criação de pequenos fragmentos de código, geralmente com poucas linhas, que seriam integrados a páginas web. Inicialmente, ninguém imaginava que o JavaScript alcançaria a popularidade que tem hoje, sendo empregado no desenvolvimento de aplicações com milhares de linhas de código.
Apesar de sua grande expansão e ampla utilização na construção de aplicações, o JavaScript não é uma linguagem perfeita. Sua origem modesta e uso inicial previsto implicam que o JavaScript tenha particularidades que podem transformar a criação de aplicações de grande escala em um desafio complexo.
Por exemplo, o JavaScript não apresenta um erro quando se faz referência a elementos inexistentes em um objeto ou quando se multiplica um valor nulo por um número.
No JavaScript, uma string vazia (“”) é considerada igual a 0 (zero) quando comparadas através do operador de igualdade (==). E o pior é que o JavaScript não exibe esses erros durante o desenvolvimento do código. Esses erros só se tornam visíveis após a execução do programa.
TypeScript, construído sobre o JavaScript, foi desenvolvido para amenizar os desafios que surgem ao criar aplicações em JavaScript. Para isso, o TypeScript realiza a verificação estática de tipos enquanto você escreve seu código.
A verificação estática significa identificar erros em seu código sem a necessidade de executá-lo. A verificação estática de tipos examina erros durante o desenvolvimento com base no tipo de valores que são manipulados no código.
TypeScript é um superconjunto tipado do JavaScript. Ser um superconjunto significa que qualquer código JavaScript válido também é um código TypeScript válido. Ser tipado significa que o TypeScript estabelece regras sobre como diferentes tipos de dados podem ser utilizados. O TypeScript também é fortemente tipado, e as restrições impostas pelo sistema de tipos não podem ser contornadas.
O TypeScript representa um grande avanço e um desenvolvimento significativo no desenvolvimento web. Ele permite a criação de código mais claro, fácil de manter, impõe boas práticas de codificação e auxilia os desenvolvedores a detectar e evitar erros durante a escrita do código.
O TypeScript é mais confiável e fácil de refatorar, o que o torna ideal para construir aplicações de grande escala quando comparado ao JavaScript. Como o TypeScript é fortemente tipado, vamos explorar a conversão de tipos, sua importância e como o TypeScript a gerencia.
Conversão de Tipo no TypeScript e sua Relevância
A conversão de tipo é o processo de transformar um valor de um tipo de dado para outro, como converter um valor de string para um número. A conversão de tipo pode ocorrer implicitamente, quando o compilador converte automaticamente tipos de dados compatíveis durante a compilação.
A conversão de tipo também pode ser explícita, quando a conversão de tipo é expressamente indicada no código-fonte. Isso geralmente é chamado de coerção de tipo.
A conversão de tipo é fundamental porque possibilita que desenvolvedores manipulem diferentes formatos de dados e, ao mesmo tempo, mantenham a conformidade com os tipos de dados esperados no TypeScript. Ela também ajuda a assegurar resultados previsíveis a partir do código-fonte.
Como desenvolvedor, converter tipos por conta própria ajuda a garantir que o código esteja em conformidade com os requisitos de tipos do TypeScript. Isso torna o código mais legível e compreensível e ajuda a evitar erros relacionados aos tipos.
A conversão de tipos também auxilia na validação de dados e ajuda o TypeScript no desenvolvimento, fornecendo ferramentas integradas, como o preenchimento automático, que são associados a tipos específicos.
Um caso de uso comum para a conversão de tipos é com strings e números. Ao converter strings para números no TypeScript, para evitar erros em seu código, converta apenas strings numéricas para números. Ou seja, você pode converter strings como “1”, “235”, “5234.5”, entre outras. No entanto, não é aconselhável converter strings como “olá” para números.
Vamos analisar as diferentes formas de transformar strings em números no TypeScript:
Afirmação de Tipo usando ‘as’
Ao trabalhar com vários tipos de dados em seu código TypeScript, você pode ter informações adicionais sobre o tipo de valor que o TypeScript desconhece. Nesses casos, você informa ao TypeScript qual será o tipo da variável e impede que o compilador infira o tipo. Isso é conhecido como afirmação de tipo.
A afirmação de tipo é feita utilizando a palavra-chave `as`. Para converter uma string em um número usando a afirmação de tipo, primeiro defina o tipo da string como `unknown`. Isso é necessário porque o TypeScript considera qualquer conversão de string para número como um potencial erro, pois nem a string nem o número se sobrepõem de forma suficiente. Veja como converter uma string para um número usando `as`:
/** * define o tipo de numString como unknown, caso contrário, * o Typescript inferirá numString como um valor de string */ let numString: unknown = "23452"; // Conversão de tipo usando as - numString é convertido para número // e atribuído à variável score let score = numString as number; console.log(score); console.log(score * 35);
Resultado:
23452 820820
No resultado, observe que a variável `numString` foi convertida para um número e atribuída a `score`. Podemos realizar cálculos numéricos, como a multiplicação com `score`, pois seu valor agora é um número.
Afirmação de Tipo usando <>
A afirmação de tipo usando <> também pode ser utilizada para converter uma string para um número. Ela funciona de forma idêntica ao uso da palavra-chave `as`. A única diferença está na sintaxe, como demonstrado abaixo:
let numString: unknown = "23452"; // Afirmação de tipo usando <> para converter uma string para número let score = <number>numString; console.log(score); console.log(score * 35);
Resultado:
23452 820820
O resultado é o mesmo do uso da palavra-chave `as`. Novamente, lembre-se de não usar a afirmação de tipo para converter strings que não contenham valores numéricos.
Utilizando o Construtor Number
Para converter uma string para um número usando o construtor `Number`, passe a string que deseja converter para o construtor `Number`, como demonstrado no trecho de código abaixo:
let numString = "23452"; // tipo inferido como string let lives: string = "20"; // tipo anotado como string // passa a string para o construtor Number para converter para número let score = Number(numString) console.log(score / 17) // passa a string para o construtor Number para converter para número let remainingLives = Number(lives); console.log(remainingLives - 4)
Resultado:
1379.5294117647059 16
Ao usar o construtor `Number`, não é necessário definir o tipo da string como `unknown`. Ele opera com valores de string que foram anotados ou inferidos como string. No entanto, lembre-se de passar sequências numéricas como “514”. Caso passe uma string que não possa ser convertida em um número, o resultado será `NaN` (Not-a-Number).
Utilizando o Operador Unário Mais (+)
O operador unário mais (+), que precede seu único operando, é avaliado como o operando que ele precede. Por exemplo, +2 é avaliado como o número 2, +542 é avaliado como o número 542, e assim por diante. No entanto, caso o operando não seja um número, o operador unário mais (+) tenta convertê-lo para um número.
Por exemplo, +”98″ será avaliado como 98 e +”0″ será avaliado como o número 0. Portanto, podemos utilizar o operador unário mais (+) para converter strings para números. Caso passe uma string que não possa ser convertida para um número, o resultado será `NaN`, como demonstrado abaixo:
let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"
// Utilizando o operador unário mais (+) para converter strings para números
let num1 = +numString1;
let num2 = +numString2;
let notNumber = +word;
console.log(`${num1} é um ${typeof num1}`);
console.log(`${num2} é um ${typeof num2}`);
console.log(notNumber);
Resultado:
23452 é um number 973.82 é um number NaN
A utilização do operador unário mais (+) é uma boa opção para transformar strings em números, pois é rápida e não realiza nenhuma operação adicional em seus operandos.
Utilizando `parseInt()` e `parseFloat()`
Assim como no JavaScript, o Typescript não distingue entre números inteiros e decimais, também conhecidos como números de ponto flutuante. Todos são considerados do tipo `number`. Dito isso, o comportamento de `parseInt()` e `parseFloat()` difere ligeiramente.
`parseInt()` recebe uma string como argumento, a analisa e retorna um número inteiro equivalente, de acordo com a base especificada. `parseFloat()` recebe uma string e a analisa retornando um número de ponto flutuante.
Por exemplo, caso você passe “897” para `parseInt()` e `parseFloat()`, receberá de volta o número 897. No entanto, caso passe 897,75 para `parseInt()` e `parseFloat()`, `parseInt()` retornará 897, enquanto `parseFloat()` retornará 897,75.
Portanto, ao converter strings numéricas que não possuem casa decimal, utilize `parseInt()`, porém, se a string numérica possuir casas decimais, utilize `parseFloat()`, conforme demonstrado no código abaixo:
let numString1 = "897.75";
let numString2 = "724";
let word = "hello";
console.log("Analisando strings numéricas com números decimais")
console.log(`Usando parseInt -> ${parseInt(numString1)}`);
console.log(`Usando parseFloat -> ${parseFloat(numString1)}`);
console.log("Analisando strings numéricas com números inteiros")
console.log(`Usando parseInt -> ${parseInt(numString2)}`);
console.log(`Usando parseFloat -> ${parseFloat(numString2)}`);
console.log("Analisando strings que não podem ser convertidas para número")
console.log(parseInt(word));
console.log(parseFloat(word));
Resultado:
Analisando strings numéricas com números decimais Usando parseInt -> 897 Usando parseFloat -> 897.75 Analisando strings numéricas com números inteiros Usando parseInt -> 724 Usando parseFloat -> 724 Analisando strings que não podem ser convertidas para número NaN NaN
Conclusão
Ao trabalhar com valores de string, como os retornos de chamadas de API, você pode querer convertê-los para números para realizar cálculos numéricos com eles. Quando essa necessidade surgir, considere os métodos destacados neste artigo para converter strings para números.
No entanto, sempre que estiver convertendo strings para números, tome cuidado, pois você pode obter `NaN` ao tentar converter uma string para um número.
Para evitar esse erro, certifique-se de que todas as strings que deseja converter em um número sejam numéricas. Você também pode utilizar uma instrução `if` para verificar `NaN` e evitar erros em seu código.
Você também pode explorar as principais bibliotecas TypeScript e tempo de execução para se aprimorar como desenvolvedor.