TypeScript (Tipos De Datos)
TypeScript es la solución que presenta Microsoft que nos permite trabajar con JavaScript como si fuera un lenguaje de programación orientado a objetos, así es un JavaScript que cuenta con su propio compilador.
TypeScript se presenta como una tecnología escalable capaz de ofrecer clases, módulos e interfaces que nos permiten construir componentes robustos, algo que debemos entender antes de continuar es que TypeScript se desarrollo bajo la idea de “Starts from JavaScript, Ends with JavaScript”, esto quiere decir que nuestros archivos se codifican en un JavaScript regido por las reglas de la POO, y que cuando se compilan se crea una archivo con el JavaScript normal, esto permite que TypeScript puede utilizar código JavaScript existente e incorporar bibliotecas de JavaScript como jQuery, MongoDB, Node.js, y D3.js, y ser utilizado o extendido desde otro código o libreria JavaScript.
Básicamente el compilador del TypeScript se encarga de limpiar el código y dejar simplemente el código JavaScript que requiere nuestra aplicación o cualquier otro programa como por ejemplo Node.Js, o cualquier otra tecnología con JavaScript.
Los archivos TypeScript tiene una extensión de tipo “.ts” y el compilador se encarga de generar el código de JavaScript para poder ser almacenado dentro de un archivo “.js”.
¿Por qué TypeScript se compila a código JavaScript?
Hay que entender que TypeScript no viene a sustituir lo que ya se viene haciendo hasta el momento con JS, la idea principal de TypeScript es generar un código que sea fácil y práctico de mantener y aun largo plazo fácil de escalar, algo que con JS tiende a ser algo problemático o confuso cuando el proyecto es sumamente grande.
Algo importante de mencionar es que TypeScript es un proyecto de código abierto, y que su compilador se encuentra liberado bajo la licencia de Apache 2.0, y el lenguaje está disponible bajo la Open Web Foundation’s Final Specification Agreement (OWFa 1.0).
Tipos y Declaración de Variables en TypeScript
Al estar TypeScript pensado en ser una tecnología de desarrollo orientado a objetos, los tipos de datos que se manejan son fuertemente tipados, esto permite que el compilador nos indique si estamos asignando un valor incorrecto a una variable que no lo acepta, en otras palabras a diferencia de JavaScript nosotros no podremos guardar una cadena de texto dentro de una variable que previamente fue declarada como numérica, la estructura en la declaración de variables es la siguiente:
Veamos los tipos de datos que acepta TypeScript y como declarar variables con cada uno de ellos:
number (Numérico)
Al igual que en JavaScript, TypeScript detecta cualquier número como número con punto flotante, así que por lo tanto solo existe la variable de tipo number, para el almacenamiento de los números reales.
Ejemplo:
string (cadenas de texto)
La forma de declarar una variable de tipo string es muy similar a la de una variable de tipo number, solo que esta el valor que se va almacenar dentro de dicha variable debe de ir encerrado dentro de comillas simple (‘’) o comillas dobles(“”).
Ejemplo:
boolean (valor de falso y verdadero)
Como en cualquier lenguaje de programación el valor de falso/verdadero es muy útil y requiere de su propio tipo de variable para almacenarlo, la forma de declarar un valor de falso verdadero dentro de TypeScript es la siguiente:
Este tipo de declaración a acabamos de ver se le conoce como “declaración explícita” de los tipos de datos, pero no es la única manera de declarar tipos de variables dentro de TS, vamos a ver un ejemplo de la “declaración implícita”.
Ejemplo:
Al hacer este tipo de declaración dentro de TS, el compilador automáticamente es capaz de inferir el tipo de dato que esta variable contendrá, si nosotros tratáramos de asignar por ejemplo un valor true a la variable edad que previamente se le asigno un valor 24 sin indicar su tipo de dato, el compilador nos arrojaría un error ya que la variable quedo ubicada como variable de tipo number.
any (cualquier tipo)
Como ya se había mencionada TypeScript es un lenguaje tipado, pero al trabajar con un lenguaje como JS el cual su tipado es dinámico, TS debe de tener cierta flexibilidad que JS requiere, y es por eso que existe el tipo de dato any el cual le indica al compilador que para las variables declaradas con ese tipo omita la comprobación del dato con respecto al tipo.
Ejemplo:
Valor null & undefined (nulo e indefinido)
Cuando nosotros asignamos a una variable de cualquier tipo de dato el valor null, lo que le estamos diciendo al compilador y estamos indicando es que esa variable no tiene valor, mejor dicho la variable tiene ausencia de valor.
El valor undefined es el valor por default que posee una variable cuando no se inicializa al momento de su declaración.
Array (Arreglo)
La declaración de arreglos dentro de TS, se puede realizar de dos maneras diferentes la primera es muy parecida a otros lenguajes orientados a objetos:
Y la segunda es mediante la declaración de un arreglo genérico:
Declaración de un arreglo de valores booleanos vació
Trabajo con Arreglos en TypeScript
Inserción
Para modificar un valor de algún registro en el arreglo es necesario indicar el índice de elemento en el arreglo que se desea modificar, hay que tomar en cuenta que el primer elemento en un arreglo posee el índice 0 y el segundo elemento el índice numero 1 y así sucesivamente.
Ejemplo:
Agregar un nuevo elemento
La forma de agregar un nuevo elemento en un arreglo es igual en TypeScript a como se realiza dentro de JS, con la diferencia de que sí el arreglo no es de tipo any, el arreglo solo permitirá agregar elementos del tipo de datos que fue declarado.
Eliminar el último elemento de un arreglo
De la misma manera que existe el método push() para agregar un nuevo elemento al arreglo, TS tiene el método pop() para eliminar el último elemento del arreglo.
enum (enumerados)
Este tipo de dato es una herramienta que no existe propiamente dentro de JS, pero que TS al ser un lenguaje basado en la POO permite la creación de tipos de datos enumerados, los cuales son definidos por el usuario y que el compilador se encarga de traducir propiamente a lenguaje JS.
Para entender el tipo de dato enumerado, se le puede ver como la creación de un tipo de dato diseñado por el usuario en el cual el indica todos los posibles estados que puede tomar la variable numérica mediante nombres, así como el valor de cada uno de los nombres.
Ejemplo:
Si nosotros imprimiéramos el valor de la variable país, el resultado que obtendríamos sería el número 0, ya que por defecto el tipo de dato enumerado asigna el 0 a su primer valor, el 1 al segundo valor y así consecutivamente, para cambiar el valor por defecto que se le asignan a los nombres dentro del enumerado es necesario definirlo en el momento de la creación del enumerado.
Ahora bien si nosotros lo que deseamos en conocer el que nombre pertenece a cierto valor, tomando como ejemplo el último enum presentado el código sería el siguiente:
Tipo de Dato Object
El tipo de dato Object también tiene algunas diferencias en
comparación con JS, veamos cómo se declara este tipo de dato en TypeScript:
Este tipo de objeto se le conoce
como “Objeto Genérico” el cual requiere la declaración de la estructura en
las propiedades que contendrá dicho
objeto y como se muestra en la imagen en el segundo par de llaves se puede
establecer el valor inicial que contendrán las propiedades del objeto.
Para manipular una propiedad del
objeto utilizamos la notación de punto para acceder a cada una de las
propiedades y hacer uso de ellas.
A continuación te muestro un
trozo de código de un objeto un poco más avanzado.
Tipo de Dato Object
El tipo de dato Object también tiene algunas diferencias en
comparación con JS, veamos cómo se declara este tipo de dato en TypeScript:
Este tipo de objeto se le conoce
como “Objeto Genérico” el cual requiere la declaración de la estructura en
las propiedades que contendrá dicho
objeto y como se muestra en la imagen en el segundo par de llaves se puede
establecer el valor inicial que contendrán las propiedades del objeto.
Para manipular una propiedad del
objeto utilizamos la notación de punto para acceder a cada una de las
propiedades y hacer uso de ellas.
A continuación te muestro un
trozo de código de un objeto un poco más avanzado.
Para descargar este ejemplo en las dos versiones (TS y JS) da clic Aqui.
Una vez que ya vimos cuales son los tipos de datos que existen dentro de TypeScript, te dejo los archivos de los ejemplos que vimos en la versiones de TS y de JS, para que puedas comparar como queda cada uno de los archivos respectivamente.
