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é

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 "lodash";

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 (37 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