Tipos de datos en TypeScript
Los tipos son la esencia de vida de TypeScript. Gracias a los tipos TypeScript es un lenguaje mucho más seguro y menos propenso a errores que JavaScript. En este post, veremos los distintos tipos de datos que tenemos en este lenguaje.
Te recomiendo ampliamente leer nuestro artículo Tipos de Datos en JavaScript el cual te dará un panorama más detallado de cómo son tratados los tipos de datos en JavaScript y las grandes mejores que trae consigo TypeScript.
JavaScript tiene tres tipos de datos primitivos que pueden ser representados en TypeScript, estos son string, number y boolean. Estos tipos no se deben confundir con las clases wrapper de JavaScript (en mayúscula la primera letra) String, Number y Boolean.
Para declarar variables con tipo siempre se deben usar las palabras reservadas const, var o let.
Strings
Los strings, como en JavaScript, permiten representar una cadena de caracteres. Para definir un string debes utilizar el tipo string.
let userName: string = 'Steve';También puedes utilizar la inferencia de tipos, puedes encontrar más en Declaración de Variables en TypeScript.
Numbers
El tipo de dato number representa cualquier número en typescript, sin importar si es entero de de coma flotante.
let edad: number = 42;Boolean
El tipo de dato boolean representa los valores booleanos true y false.
let isAvailable: boolean = true;Además de estos tipos de datos, también existen los array en TypeScript.
Arrays
Los arrays en TypeScript son definidos de manera similar a como se definen los demás tipos con la única diferencia que se agregan los paréntesis [] enseguida del tipo para indicar que dicho array contiene valores de ese tipo.
// array de números
let days: number[] = [1,2,3,4,5,6,7];
// array de strings
let names: string[] = ['Jobs', 'Gates'];
// array de booleanos
let booleans: boolean[] = [true, false];Any
El tipo de dato any se utiliza donde quiera que se requiera que typescript no realice el chequeo de tipo. Esto desactiva por completo el chequeo, y puede dejar conducir a errores en el código traspilado a JavaScript ya que no se hace comparación de ningún tipo.
let obj: any = { x: 0 };
// Ninguna de las siguientes líneas causará un error en el compilador.
// Sin embargo, algunas causarán errores al ejecutar el código traspilado.
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;
Objetos
Aparte de los tipos primitivos, también existen los objetos en TypeScript, así como en JavaScript. Un tipo objeto, hace referencia a la declaracion misma del objeto con sus propiedades y tipos. Veamos a que nos referimos.
function printCoord(pt: { x: number; y: number }) {
console.log("Coordenada en X: " + pt.x);
console.log("Coordenada en Y: " + pt.y);
}
printCoord({ x: 3, y: 7 });El objeto definido en la firma de la anterior función, es un objeto con dos propiedades numericas, X e Y. Si enviaramos como argumento en la función otro objeto diferente, como por ejemplo el siguiente:
printCoord({ x: 3 });Obtendríamos el siguiente error del compilador:
error TS2345: Argument of type '{ x: number; }' is not assignable to parameter of type '{ x: number; y: number; }'. Property 'y' is missing in type '{ x: number; }' but required in type '{ x: number; y: number; }'.
Igualmente si enviamos más propiedades de las indicadas, obtendríamos también un error.
printCoord({ x: 3, y: 4, z: 4 });error TS2345: Argument of type '{ x: number; y: number; z: number; }' is not assignable to parameter of type '{ x: number; y: number; }'. Object literal may only specify known properties, and 'z' does not exist in type '{ x: number; y: number; }'.
Si no se especifica ningún tipo en el objeto se infiere como any.
Nótese que en la declaración del objeto se puede utilizar también el caracter , en lugar de ;.
{ x: number, y: number }Propiedades opcionales
TypeScript permite definir algunas propiedades como opcionales en los objetos. Modifiquemos un poco el código anterior para que al enviar solo el parámetro X la llamada a la función printCoord con un solo argumento sea válida.
function printCoord(pt: { x: number; y?: number }) {
console.log("Coordenada en X: " + pt.x);
console.log("Coordenada en Y: " + (pt.y == undefined ? '-' : pt.y));
}
printCoord({ x: 3 });Cada vez que se utilice el operador ? para indicar que un parámetro es opcional, dicho parámetro será undefined en caso de no ser asignado. El código anterior arrojará la siguiente salida.
Coordenada en X: 3
Coordenada en Y: -Tipos de Unión
Los tipos de unión se utilizan cada vez que se requiere que un datos sea de dos o más tipos. Por ejemplo, la siguiente función aceptará un tipo number o un tipo string.
function printId(id: number | string) {
console.log("Your ID is: " + id);
}En el caso de que se requiera alguna lógica especial para un tipo, se debe identificar ese tipo primero de alguna forma.
typeof variable === "string"; // string
typeof variable === "number"; // number
Array.isArray(variable); // arrayOperador de aserción no nula (sufijo !)
Este operador remueve los chequeos de null y undefined en los tipos de TypeScript. Para hacer esto puedes agregar el operador ( ! ) justo después de una expresión. Se recomienda usar este operador solo cuando estás seguro de que el valor no puede ser null o undefined.
Por ejemplo, el siguiente código lanzaría un error en modo estricto.
function liveDangerously(x?: number | null) {
console.log(x.toFixed());
}Lo cual puede ser omitido usando el operador de aserción no nula.
console.log(x!.toFixed());El código anterior pasará el chequeo de TypeScript pero de igual manera lanzará un erroor en tiempo de ejecución cuando se intente utilizar la función sin valor o con un valor NULO. Es por esto que se debe ser muy cuidadoso al utilizar este operador, solamente debe ser usado en los casos en los cuales el checker de TypeScript es incapaz de concluir que no puede ser nulo. Otras características importantes relacionados con tipos de datos puede ser vistas en los siguientes artículos
- Alias de Tipos en TypeScript
- Interfaces en TypeScript