Herramientas de Desarrollo

Este módulo te ayudará a configurar y utilizar herramientas clave que mejoran la calidad del código y facilitan el desarrollo en TypeScript. Aprenderás a integrar linters, formateadores, bundlers y herramientas de testing y debugging, lo que permitirá que tus proyectos sean más robustos, legibles y fáciles de mantener.

1. ESLint y Prettier en TypeScript #

ESLint es la herramienta estándar para detectar y corregir problemas de calidad de código y buenas prácticas. Prettier es un formateador de código que garantiza consistencia de estilo.

Configuración moderna de ESLint (Flat Config en ESLint 9+ y TypeScript):

1. Instalar dependencias:

   1npm install eslint typescript-eslint prettier eslint-config-prettier --save-dev

2. Crear archivo de configuración moderno (eslint.config.mjs o eslint.config.ts):

   1import tseslint from 'typescript-eslint';
   2import prettierConfig from 'eslint-config-prettier';
   3
   4export default tseslint.config(
   5  tseslint.configs.recommended,
   6  prettierConfig,
   7  {
   8    rules: {
   9      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
   10      '@typescript-eslint/explicit-function-return-type': 'off',
   11    },
   12  }
   13);

3. Configuración de Prettier (.prettierrc):

   1{
   2  "semi": true,
   3  "singleQuote": true,
   4  "trailingComma": "all"
   5}

4. Ejecutar linters y formateadores:

   • Analizar el proyecto con ESLint:

     1npx eslint .

   • Formatear todo el código con Prettier:

     1npx prettier --write .

Configuración de Webpack y otros bundlers #

Webpack es un bundler que empaqueta todos los módulos de tu proyecto (JavaScript, TypeScript, CSS, imágenes, etc.) en un solo archivo o conjunto de archivos que pueden ser utilizados en producción.

Configuración básica de Webpack para TypeScript:

1. Instalar Webpack y dependencias:

   1npm install webpack webpack-cli webpack-dev-server typescript ts-loader --save-dev

2. Crear archivo de configuración webpack.config.js:

   1const path = require('path');
   2
   3module.exports = {
   4  entry: './src/index.ts',  // Archivo de entrada
   5  module: {
   6    rules: [
   7      {
   8        test: /\.ts$/,  // Aplica el loader a archivos .ts
   9        use: 'ts-loader',
   10        exclude: /node_modules/
   11      }
   12    ]
   13  },
   14  resolve: {
   15    extensions: ['.ts', '.js'],  // Resuelve archivos .ts y .js
   16  },
   17  output: {
   18    filename: 'bundle.js',
   19    path: path.resolve(__dirname, 'dist'),  // Carpeta de salida
   20  },
   21  devServer: {
   22    contentBase: './dist',
   23  },
   24};

3. Agregar script en package.json:

   1"scripts": {
   2  "build": "webpack --mode production",
   3  "start": "webpack serve --open --mode development"
   4}

4. Ejecutar Webpack: Para compilar el proyecto, usa el comando:

   1npm run build

   Para iniciar el servidor de desarrollo:

   1npm run start

Parcel y Vite son alternativas modernas a Webpack que ofrecen tiempos de compilación más rápidos con configuraciones más sencillas, especialmente para proyectos que no requieren configuraciones complejas.

Testing con TypeScript (Jest, Mocha) #

El testing es una parte esencial del desarrollo de software, y TypeScript facilita el proceso con soporte para varias bibliotecas de testing como Jest y Mocha.

Testing con Jest: #

1. Instalar Jest y dependencias:

   1npm install jest ts-jest @types/jest --save-dev

2. Configurar Jest: Crea un archivo de configuración jest.config.js:

   1module.exports = {
   2  preset: 'ts-jest',
   3  testEnvironment: 'node',
   4};

3. Escribir pruebas: Crea un archivo de prueba suma.test.ts:

   1import { sumar } from './suma';
   2
   3test('sumar 1 + 2 es igual a 3', () => {
   4  expect(sumar(1, 2)).toBe(3);
   5});

4. Ejecutar las pruebas: Usa el siguiente comando para ejecutar las pruebas:

   1npx jest

Testing con Mocha y Chai: #

1. Instalar Mocha, Chai y dependencias:

   1npm install mocha chai ts-node @types/mocha @types/chai --save-dev

2. Configurar Mocha: Agrega el siguiente script en package.json para ejecutar Mocha con TypeScript:

   1"scripts": {
   2  "test": "mocha --require ts-node/register 'test/**/*.ts'"
   3}

3. Escribir pruebas con Mocha y Chai: Crea un archivo de prueba suma.test.ts:

   1import { expect } from 'chai';
   2import { sumar } from '../src/suma';
   3
   4describe('Función sumar', () => {
   5  it('debería retornar 3 al sumar 1 + 2', () => {
   6    expect(sumar(1, 2)).to.equal(3);
   7  });
   8});

4. Ejecutar las pruebas: Ejecuta las pruebas con el siguiente comando:

   1npm test

Debugging en TypeScript #

El debugging es una parte fundamental del desarrollo, y TypeScript facilita el proceso mediante herramientas que se integran con editores como Visual Studio Code (VS Code).

Configuración de debugging en VS Code: #

1. Compilar con mapas de fuente (source maps): Los mapas de fuente permiten que el navegador o Node.js rastree los errores de un archivo .js compilado al archivo .ts original.

   Configura tu archivo tsconfig.json para generar mapas de fuente:

   1{
   2  "compilerOptions": {
   3    "sourceMap": true
   4  }
   5}

2. Configurar archivo launch.json en VS Code: Para depurar tu proyecto TypeScript en VS Code, crea el archivo .vscode/launch.json:

   1{
   2  "version": "0.2.0",
   3  "configurations": [
   4    {
   5      "type": "node",
   6      "request": "launch",
   7      "name": "Iniciar programa",
   8      "skipFiles": ["<node_internals>/**"],
   9      "program": "${workspaceFolder}/src/index.ts",
   10      "preLaunchTask": "tsc: build - tsconfig.json",
   11      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
   12    }
   13  ]
   14}

   Este archivo te permitirá depurar código TypeScript directamente desde VS Code. Puedes establecer puntos de interrupción (breakpoints) y revisar el estado de las variables durante la ejecución.

3. Iniciar el depurador: Presiona F5 en VS Code para iniciar la depuración de tu aplicación TypeScript. El depurador se detendrá en cualquier punto de interrupción que hayas configurado, permitiéndote inspeccionar el estado del programa.