Como empezar un proyecto de Nodejs usando Typescript

Typescript es un lengutaje muy util para mejorar la forma de excribir nuestro codigo JavaScript. Por defecto Node trabaja con JavaScript, por lo que para que TypeScript pueda funcionar en Node, es necesario realizar ciertas configuraciones.

Aca veremos como crear un punto de partida para un proyecto Nodejs. Desde cero.

Primero creamos un directorio/carpeta en cualquier lugar de nuestro S.O. Y accedemos a dicha carpeta

Yo estare usando Windows10.

mkdir project-name && cd project-name/

Listo, ahora vamos a iniciar un projecto node en nuestra carpeta. Esto se hace creando un archivo package.json en la raiz del proyecto(dentro de la carpeta del projecto).

Esto lo hacemos con el siguiente comando

npm init -y

Este comando nos creara un archivo package.json con un contenido basico. Similar al siguiente:

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

Ahora debemos instalar TypeScript de manera global en el S.O. y tambien de manera local en el proyecto.

Para instalarlo de manera global sera necesario ejecutar la consola/terminal con permisos de administrador.

npm i -g typescript

De manera local como dependencia de desarrollo:

npm i typescript --save-dev

Nuestro archivo package.json deberia quedar asi:

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "example_user",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.9.4"
  }
}

Perfecto, con esto tenemos typescript instalado en el S.O. y en nuestro proyecto. esto nos permite usar el compilador de TypeScript(TypeScript Complier) en nuestra terminal.

tsc

Listo, ahora debemos crear el archivo de configuracion de Typescript:

tsc --init

Este comando nos creara un archivo llamado tsconfig.json. Este es un archivo de configuracion que indicara al compilador de TypeScript como debe compilar nuestros archivos .ts de nuestra aplicacion.

Aparareceran muchas opciones comentadas. De todas las opciones, vamos a descomentar las siguientes:

"moduleResolution": "node",
"sourceMap": true,
"outDir": "./dist",

Cada opcion tiene un comentario que explica su funcionamiento y que es lo que hacen.

Ahora creamos un archivo index.ts de prueba en la raiz de nuestro proyecto. Este archivo es necesario porque en nuestra aplicacion debe haber al menos un archivo .ts sino el compilador no encontrara nada que compilar.

// index.ts
export const nombre = 'Test'

console.log(nombre)

Listo, con esto ejecutamos el compilador de TypeScript:

tsc

Esto leera el archivo de configuracion y compilara la aplicacion, dejando el resultado de la compilacion en una nueva carpeta llamada ./dist.

Y dentro de la carpeta dist un archivo llamado index.js, que contendra el resultado de la compilacion de nuestra aplicacion.

Importante: Cada vez que realicemos algun cambio en el codigo, o algun cambio en un archivo .ts y querramos ver el resultado, sera necesario compilar con el comando tsc.

Ahora vemos si todo funciono. ejecutamos el siguiente comando

node ./dist/index.js
// output: Test

Y LISTO!

Tenemos nuestro proyecto node configurado para trabajar con TypeScript!

Ahora a crear algo increible!

BONUS!

Podemos agrergar un linter para agregar reglas adicionales a nuestro proyecto. estas reglas nos ayudaran a que todo el equipo trabaje con las mismas condiciones y mismos estandares.

Instalmos una nueva dependencia en nuestro proyecto

npm i tslint --save-dev

Una vez instalada la dependencia, creamos un archivo de configuracion para tslint. Ejecutamos el siguiente comando.

./node_modules/.bin/tslint --init

Esto nos deberia crear un archivo llamado tslint.json en la raiz de nuestro projecto. Aqui vamos a agregar una configuracion adicional. Y quedara nuestro archivo de la siguiente manera:

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "no-console": false
    },
    "rulesDirectory": []
}

Lo que hicimos fue agregar una regla(rule), que indica que no se mostraran los errores en la consola.

Perfecto!