Cadena TypeScript a número: 5 formas de realizar una conversión sencilla

JavaScript estaba destinado a escribir fragmentos de código cortos de unas pocas líneas que se integrarían en páginas web. Nadie podía prever que JavaScript se volviera tan popular como lo es ahora o que se utilizara para escribir aplicaciones con miles de líneas de código.

Por mucho que JavaScript haya crecido y ahora se utilice ampliamente en la creación de aplicaciones, no es un lenguaje perfecto. Sus humildes comienzos y su uso inicial previsto significan que JavaScript tiene algunas peculiaridades que pueden hacer que la creación de aplicaciones a gran escala sea una pesadilla.

Por ejemplo, JavaScript no arrojará un error cuando haga referencia a elementos que no existen en un objeto o cuando multiplique nulo por un valor numérico.

Para JavaScript, una cadena vacía ("") es igual a 0 (cero) cuando las dos se comparan utilizando un operador de igualdad (==). Peor aún, JavaScript no le mostrará tales errores en su código en desarrollo. Sólo verás los errores una vez que ejecutes tu programa.

Mecanografiado, creado sobre JavaScript, se desarrolló para aliviar los desafíos que surgen al crear aplicaciones con JavaScript. Para lograr esto, TypeScript realiza una verificación de tipos estática mientras escribe su código.

La verificación estática significa detectar errores en su código sin tener que ejecutarlo. Por lo tanto, la verificación de tipos estáticos busca errores durante el desarrollo en función del tipo de valores con los que se opera en el código.

TypeScript es un superconjunto escrito de JavaScript. Ser un superconjunto de JavaScript significa que cualquier código JavaScript válido también es TypeScript válido. Estar escrito significa que TypeScript agrega reglas sobre cómo se pueden utilizar los diferentes tipos de datos. TypeScript también está fuertemente tipado y no se pueden evitar las restricciones impuestas por el sistema de tipos.

TypeScript es un gran hito y un desarrollo significativo en el desarrollo web. TypeScript le permite escribir código más legible y fácil de mantener. También aplica buenas prácticas de codificación y ayuda a los desarrolladores a detectar y evitar errores al escribir código.

TypeScript es más confiable y fácil de refactorizar, lo que lo hace ideal para crear aplicaciones a gran escala en comparación con JavaScript. Dado que TypeScript está fuertemente tipado, veamos la conversión de tipos, su importancia y cómo TypeScript maneja las conversiones de tipos.

Conversión de tipos en TypeScript y su importancia

La conversión de tipos es el proceso de convertir un valor de un tipo de datos a otro, como convertir un valor de cadena en un número. La conversión de tipos se puede realizar de forma implícita, donde el compilador convierte automáticamente tipos de datos compatibles durante las complicaciones.

La conversión de tipos también puede ser explícita, donde la conversión de tipos se requiere explícitamente en el código fuente. A esto se le suele denominar encasillamiento.

La conversión de tipos es importante porque permite a los desarrolladores trabajar con diferentes formatos de datos sin dejar de cumplir con los tipos de datos esperados en TypeScript. También ayuda a garantizar resultados predecibles a partir de los códigos fuente.

Como desarrollador, convertir los tipos usted mismo le ayuda a garantizar que su código siga cumpliendo con los requisitos de tipos de TypeScript. Hace que su código sea más legible y comprensible y ayuda a prevenir errores relacionados con la escritura.

Las conversiones de tipos también ayudan a respaldar las validaciones de datos y ayudan a TypeScript a ayudarlo en el desarrollo al proporcionar todas las herramientas integradas, como el autocompletado, que están asociadas con tipos específicos.

Un caso de uso común para la conversión de tipos es con cadenas y números. Al convertir cadenas en números en TypeScript, para evitar errores en su código, solo convierta cadenas numéricas en números. Es decir, puedes convertir cadenas como “1”, “235”, “5234.5”, etc. Sin embargo, no convierta cadenas como "hola" en un número.

Veamos las diferentes formas de convertir cadenas en números en TypeScript:

Type Assertion using ‘as’

Cuando trabaje con varios tipos de datos en su código TypeScript, en ocasiones tendrá más información sobre el tipo de valor que TypeScript no puede conocer. En tales casos, le dice a TypeScript qué tipo será una variable y no permite que el compilador infiera el tipo. Esto se llama afirmación de tipo.

La afirmación de tipo se realiza utilizando el as palabra clave. Para utilizar la aserción de tipo para convertir una cadena en un número, primero establezca el tipo de cadena en desconocido. Esto se debe a que, de forma predeterminada, TypeScript considera cualquier conversión de tipo cadena a una número ser potencialmente un error. Esto se debe a que ni la cadena ni el número se superponen suficientemente con el otro. Para convertir una cadena en un número usando as, proceda como se muestra a continuación:

/**
 * set the type of numString to be unkown, otherwise,
 * Typescript will infer numString to be a string value
 */
let numString: unknown = "23452";

// Type conversion using as - numString is converted to a number
// and assigned to the variable score
let score = numString as number;
console.log(score);
console.log(score * 35);

Salida:

23452
820820

En la salida, observe que la variable numString se convirtió en un número y se asignó a la puntuación. Luego podemos hacer cálculos numéricos como la multiplicación con puntuación porque su valor es un número.

Type Assertion Using <>

La afirmación de tipo usando <> también se puede usar para convertir una cadena en un número. Funciona exactamente igual que usar el as palabra clave. La única diferencia en la implementación es la sintaxis, que se muestra a continuación:

let numString: unknown = "23452";
// Type assertion using <> to convert a string to a number
let score = <number>numString;

console.log(score);
console.log(score * 35);

Salida:

23452
820820

La salida es la misma que usar el as palabra clave. Nuevamente, recuerde no utilizar aserciones de tipo para convertir cadenas que no contengan valores numéricos.

Using the Number Constructor

Para convertir una cadena en un número usando el constructor Número, pase la cadena que desea convertir al constructor Número como se muestra en el fragmento de código a continuación:

let numString = "23452"; // type inferred to string
let lives: string = "20"; // type annotated to string

// pass in string to Number constructor to convert to number
let score = Number(numString)
console.log(score / 17)

// pass in string to Number constructor to convert to number
let remainingLives = Number(lives);
console.log(remainingLives - 4)

Salida:

1379.5294117647059
16

Cuando se utiliza el constructor Número, no es necesario establecer el tipo de cadena en desconocido. Funciona con valores de cadena que han sido anotados o inferidos en una cadena. Sin embargo, recuerde pasar cadenas numéricas como "514". Si pasa una cadena que no se puede convertir en un número, Yaya (No es un número) será devuelto.

Using the Unary plus (+) operator

El operador unario más (+), que precede a su operando único, se evalúa como el operando que precede. Por ejemplo, +2 equivale al número 2, +542 equivale al número 542, y así sucesivamente. Sin embargo, si el operando no es un número, el operador unario más (+) intenta convertirlo en un número.

Por ejemplo, +”98″ se evaluará como 98 y +”0″ se evaluará como el número 0. Por lo tanto, podemos usar el operador unario más (+) para convertir cadenas en números. Si pasa una cadena que no se puede convertir en un número, se devuelve NaN como se muestra a continuación:

let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"

// Using the Unary plus (+) to convert strings to numbers
let num1 = +numString1;
let num2 = +numString2;
let notNumber = +word;

console.log(`${num1} is a ${typeof num1}`);
console.log(`${num2} is a ${typeof num2}`);
console.log(notNumber);

Salida:

23452 is a number
973.82 is a number
NaN

Usar el operador unario más (+) es una buena manera de convertir cadenas en números, ya que es rápido y no realiza ninguna operación adicional en sus operandos.

Using parseInt() and parseFloat()

Al igual que en JavaScript, Typecript no distingue entre números enteros y decimales, también conocidos como números de punto flotante. Todos se consideran de tipo número. Dicho esto, los comportamientos de parseInt() y parseFloat() difieren ligeramente.

parseInt() toma un argumento de cadena, lo analiza y devuelve un entero equivalente según la base especificada. parseFloat() toma una cadena y la analiza y devuelve un número de punto flotante.

Por ejemplo, si pasa "897" tanto a parseInt() como a parseFloat(), obtendrá el número 897. Sin embargo, si pasa 897.75 a parseInt() y parseFloat(), parseInt() devolverá 897 mientras que parsefloat() devolverá 897.75.

Por lo tanto, al convertir cadenas numéricas que no tienen decimales, use parseInt(); sin embargo, si la cadena numérica tiene decimales, use parseFloat() como se muestra en el siguiente código:

let numString1 = "897.75";
let numString2 = "724";
let word = "hello";

console.log("Parsing numerical strings with decimal numbers")
console.log(`Using parseInt -> ${parseInt(numString1)}`);
console.log(`Using parseFloat -> ${parseFloat(numString1)}`);

console.log("Parsing numerical strings with whole numbers")
console.log(`Using parseInt -> ${parseInt(numString2)}`);
console.log(`Using parseFloat -> ${parseFloat(numString2)}`);

console.log("Parsing strings that can't convert to number")
console.log(parseInt(word));
console.log(parseFloat(word));

Salida:

Parsing numerical strings with decimal numbers
Using parseInt -> 897
Using parseFloat -> 897.75
Parsing numerical strings with whole numbers
Using parseInt -> 724
Using parseFloat -> 724
Parsing strings that can't convert to number
NaN
NaN

Para Concluir

Cuando trabaje con valores de cadena, como el resultado de llamadas API, es posible que desee convertirlos en números para poder realizar cálculos numéricos con ellos. Cuando surja tal necesidad, considere los métodos destacados en el artículo para convertir cadenas en números.

Sin embargo, siempre que convierta cadenas en números, tenga cuidado porque podría obtener NaN cuando intente convertir una cadena en un número.

Para evitar tal error, asegúrese de que todas las cadenas que desea convertir en un número sean cadenas numéricas. También puede usar una declaración if para verificar NaN y evitar errores en su código.

También puede explorar la parte superior Bibliotecas de TypeScript y tiempo de ejecución para conocer como desarrollador.