Typescript: ¿Merece la pena usarlo?

Si quereis iniciar un proyecto con Angular 2, primero tendréis que saber qué es Typescript.

Este es mi caso actual, por lo que me encuentro en periodo de aprendizaje de Typescript y todo lo que ello conlleva.

Comencé, con un curso de Udemy donde explican conceptos básicos del lenguaje, cómo compilar, como usar módulos, decorators …

Una vez terminado el curso, decidí crearme un entorno de trabajo en donde hacer ejercicios con todos los conceptos aprendidos. Es entonces donde me di cuenta que no todo es de color de rosa.  Enseguida os cuento por qué

typescript

Creando mi entorno de trabajo con Typescript

Lo primero que hice fue instalarlo de forma global en mi ordenador

npm install -g typescript

Después instale la dependencia gulp-typescript para automatizar las compilaciones desde gulp

npm install gulp-typescript --save-dev

Y para trabajar comodamente en Atom, me instale un plugin para trabajar con ficheros .ts (la extension de typescript)

apm install atom-typescript 

gulpfile.js

Quiero automatizar las compilaciones de mis ficheros de typescript y que me genere los respectivos en javascript.


var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("default", function () {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest("dist"));
});

En esta tarea de gulp, le estamos diciendo que el proyecto se tiene que compilar con las propiedades definidas en tsconfig.json.

El resultado deberá ir a la carpeta dist.

De esta manera consigo tener mis fuentes en typescript y el resultado compilado en javascript aislado.

Pero, os preguntareis …  ¿cómo sabe el compilador  de qué manera generar javascript? Pues para eso está el fichero tsconfig.json

tsconfig.json

Teneis documentado en la pagina oficial de typescript, todos los parámetros admitidos.

Os comento los que he utilizado:

  • include/exclude : le indicamos al compilador qué debe compilar y que no debe compilar
  • files : otra forma de indicar uno a uno los ficheros a compilar
  • compilerOptions: es opcional y si no lo informamos, compilará con los valores por defecto

main.ts y main.js

Vamos a probar que esto funciona, creando un hola mundo en un fichero main.ts

Es una funcion   helloWorld a la que le pasamos una variable de tipo String


function helloWorld(compiler: string) {
    console.log(<code>Hello from ${compiler}</code>);
}

helloWorld(&quot;TypeScript&quot;);

Si lanzamos nuestra tarea gulp, veremos que se genera en la carpeta dist del proyecto, un fichero main.js con el resultado compilado


function helloWorld(compiler) {
    console.log("Hello from " + compiler);
}
helloWorld("TypeScript");

El concepto de Types

El compilador de typescript es capaz de tratar javascript nativo. Sin embargo existen frameworks y librerías que extienden el lenguaje y que no son comprensibles para typescript.

Para ello necesitamos un fichero de definición que contenga la librería que queramos usar. Los ficheros de definición llevan extensión .d.ts

Hasta hace unos meses, se utilizaba TSD como gestor de ficheros de definición pero ha quedado deprecado. Asi podeis verlo en la página del repositorio (github TSD).

En su lugar nos recomiendan usar Typings para gestionar nuestros ficheros de definición.  Sin embargo se empiezan a escuchar campanas para que dejemos de usar Typings y busquemos los ficheros de definición dentro de npm

Yo os voy a contar la pelicula usando typings. Lo primero que hacemos es instalarlo


npm install -g typings

Añadimos un fichero typings.json a la raiz de nuestro proyecto, donde se irán recogiendo todas las definiciones que se vayan añadiendo.

Por ejemplo, vamos  a buscar e instalar  la definición de lodash


typings install lodash --save

Esto generará una carpeta typings y dentro almacenará los ficheros necesarios para trabajar con lodash.

Independientemente del gestor de ficheros de definición que se termine usando (TSD, Typings, npm), necesitamos los types.

Vamos a importar el módulo generado para poder usar lodash en nuestros ficheros de typescript. Y añadimos alguna función usando sintaxis de lodash


import * as _ from &quot;lodash&quot;;

function helloWorld(compiler: string) {
    console.log(<code>Hello from ${compiler}</code>);
}

helloWorld(&quot;TypeScript&quot;);

 

 

Mis impresiones sobre typescript …

Lo que me gusta

  • Se evitarán muchísimos errores al ser un lenguaje tipado
  • Se simplifica muchísimo la sintaxis a la hora de crear clases, objetos …
  • Tengo todas las herramientas que me ofrece un lenguaje orientado a objetos
  • La curva de aprendizaje es muy pequeña si estás acostumbrado a trabajar con POO

 

Lo que no me gusta

  • Incertidumbre de lo rápido que evoluciona  javascript. Tengo 3 formas de bajarme los types (tsd, typings y npm).
  • Los types. Cada vez que quiera meter librerías externas de javascript necesito su fichero de definición y tener cuidado que las versiones estén sincronizadas.

Os pongo un ejemplo con lodash y sus types

Fichero .d.ts : version 4.14.58

Version de lodash : 4.17.4

En este caso, typescript me está obligando a usar la versión 4.14 de lodash ya que no se liberan versiones al mismo tiempo

Resumiendo

Si tuviera que usar Typescript en un proyecto real, no se si me atrevería a usarlo …

Post By Rocio Muñoz (35 Posts)

Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.

Connect

3 Responses to “Typescript: ¿Merece la pena usarlo?”

  1. Luis Pedraz
    27 marzo, 2017 at 3:57 pm #

    Hola,
    hace tiempo que vengo pensando en el salto de Angular 1 al 2, y cada vez tengo más dudas. Leyendo tu artículo se confirman algunas sospechas, y es que creo que falta una implantación con proyectos “reales”, casi todos los ejemplos que se ven son piezas divulgativas, como si no acabará de arraigar el cambio en la comunidad. Y si no se usa en proyectos reales, es que algo va mal.
    Habrá que seguir atentos a la evolución.
    Gracias por el artículo!

    • Rocio Muñoz
      27 marzo, 2017 at 9:15 pm #

      A mi me falta un largo recorrido con Angular 2 y Typescript.
      Empecé con ganas …
      Hay alternativas a typescript por las que se está decantando la gente como por ejemplo Kotlin.

      Tendremos este mes de abril una charla de Kotlin en CodersCantabria para el que le interese

      https://betabeers.com/event/coders-cantabria-abril-2017-5222/

Trackbacks/Pingbacks

  1. HTML5 Video y las opciones que soporta para gestion de video - 1 septiembre, 2017

    […] Visita nuestra entrada con información de Typescript: Typescript […]

Deja un comentario

Leave your opinion here. Please be nice. Your Email address will be kept private.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Translate »