Tipos de datos en TypeScript (I)

En el primer artículo de la serie de TypeScript decíamos que este es un lenguaje fuertemente tipado. Esto significa que los datos que definimos son de un tipo concreto, y no de otro, y no se puede andar «jugando» con los tipos de datos al estilo de cómo se hace, por ejemplo, en PHP o en JavaScript nativo.

Esta característica, que a los novatos de la programación les parece engorrosa es, desde luego, una de las mejores prestaciones de un lenguaje de programación, ya que nos ayuda a manejar nuestros datos de un modo estructurado y organizado correctamente, evitándonos una increíble cantidad de errores. De verdad que quien haya escrito cualquier programa sin estas restricciones sabe la cantidad de despropósitos que se pueden llegar a cometer por algo así, que parece, a ojos poco experimentados, una tontería.

Cómo compensación por la pequeña molestia que este tipado pueda suponer en principio, el abanico de tipos de datos de TypeScript es tan amplio, que siempre podremos recurrir a lo que necesite nuestro proyecto. Vamos a empezar en este artículo a conocer los tipos de datos de que disponemos en esta tecnología.

ACLARACIÓN INICIAL

Lo primero, antes de entrar en los tipos de datos que puede manejar TypeScript vamos a hacer una aclaración que a muchos os parecerá más que obvia, pero que, si la ignoramos, nos encontraremos infrautilizando TypeScript y con más problemas que soluciones. Se trata de lo siguiente. TypeScript es un superconjunto de JavaScript. Eso significa que cualquier código que puedas escribir en JavaScript puedes escribirlo, exactamente igual, en TypeScript, y se transpilará sin problemas. Por supuesto, que «puedas» hacerlo no significa que «debas» hacerlo así. Para eso no empleas TypeScript, sigues con tu JavaScript de toda la vida, y no te complicas más. Veamos de lo que te hablo. Imagina que en tu proyecto creas un código TypeScript como el siguiente:

Cómo ves, es JavaScript puro y duro (vale, la instrucción let es de JavaScript 2015 -o ES6, si lo prefieres-, pero es JavaScript, al fin y al cabo). Al transpilar te genera el JavaScript siguiente:

Aparte de añadirte el "use strict";, el código es el mismo. No hemos adelantado nada por el hecho de estar usando TypeScript.

La sintaxis correcta para declarar pares nombre-valor en TypeScript es la siguiente;

let nombre_de_dato: tipo_de_dato = valor;

donde nombre_de_dato es el nombre que queremos darle al dato. A continuación usamos el signo dos puntos seguido de un espacio en blanco (: ) y tipo_de_dato es el tipo de dato que vamos a usar (numérico, de cadena, booleano, etc). Después el operador de asignación y el valor inicial. Darle un valor inicial es opcional. Si no queremos darle un valor inicial, simplemente usaremos una sintaxis como la siguiente:

let nombre_de_dato: tipo_de_dato;

Evidentemente, cuando asignemos datos a una variable estos deberán ser del tipo del que se haya declarado dicha variable. Si una variable la declaramos como numérica y tratamos de asignarle, por ejemplo, una cadena literal, al intentar transpilar se producirá un error y el código JavaScript no será creado.

UN EJEMPLO SIMPLE

Antes de detallar los tipos básicos de datos en TypeScript te voy a mostrar un ejemplo de uso de la sintaxis que acabamos de comentar. Lo hemos llamado tipos_de_datos_1.ts:

Cuando hacemos la transpilación obtenemos tipos_de_datos_1.js:

Este archivo JavaScript lo cargamos en un HTML, como el siguiente index.html:

Cuando lo cargas en tu navegador y abres la consola del mismo, ves que el resultado es correcto. Observa, en las líneas resaltadas del código JavaScript que no aparecen, en las declaraciones de las variables, los tipos de datos. Esto es porque el hecho de especificar el tipo de dato es una característica de TypeScript que JavaScript no implementa. Desde luego, esto carece de importancia. Si la transpilación se ha hecho sin problemas, significa que en TypeScript hiciste las declaraciones y las asignaciones correctamente.

ATENCIÓN. Cuando escribas tu código JavaScript en TypeScript y lo transpiles luego, debes acostumbrarte a no hacer «retoques» a mano en el JavaScript. Si tienes que cambiar o retocar cualquier cosa, por nimia que te parezca, hazlo en el TypeScript original y vuelve a transpilar, siguiendo las reglas de TypeScript. De otro modo, podrías estar infringiéndolas y encontrarte cometiendo los mismos errores una y otra vez. Cuando escribimos un código en TypeScript y, para poder usarlo, debemos transpilarlo a JavaScript, si hemos cometido errores de sintaxis el transpilador nos lanzará mensajes de error que nos ayudarán a escribir un código limpio y bien organizado.
ATENCIÓN. Para declarar variables en TypeScript podemos emplear la sentancia var o let. La diferencia entre una y otra está detallada en este artículo. Si tienes dudas, échale un vistazo.

TIPOS BÁSICOS DE DATOS

A continuación te incluyo una chuleta con los tipos básicos de datos que podemos manejar en TypeSrcipt. Guárdala a modo de referencia.

TIPO EJEMPLO(S) COMENTARIOS
number let dato_1: number = 28; // Dato decimal
let dato_2: number = 0b11001011; // Dato binario
let dato_3: number = 0o452; // Dato octal
let dato_4: number = 0XF42C; // Dato hexa
let dato_5: number = 4.56; // Dato flotante
Los datos de tipo number almacenan valores numéricos. Estos pueden ir expresados como números sin más, lo que le indica al transpilador que son decimales (pueden ser, como ves en los ejemplos, enteros o con punto flotante). Si queremos expresar un número en binario, lo precedemos con 0b. Si queremos expresarlo en octal, lo precedemos con 0o. Por último, si queremos expresar un valor hexadecimal lo precedemos con 0x.
string let nombre: string = "Antonio";
let otro_nombre: string = 'Laura';
Los datos que van a almacenar cadenas literales se declaran como de tipo string. La cadena que le asignemos va acotada con comillas simples o dobles.
boolean let dato_logico_1: boolean = true;
let dato_logico_2: boolean = false;
Los datos lógicos sólo pueden almacenar uno de dos estados: true o false. Por lo tanto, a estos datos hay que asignarles uno de estos valores en la misma declaración del dato. Si no, tiene un valor de tipo undefined que, por su propia naturaleza, no es de tipo boolean.(1)
any let cualquier_cosa: any = "Lo que sea"; Los datos que se declaran como de tipo any pueden tener cualquier valor y, además, este puede variar durante la ejecución. Es decir. Podemos declararlo, como en el ejemplo de la izquierda, con una cadena y, posteriormente, a la misma variable, sustituirle el contenido por un número. Esto parece una aberración, ya que es lo mismo que no usar tipado de datos. TypeScript incorpora esto como mecanismo especial para casos muy concretos en los que un dato pueda proceder de un servicio externo, y el proveedor del mismo no pueda garantizar el tipado de datos. Salvo casos muy puntuales, no deberíamos usar este tipo en casi ninguna circunstancia.

(1) Los datos que se manejan en JavaScript son undefined cuando se declara una variable y no se le asigna un valor. Mientras no se asigne un valor a una variable declarada, esta tendrá el valor undefined. No es, realmente, un tipo de dato específico, si no, más bien, la ausencia de dato. También debes tener en cuenta que en programación (y TypeScript no es una excepción) se reconoce un tipo especial de dato llamado null. Es lo que obtenemos cuando una variable no es accesible (por haberse declarado, por ejemplo, en un ámbito interno, como un bloque de código específico) y tratar de acceder a ella desde otro ámbito. Los datos undefined y null a veces inducen a confusión si tratamos de recuperar un valor que no está preasignado, o no es accesible.

CONCLUYENDO

En este artículo hemos empezado a conocer los tipos de datos que se manejan en TypeScript. A partir del siguiente empezaremos a ver la potencia que realmente ofrecen estos tipos de datos, usándolos con las prestaciones propias de este lenguaje. Este artículo (y el siguiente) son un poco demasiado teóricos para mi gusto, pero necesarios para sentar bien unas bases que luego necesitaremos más adelante. En este enlace tienes los códigos de este artículo, para que experimentes con ellos.

   

Deja un comentario