DEV Community

Rubén Aguilera Díaz-Heredero
Rubén Aguilera Díaz-Heredero

Posted on

Montar proyecto NodeJS con TypeScript

Introducción

En este tutorial vamos a crear un proyecto de cero que esté preparado para trabajar con TypeScript.

Vamos al lío

Configuración inicial con TypeScript

Lo primero será crear una carpeta para nuestro proyecto y situarnos dentro:

$> mkdir ts-playground
$> cd ts-playground
Enter fullscreen mode Exit fullscreen mode

Ahora dentro de la carpeta inicializamos el proyecto con Node:

$> npm init -y
Enter fullscreen mode Exit fullscreen mode

E instalamos la dependencia de TypeScript para desarrollo:

$> npm install --save-dev typescript
Enter fullscreen mode Exit fullscreen mode

Creamos el fichero tsconfig.json con los valores por defecto:

$> npx tsc --init
Enter fullscreen mode Exit fullscreen mode

Y editamos el fichero tsconfig.json recién creado para dejarlo con las siguientes propiedades:

{
 "compilerOptions": {
  "target": "es5",
   "module": "commonjs",
   "outDir": "./dist",
   "rootDir": "./src",
   "strict": true,
   "noImplicitAny": true,
   "strictNullChecks": true,
   "esModuleInterop": true,
   "skipLibCheck": true,
   "forceConsistentCasingInFileNames": true
},
 "exclude": [
   "node_modules",
   "**/*.spec.ts"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Creamos la carpeta src donde vamos a tener nuestros ficheros *.ts

$> mkdir src
Enter fullscreen mode Exit fullscreen mode

Editamos el fichero package.json para incluir los siguientes scripts:

"scripts": {
   "build": "tsc --build tsconfig.json",
   "build:watch": "tsc --build tsconfig.json --watch"
},
Enter fullscreen mode Exit fullscreen mode

Probamos que la build se genera correctamente creando el fichero src/calc.ts con el siguiente contenido (src/calc.ts):

export class Calc {
 add (a: number, b: number): number {
   return a + b
 }
}
Enter fullscreen mode Exit fullscreen mode

Ahora ejecutamos:

$> npm run build
Enter fullscreen mode Exit fullscreen mode

Y tenemos que ver que el fichero dist/calc.js se genera correctamente.

Configuración de Jest

Para la integración con Jest vamos a instalar las siguientes dependencias de desarrollo:

$> npm install --save-dev jest ts-jest @types/jest
Enter fullscreen mode Exit fullscreen mode
  • jest - Es el test runner
  • ts-jest - Es un preprocesador de Jest para TypeScript
  • @types/jest - Es la librería de definición de tipos de Jest

Para la configuración de Jest vamos a crear en la raíz del proyecto el fichero jest.config.js con el siguiente contenido:

module.exports = {
 roots: [
   "<rootDir>/src"
 ],
 testMatch: [
   "**/__tests__/**/*.+(ts|tsx|js)",
   "**/?(*.)+(spec|test).+(ts|tsx|js)"
 ],
 transform: {
   "^.+\\.(ts|tsx)$": "ts-jest"
 },
 collectCoverageFrom: [
   "**/*.{js,jsx,ts,tsx}",
   "!**/*.d.ts",
   "!**/node_modules/**",
 ],
 globals: {
   "ts-jest": {
     tsconfig: "tsconfig.json",
   },
 },
}
Enter fullscreen mode Exit fullscreen mode

Y para poder ejecutar los test, editamos los scripts del fichero package.json para añadir:

"test": "jest --coverage"
Enter fullscreen mode Exit fullscreen mode

Para probar la ejecución de los test vamos a crear el fichero src/calc.spec.ts con el siguiente contenido:

import { Calc } from './calc'

describe('Calc', () => {
 test('should return 10 for add(6, 4)', () => {
   expect(new Calc().add(6, 4)).toBe(10)
 })
 test('should return 9 for add(10, -1)', () => {
   expect(new Calc().add(10, -1)).toBe(9)
 })
})
Enter fullscreen mode Exit fullscreen mode

Y ejecutamos:

$> npm run test
Enter fullscreen mode Exit fullscreen mode

Configuración de ESLint

La integración con ESLint nos permite definir una guía de estilo única en nuestro proyecto que será respetada por todas las personas que trabajen en él. Necesitamos las siguientes dependencias:

$> npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
Enter fullscreen mode Exit fullscreen mode

Ahora para configurar las opciones, tenemos que ejecutar el siguiente comando y contestar a una serie de preguntas:

$> npx eslint --init
Enter fullscreen mode Exit fullscreen mode
  • How would you like to use ESLint?
    • To check syntax, find problems, and enforce code style
  • What type of modules does your project use?
    • JavaScript modules (import/export)
  • Which framework does your project use?
    • None of these
  • Does your project use TypeScript?
    • Yes
  • Where does your code run? (Seleccionar son la barra espaciadora)
    • Node
  • How would you like to define a style for your project?
    • Answer questions about your style
  • What format do you want your config file to be in?
    • JavaScript
  • What style of indentation do you use?
    • Spaces
  • What quotes do you use for strings?
    • Single
  • What line endings do you use?
    • Unix
  • Do you require semicolons?
    • Yes

Lo que creará un fichero .eslintrc.js en la raíz de proyecto con el siguiente contenido:

module.exports = {
   'env': {
       'es2021': true,
       'node': true,
       'jest': true
   },
   'extends': [
       'eslint:recommended',
       'plugin:@typescript-eslint/recommended'
   ],
   'parser': '@typescript-eslint/parser',
   'parserOptions': {
       'ecmaVersion': 12,
       'sourceType': 'module'
   },
   'plugins': [
       '@typescript-eslint'
   ],
   'rules': {
       'indent': [
           'error',
           4
       ],
       'linebreak-style': [
           'error',
           'unix'
       ],
       'quotes': [
           'error',
           'single'
       ],
       'semi': [
           'error',
           'always'
       ]
   }
};
Enter fullscreen mode Exit fullscreen mode

Nota: añadimos jest a env para evitar problemas a la hora de chequear los archivos de test. Y añadimos la siguiente línea a los scripts del package.json:

"lint": "eslint ./src --ext .ts"
Enter fullscreen mode Exit fullscreen mode

Para realizar la integración con el IDE para que nos pueda avisar de los errores y corregirlos al salvar vamos a editar las settings de Visual Studio Code para añadir las siguientes:

/**
   ----- Linting configurations
 */
 // Prevent editor formatting on save for certain file types
 "editor.formatOnSave": true,
 "[javascript]": {
   "editor.formatOnSave": false,
 },
 "[typescript]": {
   "editor.formatOnSave": false,
 },
 // Configure eslint to report + fix errors for correct file types
 "editor.formatOnPaste": true,
 "eslint.autoFixOnSave": true,
 "eslint.validate": [
   "javascript",
   {
     "language": "javascript",
     "autoFix": true
   },
   {
     "language": "typescript",
     "autoFix": true
   }
 ],
Enter fullscreen mode Exit fullscreen mode

Configuración de Husky

Para forzar ciertas acciones a la hora de hacer commit o pushear cambios utilizamos la librería husky, para lo que tenemos que añadir la siguiente dependencia de desarrollo:

$> npm install --save-dev husky
Enter fullscreen mode Exit fullscreen mode

Inicializamos git en el proyecto:

$> git init
Enter fullscreen mode Exit fullscreen mode

Creamos el fichero .gitignore con el siguiente contenido:

node_modules/
coverage/
dist/
Enter fullscreen mode Exit fullscreen mode

Inicializamos husky:

$> npx husky install
Enter fullscreen mode Exit fullscreen mode

Configuramos husky para ejecutar el script de lint antes de hacer un commit:

$> npx husky add .husky/pre-commit "npm run lint"
Enter fullscreen mode Exit fullscreen mode

Para ejecutar los test antes de hacer push:

$> npx husky add .husky/pre-push "npm run test"
Enter fullscreen mode Exit fullscreen mode

Y para no permitir mensajes de commit que no cumplan con Conventional Commits, para ello vamos a instalar las siguientes dependencias:

$> 
npm install --save-dev commitlint @commitlint/config-conventional
Enter fullscreen mode Exit fullscreen mode

Editamos el fichero package.json para añadir la siguiente sección:

"commitlint": {
 "extends": "@commitlint/config-conventional"
},
Enter fullscreen mode Exit fullscreen mode

Y, por último, añadimos el siguiente hook con husky:

$>  npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
Enter fullscreen mode Exit fullscreen mode

Configuración para debugger

A fin de poder hacer debug con Visual Studio Code necesitamos añadir la propiedad “sourceMap” a true en el fichero tsconfig.json del proyecto, pudiendo quedar de esta forma:

{
"compilerOptions": {
 "target": "es5",
  "module": "commonjs",
  "outDir": "./dist",
  "rootDir": "./src",
  "strict": true,
  "noImplicitAny": true,
  "strictNullChecks": true,
  "esModuleInterop": true,
  "skipLibCheck": true,
  "forceConsistentCasingInFileNames": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "sourceMap": true
},
"exclude": [
  "node_modules",
  "**/*.spec.ts"
 ]
}
Enter fullscreen mode Exit fullscreen mode

y configurar el fichero .vscode/launch.json con el siguiente contenido:

{
   "version": "0.2.0",
   "configurations": [
       {
           "type": "node",
           "request": "launch",
           "name": "Launch Program",
           "program": "${workspaceRoot}/dist/server.js",
           "cwd": "${workspaceRoot}",
           "sourceMaps": true,
           "outFiles": [
               "${workspaceFolder}/dist/**/*.js"
           ]
       }
   ]
}
Enter fullscreen mode Exit fullscreen mode

De esta forma podemos poner puntos de ruptura en nuestro código para que la ejecución se detenga y podamos inspeccionar el contexto de ejecución con Visual Studio Code.

Top comments (0)