#
#

¿Por qué Typescript?

Si estás interesado en el mundo de JavaScript y has visto frameworks como AngularJs, RxJS o NativeScript habrás escuchado hablar de Typescript. Desde que Microsoft lo lanzó en 2012, poco a poco se ha ido adoptando esta tecnología, llegando incluso a que el estándar de JavasCript (ECMAScript) adopte algunas de sus características y cada vez hay más soporte para todas las librerías.

¿Aún no conoces Typescript?, la versión según oficial sería la siguiente:

Typescript es un superconjunto tipificado de JavasCript que compila JavaScript puro.

O dicho en otras palabras, todo JavaScript es válido en Typescript, este sólo te ayuda dándote otras herramientas para mejorar la claridad de tu código, y aparte algunas ayudas extras que comentaré más adelante.

Objetivo principal de Typescript

El objetivo principal de Typescript es el de definir los tipos en el código, es decir, indicar la estructura de cualquier variable o función. Dada la naturaleza de Javascript, las variables pueden contener cualquier valor y cambiar el tipo de valor en cualquier momento (por ejemplo un string en vez de boolean), dificultando la legibilidad del código sobretodo en proyectos grandes. En ejemplo en JavaScript para entendernos mejor sería el siguiente:

var foo = 12;
// ….
foo = ‘boo’;

En TypeScript

let foo = 12;
// ….
foo = ‘boo’; * Error: [ts] Type 'string' is not assignable to type 'number'.

Aunque si que es cierto que definir los tipos ayuda en la detección de bugs antes de que ocurran en producción, no es la única ventaja de TypeScript, ya que como podemos ver en algunos estudios, usar tipos puede reducir como mucho un 15% la cantidad de bugs. Si realmente queremos disminuir la posibilidad de bugs, tendremos que usar TDD (Test-driven Development).

Ventajas de Typescript

  1. Mejora la legibilidad del código
  2. Te fuerza a definir los tipos correctos, pero sin perder la flexibilidad de JavaScript si es necesario en algún punto en concreto de la aplicación
  3. Se puede usar como compilador a otras versiones de Javascript, lo que te permite desarrollar con ES6 y compilarlo en ES5 (más soportado por los navegadores)
  4. Muchas herramientas que ayudan a la arquitectura de una aplicación y a mejores librerías con elementos como los Decorators
  5. No te fuerza a reescribir código antiguo si no es necesario, de hecho puede ayudar a tipificar librerías hechas actualmente en JavaScript para ayudarte a utilizarlas en tu código.
  6. Ayudas con los módulos de NodeJS para tener un código más directo
  7. Muchos editores de código (IDE) traen ayudas para autocompletar código según el código en Typescript
  8. Agrega conceptos de programación orientada a objetos como las interfaces, variables privadas, etc.

Mi primer proyecto con TypeScript

Ahora que conocemos un poco más lo que es typescript, podemos ver algunos ejemplos de código aquí. Para empezar nos abrimos una terminal. Este ejemplo es con NodeJS, así que tendremos que tenerlo instalado previamente, pero nada nos impide escribir JavaScript para navegadores.

$ cd CARPETA_PROYECTO

Creamos un proyecto node

$ npm init -y

Instalamos TypeScript como módulo global

$ npm i -g typescript

Creamos el archivo de configuración de TypeScript: tsconfig.json

$ tsc --init

Este archivo tiene la configuración básica para un proyecto genérico en typescript, pero para proyectos NodeJS es más recomendable la siguiente configuración: tsconfig.json

tsconfig.json

Ahora ya podemos crear nuestro primer archivo .ts, por ejemplo “[CARPETA_PROYECTO]/src/index.ts” poniendo dentro: index.ts

Finalmente ya podemos compilar nuestro código para ejecutarlo:

$ tsc
$ node ./dist/index.js
console: Server running at http://127.0.0.1:1337/

Algunas características interesantes de Typescript

  1. Interfaces: Nos permiten generar una estructura de objetos predefinida.
  2. Genéricos: Ayuda para la definición de las funciones, nos permite indicar qué tipo va a devolver en base a una clase o interfaz que le pasamos como valor a la función.
  3. Enumeraciones: Permite indicar que una variable tiene que tener un valor preestablecido de un conjunto de valores predefinido.
  4. Tipos: Tipos avanzados para definir variables o funciones
  5. Iteradores: Fors más sencillos.
  6. Mixins: Mejora sobre el sistema de herencia de clases.
  7. Decorators: La joya de la corona de TypeScript, nos permite emular el comportamiento de las anotaciones en otros lenguajes como Java, pero hay que tener en cuenta que tienen algunas diferencias.

Cómo seguir evolucionando en TypeScript

Cuando empecemos nuestro primer proyecto con TypeScript nos encontraremos el problema que al instalar una librería con NodeJS por ejemplo, nos dará errores de validación a la hora de intentar utilizarla en nuestro código si no tiene sus tipos definidos apropiadamente, para ello se ha hecho un esfuerzo por la parte de la comunidad de código libre para crear tipos de todas las librerías que podamos llegar a utilizar (Actualmente hay definiciones para 3.453 librerías), se llama DefinitelyTyped. La manera más sencilla de utilizarlo es usa ‘npm i --save @types/[NOMBRE_LIBRERIA]’ , y para buscar el comando específico podemos usar: https://microsoft.github.io/TypeSearch/.

Otra recomendación es familiarizarse con los decorators ya que nos ofrecen herramientas muy interesantes para la arquitectura de aplicaciones grandes of frameworks, un artículo interesate sería: http://blog.wolksoftware.com/decorators-reflection-javascript-typescript.

Como nota aparte, podemos encontrar algunos de los proyectos de código libre más famosos aquí, ya que una buena manera de ver TypeScript en su máximo potencial es investigar en general el código e ir intentando entender las estructuras que nos llamen la atención.

Share: