Cómo montar un entorno de desarrollo para TypeScript

En este tutorial os vamos a enseñar cómo comenzar un proyecto TypeScript desde cero con las herramientas mínimas más actuales.

0. Índice de contenidos

• 1. Entorno
• 2. Introducción
• 3. Instalación y configuración de NodeJS
• 4. Instalación y configuración de Atom-TypeScript
• 5. Creación del proyecto desde cero
• 6. Conclusiones

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil Mac Book Pro 15″ (2,3 Ghz Intel Core i7, 16 GB DDR3)
• Sistema Operativo: Mac OS X El Capitan
• NVM v0.29.0
• NodeJS v0.12.7
• npm 3.3.12
• Atom 1.2.4

2. Introducción

TypeScript ha llegado para quedarse. Para los que no lo conozcan deben saber que es un superset del nuevo estándar de ECMAScript 6, aka ES6, que entre otras cosas añade tipos e interfaces a las numerosas ventajas que aporta ES6 como el concepto de clase, las templates strings, etc.

En este tutorial os vamos a enseñar cómo comenzar un proyecto TypeScript desde cero con las herramientas mínimas más actuales y que más ayudan a abordar este tipo de desarrollos.

Veremos cómo instalar y configurar apropiadamente las herramientas para poder utilizar este lenguaje en los navegadores que actualmente no tienen un soporte ES6 completo, gracias al concepto de transpilador, que permite «compilar» al vuelo nuestro código en TypeScript a código ES5 que es el que actualmente soportan todos los navegadores.

¡Vamos al lío!

3. Instalación y configuración de NodeJS

Para empezar cualquier desarrollo frontend es simplemente imprescindible tener correctamente instalado y configurado NodeJS, que como muchos ya sabrán permite ejecutar Javascript en el servidor, lo que muchos desarrolladores han aprovechado para crear herramientas muy útiles que facilitan todo tipo de desarrollos.

Para instalar NodeJS sea cual sea tu sistema operativo y para tener la flexibilidad de cambiar de versión en cualquier momento, lo más adecuado es instalar NVM (Node Version Manager). Lo podemos hacer fácilmente ejecutando el siguiente script:

> wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

Este script va a descargar nvm de su repositorio de Git y lo va a instalar permitiendo a través de sencillos comandos la instalación de cualquier versión de NodeJS. Para instalar la última versión estable solo tenemos que ejecutar:

> nvm install stable

Lo que instalará la última versión estable y lo que es más importante configura las variables de entorno necesarias para poder ejecutar el comando npm que permite la instalación de las dependencias que vamos a ir necesitando.

NOTA: Es posible que la primera vez que se ejecute el comando si no se tiene un fichero de configuración de variables de entorno .profile o .bash_profile, se muestre un error indicando que se cree uno de estos ficheros y se vuelva a ejecutar el comando. Para asegurarnos la activación de las variables de entorno, vamos a ejecutar:

> nvm alias default stable

Ahora reiniciamos el terminal para activar las nuevas variables de entorno, y estamos listos para crear nuestro primer proyecto con TypeScript. Aunque antes vamos a necesitar un buen editor.

4. Instalación y configuración de Atom-TypeScript

Creo que he probado todas las herramientas que presumen de tener soporte para TypeScript, y las que destacan por encima del resto son WebStorm 11 y Atom con su plugin de TypeScript, que siendo gratuito hace que merezca la pena por encima del IDE de Jetbrains que es de pago.

Atom es un editor multiplataforma que se está haciendo muy popular y buena parte de esta popularidad se la debe a su soporte de TypeScript. Para instalarlo basta con navegar a http://atom.io y descargar la última versión.

Para instalar el mencionado plugin, una vez ejecutado Atom vamos a Settings y allí en «Install» podemos utilizar su buscador para localizar el plugin.

Todo lo que nos queda por hacer es pulsar en «Install».

Otro detalle que ahorra mucho tiempo es establecer la variables de entorno para poder ejecutarlo desde el terminal. Para ello pulsamos en la opción de menú «Install Shell Commands».

5. Creación del proyecto desde cero

Una vez que tenemos instalada y configurada una instancia de NodeJS y Atom en nuestra máquina, es el momento de crear nuestro primer proyecto con TypeScript.

Para ello vamos a seguir utilizando el terminal. Nos posicionamos en el directorio donde queramos almacenar el proyecto, y creamos su directorio raíz de esta forma:

> mkdir tutorial

Accedemos al directorio raíz:

> cd tutorial

Una vez dentro creamos el fichero package.json que va a ser el fichero que va a gestionar la configuración de nuestro proyecto. Añadimos -y para hacer una creación con los valores por defecto.

> npm init -y

Este comando genera el siguiente contenido en el fichero package.json:

{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Este fichero se va a ir autocompletando a medida que vayamos instalando otras dependencias.

Vamos a utilizar la herramienta JSPM que se va a encargar de hacer transparente al desarrollador toda la gestión de librerías necesarias para la implementación del proyecto gracias a SystemJS y nos va a permitir configurar el proyecto para trabajar con TypeScript.

Para instalar esta herramienta solo tenemos que ejecutar en el terminal:

> npm install -g jspm

El modificador -g hace que la dependencia se instale de forma global, es decir, que la dependencia se instale en nuestro ~/.npm y no de forma local, que lo haría dentro de la carpeta node_modules de nuestro proyecto y actualizaría el fichero package.json.

De este modo vamos a utilizar esta herramienta para configurar nuestro proyecto gracias a su asistente el cual podemos ejecutar de este modo:

> jspm init

Con esto el terminal mostrará una serie de preguntas:

• Would you like jspm to prefix the jspm package.json properties under jspm? [yes] → La primera indica si queremos añadir el prefijo jspm en las dependencias que se almacenan en el fichero package.json, que dejamos por defecto porque si nos interesa.
• Enter server baseURL (public folder path) [./]: → La siguiente nos permite establecer la base url del servidor, también la dejamos por defecto.
• Enter jspm packages folder [./jspm_packages]: → La siguiente nos permite cambiar el nombre de la carpeta en la que se almacenan las dependendencias, es buena idea seguir el estándar y dejarlo por defecto.
• Enter config file path [./config.js]: → En la siguiente nos permite decidir donde queremos crear el fichero config.js, lo dejamos por defecto en la raíz del proyecto.
• Configuration file config.js doesn’t exist, create it? [yes]: → nos permite crear el fichero config.js, por defecto, si.
• Enter client baseURL (public folder URL) [/]: → nos permite establecer la url base del cliente, también la dejamos por defecto.
• Do you wish to use an ES6 transpiler? [yes]: → nos pregunta si queremos transpilar el código, lo dejamos por defecto porque definitivamente vamos a necesitar transpilar el código.
• Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:TypeScript → Nos pregunta con que tipo de transpilador, como vamos a trabajar con TypeScript, seleccionamos TypeScript.

El proceso que se ejecuta, nos crea la carpeta «jspm_packages» donde se van a almacenar todos los fuentes de las librerías de nuestro proyecto y el fichero config.js el cual contiene todas las referencias a estas librerías y le sirve a SystemJS para hacer la carga dinámica de librerías y la resolución recursiva de sus dependencias. Es un fichero que irá creciendo muchísimo a medida que vayamos incluyendo librerías en nuestro proyecto. La buena noticia es que solo lo vamos a tener que tocar una vez y prácticamente olvidarnos que existe.

Solo lo vamos a editar para incluir la información de que nuestro proyecto va a estar implementado con TypeScript y que tiene que hacer la transpilación del código. Para ello abrimos el proyecto con Atom ejecutando en el terminal:

> atom .

Lo que abrirá Atom con el proyecto ya establecido y veremos todos los ficheros en el árbol de la izquierda.

Seleccionamos el fichero «config.js» y añadimos la sección que se muestra en negrita:

System.config({
  baseURL: "",
  defaultJSExtensions: true,
  transpiler: "typescript",
  paths: {
    "npm:*": "jspm_packages/npm/*"
  },

  packages: {
    "app": {
      "main": "bootstrap",
      "defaultExtension": "ts"
    }
  },

  map: {
    "typescript": "npm:typescript@1.7.3"
  }
});

Con esta configuración estamos estableciendo que nuestro código fuente se va a encontrar en el paquete «app», que el fichero principal se va a llamar «bootstrap» y que vamos a utilizar la extensión .ts de TypeScript para nuestros ficheros.

A fin de que el proyecto pueda hacer uso de esta configuración vamos a crear el fichero index.html en la raíz del proyecto con la referencia a la librería SystemJS, la ruta donde tiene que encontrar el fichero config.js y el import del módulo que tiene que cargar.

Para ello con el botón derecho sobre la raíz del proyecto, seleccionamos «New File», le damos el nombre de «index.html» y escribimos el siguiente contenido:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tutorial</title>
    <script src="jspm_packages/system.js" charset="utf-8"></script>
    <script src="config.js" charset="utf-8"></script>
    <script type="text/javascript">
      System.import("app")
    </script>
  </head>
  <body>

  </body>
</html>

El nombre del import coincide con el nombre del paquete que hemos establecido en la configuración por tanto cuando arranquemos el proyecto, SystemJS esperará que exista dentro de una carpeta «app» el fichero «bootstrap.ts» con el contenido a ejecutar.

Creamos el directorio «app» con botón derecho sobre la raíz del proyecto «New Folder» y seguidamente creamos el fichero bootstrap.ts con el siguiente contenido de comprobación:

console.log('He cargado correctamente la aplicación')

Para poder ejecutar la aplicación necesitamos un servidor y si además nos proporciona live-reload, es decir que muestra los cambios en el código nada más guardar el fichero pues mucho mejor. Estos requisitos los cumple otra de esas herramientas que instalamos de forma global con NodeJS llamada live-server.

> npm install live-server -g

Una vez acabe el proceso de instalación. Podemos ejecutarla de esta forma:

> live-server

Por defecto, levantará nuestra aplicación en el puerto 8080 pero si éste estuviera ocupado, busca otro de forma aleatoria. Además habréis podido comprobar como también abre el navegador por defecto, en mi caso un Chrome, donde si vamos a las «Developer Tools» vemos que efectivamente se muestra por consola el texto.

Además fijaos que gracias a SystemJS sólo se cargan las librerías que se necesitan y como no hemos utilizado nada de la sintaxis de ES6/Typescript, no se ha transpilado nada.

Si ahora modificamos el contenido de bootstrap.ts con sintaxis ES6/TypeScript como esta:

export class Main{
    constructor(msg:string){
        console.log(msg);
    }
}

var main = new Main('Cargo la clase escrita en Typescript');

Veremos como ahora SystemJS ha necesitado de otras librerías y como tenemos el fichero bootstrap.ts!transpiled con el contenido en sintaxis ES5 que es lo que entiende el navegador.

Ahora en Atom con la combinación de teclas CMD + SHIFT + P (si estás en Mac) y seleccionando la acción «TypeScript: Create Tsconfig.json project file», crearemos el fichero tsconfig.json dentro de la carpeta app.

Este fichero le sirve a Atom para para compilar nuestro código TypeScript y decirnos donde nos hemos equivocado o ayudarnos al refactoring.

Por defecto, lo crea dentro del directorio «app», pero como este fichero lo vamos a utilizar posteriormente para compilar los tests que hagamos, movemos el fichero al raíz del proyecto.

A mi no me gusta tener los ficheros .ts y .js mezclados, así que también defino la propiedad «outDir» para que los archivos transpilados los genere en una carpeta llamada «build».

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "isolatedModules": false,
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true,
        "outDir": "build"
    },
    "filesGlob": [
        "**/*.ts",
        "**/*.tsx",
        "!node_modules/**"
    ],
    "files": [
        "bootstrap.ts"
    ],
    "atom": {
        "rewriteTsconfig": true
    }
}

Este fichero ya no tendremos que tocarlo más, ya que cuando creemos un nuevo fichero con extensión .ts, Atom automáticamente se encarga de actualizar este fichero y realizar su compilado en el directorio «build».

De esta forma siempre que salvemos un cambio en un fichero .ts se generará su correspondiente .js en ES5 a no ser que haya algún error, en cuyo caso será advertido por Atom. Con lo que la mayoría de errores se manifiestan en esta fase de compilación y no en ejecución como hasta ahora. También podemos forzar la compilación de todos los ficheros .ts con la tecla F6.

Por último para la gestión de los ficheros de configuración .d.ts se utiliza la herramienta tsd que al igual que las otras podemos instalar de forma global con el comando.

> npm install -g tsd

Ahora con su comando init podemos crear el fichero tsd.json, que contendrá un enlace a la definición de nuestras dependencias TypeScript y que Atom utilizará para ofrecernos el mejor autocompletado posible.

> tsd init

Lo que creará un fichero tsd.json en la raíz de nuestro proyecto, inicialmente con el siguiente contenido:

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {}
}

Además se crea una carpeta «typings» donde se irán almacenando los ficheros de definición que vayamos necesitando y que automáticamente se irán aglutinando en el fichero tsd.d.ts para que nosotros solo tengamos que hacer referencia a este fichero en nuestro código y no uno por uno a los ficheros de definición que hagamos uso.

6. Conclusiones

Siguiendo estos pasos ya estamos preparados para comenzar cualquier proyecto que queramos implementar aprovechando las ventajas de TypeScript independientemente del framework o librería que queramos utilizar para el desarrollo.

En el próximo tutorial veremos cómo configurar el proyecto para facilitar el uso de TDD gracias a Karma y Jasmine.

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.