Introducción a TypeScript – Parte 1


TypeScript es un lenguaje de programación bajo licencia de código abierto, básicamente es un superconjunto de JavaScript, que le añade características tan comunes en otros lenguajes como el tipado de datos y la orientación a objetos.

Fue desarrollado por el líder de C# y tiene una sintaxis muy parecida a C# y Java, es ideal para aquellos desarrolladores que ya conocen estos dos lenguajes.

En TypeScript se han añadido clases, módulos, interfaces, etc. Una vez que se compila se genera código compatible con ECMAScript 3, lo que permite que se ejecute en los navegadores actuales.

También incluye soporte para las ultimas características de JavaScript recogidas en ECMAScript 6 e incluso algunas que están proyectadas para futuras versiones.

En este artículo vamos a enumerar algunas razonas por las que aprender este lenguaje y usarlo en nuestros proyectos, así como revisar algunas características básicas del lenguaje, como pueden ser los tipos, clases, módulos e interfaces.

¿Por qué utilizar TypeScript?

TypeScript es un lenguaje que está experimentando un mayor crecimiento y es de los más populares. Sobre todo debido a la aparición de algunos frameworks como Angular 2 que ha sido reescrito por completo en TypeScript. Además existen otros proyectos que están considerando soportar TypeScript como Ember.js y React de Facebook.

TypeScript es ideal para el mantenimiento de aplicaciones grandes realizadas en JavaScript y las características que implementa, como el tipado estático ayuda a evitar errores que se producen a menudo usando JavaScript.

Además la integración con otras herramientas como Gulp y Grunt, facilita el poder compilar automáticamente el código a JavaScript. Esto nos permite crear aplicaciones con una base de código estructurada y menos propensa a errores. Usándolo podemos acelerar el proceso de desarrollo ya que hace la compilación y el despliegue mucho más sencillo.

Instalar TypeScript

Los ficheros TypeScript (.ts) no pueden leerse directamente por un navegador, por lo que se hace indispensable compilarlos a JavaScript para que funcionen. En este artículo vamos a usar el compilador de TypeScript estándar en línea de comandos y compilaremos los ficheros para generar archivos con JavaScript estándar.

Podemos instalar la última versión del compilador de TypeScript usando el gestor de paquetes npm. Una vez que tengamos instalado el compilador de TypeScript, es necesario comprobar que lo tenemos bien configurado, para ello utilizaremos el parámetro -v (Versión). Es necesario que tengamos instalado Node.js en nuestro equipo, puedes descargarlo desde aquí.

$ npm install -g TypeScript
$ tsc -v
message TS6029: Version 1.8.10

Compilar un fichero TypeScript

Una de las grandes características de TypeScript es que al ser un subconjunto de JavaScript, nosotros podemos escribir código JavaScript y después usar características avanzadas de TypeScript.

Por ejemplo, primero vamos a crear un archivo TypeScript llamado hola-mundo.tsc que contenga el siguiente código.

// hola-mundo.ts
console.log('Hola Mundo');

Este sencillo fragmento imprime por consola la frase "Hola Mundo", podemos compilarlo sin problema.

Declarar tipos en TypeScript

Los tipos son los mismos que en Javacript, la diferencia es que en TypeScript podemos definir el tipo de dato de cada variable. Para asignar el tipo de dato en la declaración, se usa el operador “:” y después el tipo de dato.

var puntuacion: number = 7;

Cuando compilemos el archivo utilizando la línea de comandos tsc fichero.ts, el código generado en JavaScript no contendrá el tipo de dato que hemos puesto en la declaración.

var puntuacion = 7;

El compilador elimina los tipos de datos, ya que no son importantes cuando el código JavaScript se ejecuta, pero son fundamentales durante el tiempo de compilación. La asignación de los tipos de datos de una variable es una de las mejores maneras de detectar errores. Por ejemplo, si asignamos a la variable puntuación una cadena de texto, el compilador nos dará un error útil para saber que ha pasado.

$ tsc fichero.ts 
fichero.ts(3,1): error TS2322: Type 'string' is not assignable to type 'number'.

Esto sucede por que la variable únicamente aceptara un valor del tipo de dato que se ha definido. Si no estamos seguro al declarar una variable el tipo de dato que contendrá, es posible utilizar el tipo any, que explicare más adelante.

Este tipado estático de datos es muy útil ya que al desarrollar en JavaScript se producen errores de programación al no saber el tipo de dato que se está usando, esto provoca que en muchas ocasiones se tenga que hacer una comprobación doble.

if(resultado == 3 || resultado == "3"){
      // Logica
}

Tipos de datos en TypeScript

Los tipos de datos soportados fundamentalmente son los mismos que en JavaScript, con la inclusión del tipo enum, al igual que en otros lenguajes.

Boolean: true/false

let isComplete : boolean = true;

Number: valor estándar, acepta con cualquier número, con punto flotante, reales, decimales, binarios, hexadecimales y octales.

let decimal: number = 6;
let hexadecimal: number = 0xf00d; 
let binario: number = 0b1010; 
let octal: number = 0o744;

Cadena texto: texto con comillas simples o dobles.

let nombre: string = 'Juanjo';

Array: matriz de valores que se define como un vector especificando el tipo de dato seguido de []. Los tipos pueden ser string, number, any, etc.

let listaEdades: number[] = [20, 18, 19, 19, 20];  
let datosCliente: any[] = ['Sergio', 33, true];

Enumerado: Es una forma de nombrar un conjunto de valores numéricos, para que sean más fáciles de usar y referenciar.

enum Contrato { Fijo, Temporal, Estacional};  
var contratoEmpleado : Contrato = Contrato.Fijo;

Any: Si no sabemos del tipo de dato que va a contener una variable, debemos emplearlo. El dato puede venir de una llamada a un servicio web, o una librería de terceros, así que usando este tipo podemos pasar la compilación. Salvo estas excepciones en la mayoría de casos no se recomienda el uso de Any, ya que estaríamos saltándonos el objetivo de la utilización de tipos estáticos en TypeScript.

Void: Es lo opuesto a any, la ausencia de cualquier tipo. Normalmente se utiliza en la respuesta de funciones que tienen que devolver un valor.

function mensajeError(): void {
    alert("Se ha producido un error");
}

Si quieres consultar todos los tipos de datos disponibles en TypeScript puedes ver la documentación oficial.

En la parte 2 veremos mas características del lenguaje.

Deja un comentario