Typescript con Node.js

Javascript es un lenguaje muy potente, dinámico y flexible, pero esta flexibilidad puede traernos complicaciones a la hora de trabajar en proyectos grandes.

Es muy importante definir claramente las reglas y procedimientos a seguir para colaborar en la construcción de software pero no sobra apoyarnos en herramientas que faciliten este proceso.

Aquí es donde Typescript toma partido. Typescript es un super-conjunto de Javascript, que añade tipado estático y objetos basados en clases, y que finalmente compila en Javascript plano.

Beneficios de Typescript

• Tipo de datos estático opcional, permite establecer el tipo de datos de las variables, métodos, y parámetros, facilitando entender las entradas y las salidas de nuestros componentes de código. Este tipado es Opcional, permitiendo así no perder la parte dinámica del tipo de datos en Javascript para cuando lo necesitemos.
• Puedes usar las ultimas características de ECMAScript al codificar, generando el Javascript plano en target que requieras.
• Fácil interpretación y apoyo de IntelliSence en el IDE de desarrollo compatible. Por ejemplo VSCode.

Primeros pasos

Antes de empezar, asegurate de tener instalado Node.js en tu sistema para poder ejecutar el código generado.

Básicamente con Typescript debemos escribir el código en un archivo con extensión .ts y el compilador creará su equivalente en formato .js. Typescript no es el código que finalmente se ejecuta sino que luego de compilarlo se ejecuta es el Javascript generado.

Creando el proyecto

Vamos a iniciar creando un folder para el proyecto.

$ mkdir ts-project-1
$ cd ts-project-1

Ahora debemos iniciar el proyecto. Yo voy a usar yarn, pero puedes hacerlo usando npm.

Por ahora dejaré por defecto todos los parámetros de la inicialización del proyecto.

$ yarn init

O

$ npm init

Instalar Typescript en el proyecto

$ yarn add typescript

O

$ npm install -s typescript

Otra Alternativa es instalar Typescript de forma global, pero recomiendo hacerlo directamente en el proyecto ya que si quieres usar los scripts de instalación para publicarlo es mas fácil tenerlo como requisito.

Estructura del proyecto

.
├── dist
├── node_modules
├── package.json
├── src
└── yarn.lock

Además de la carpeta npm_modules y los archivos propios de npm o yarn, vamos a tener un folder llamado src en donde tendremos los archivos .ts. Otro folder llamado dist en donde quedarán los archivos compilados a Javascript Plano.

Configuración de Typescript

El primer archivo que vamos a crear es el de configuración de Typescript. Este archivo se debe llamar tsconfig.json.

En este archivo podremos especificar al compilador de Typescript entre otras cosas el formato que queremos usar para el código generado, (puede ser ES5, ES6, o ES7 …).

Además podemos configurar la ruta de los archivos .ts y la ruta de en donde queremos poner los .js generados.

Para este ejemplo vamos a crear un archivo básico de configuración, si quieres profundizar sobre las opciones te recomiendo leer la documentación de Typescript.

Typescript tsconfig.json overview

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "outDir": "dist",
        "sourceMap": true
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

Probando con el primer archivo .TS

El primer archivo .ts

Vamos a crear un archivo dentro del folder src llamado test1.ts

function sayHello ( name : string ) : string {
    return 'Hi ' + name;
}

console.log( sayHello( 'Diego.' ) );

Este código que vemos es muy parecido al Javascript que conocemos, solo hay un par de cosas nuevas.

En los parámetros de la función tenemos un parámetro llamado name y luego, separado por : vemos el tipo de dato esperado string.

Ahora con esto, al momento de compilar se validará si al llamar a la función sayHello se envía un string en el parámetro name. De lo contrario se generará un error.

Así mismo se validará que el resultado esperado de la función sea también un string, ya que al final de la función definimos el tipo de dato que se debe retornar.

function sayHello ( name : string ) : string

Compilando el archivo de prueba.

Vamos a configurar un comando para compilar los archivos .ts. Para esto dentro de package.json creamos un script con el comando tsc

"scripts": {
    "tsc" : "tsc"
}

Ahora ejecutamos el comando desde la consola,

$ yarn tsc

Luego de ejecutar este comando, vemos como aparecen dos archivos en el folder dist, ya que siguiendo las instrucciones que definimos en tsconfig.json el compilador tomará todos los archivos que encuentre en /src y los convertirá a .js dentro de /dist.

Ejecutando el archivo generado.

En este punto ya tenemos un archivo Javascript plano el cual podemos ejecutar de la forma tradicional con Node.js.

$ node ./dist/test1.js

Ahora puedes hacer una prueba. Modificando el llamado a la función sayHello, cambiando el parámetro por un número.

Reemplaza

console.log( sayHello( 'Diego.' ) );

Por esto

console.log( sayHello( 123 ) );

¿Que pasa?, ¿el IDE te informa de algún error?

Y al compilar.. ¿Que mensaje arroja el compilador?

Proximos pasos

Te invito a que pruebes usar Typescript en tus proyectos. Vas a ver como te facilita y hace más rápida y divertida la creación de tus proyectos.

Puedes encontrar más información en la documentación oficial de Typescript.

En un próximo tutorial, complementaré este ejercicio, creando una aplicación con Express.js usando Typescript.