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.

9.1. ESLint y Prettier en TypeScript

ESLint es una herramienta que te ayuda a encontrar y solucionar problemas en tu código, asegurando que sigues las mejores prácticas. Prettier, por su parte, es un formateador de código que asegura consistencia en el estilo del código.

Configuración de ESLint en TypeScript:

Instalar ESLint:

1npm install eslint --save-dev

Instalar los plugins para TypeScript: Para que ESLint funcione con TypeScript, necesitas algunos plugins y paquetes adicionales:

1npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Crear archivo de configuración: Crea un archivo .eslintrc.json para definir las reglas y configuraciones de ESLint:

1{
2  "parser": "@typescript-eslint/parser",
3  "parserOptions": {
4    "ecmaVersion": 2020,
5    "sourceType": "module"
6  },
7  "plugins": ["@typescript-eslint"],
8  "extends": [
9    "eslint:recommended",
10    "plugin:@typescript-eslint/recommended"
11  ],
12  "rules": {
13    "@typescript-eslint/no-unused-vars": "warn",
14    "@typescript-eslint/explicit-function-return-type": "off"
15  }
16}

Esto configura ESLint para que use el parser de TypeScript y aplique algunas reglas recomendadas para un código limpio.

Configuración de Prettier en TypeScript:

Instalar Prettier:

1npm install prettier --save-dev

Configurar Prettier: Crea un archivo .prettierrc para definir las reglas de formateo:

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

Integrar Prettier con ESLint: Para evitar conflictos entre ESLint y Prettier, necesitas instalar un plugin adicional:

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

Luego, ajusta tu archivo .eslintrc.json para incluir Prettier:

1{
2  "extends": [
3    "eslint:recommended",
4    "plugin:@typescript-eslint/recommended",
5    "plugin:prettier/recommended"
6  ],
7  "rules": {
8    "prettier/prettier": "error"
9  }
10}

Ahora, ESLint también validará el formateo de código según las reglas de Prettier.

Ejecutar ESLint y Prettier:

Ejecuta ESLint para analizar tu proyecto:

1npx eslint . --ext .ts

Ejecuta Prettier para formatear tu código:

1npx prettier --write .

9.2. 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:

Instalar Webpack y dependencias:

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

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};

Agregar script en package.json:

1"scripts": {
2  "build": "webpack --mode production",
3  "start": "webpack serve --open --mode development"
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.

9.3. 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:

Instalar Jest y dependencias:

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

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

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

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});

Ejecutar las pruebas: Usa el siguiente comando para ejecutar las pruebas:
```
1npx jest
```

Testing con Mocha y Chai:

Instalar Mocha, Chai y dependencias:

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

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}

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});

Ejecutar las pruebas: Ejecuta las pruebas con el siguiente comando:
```
1npm test
```

9.4. 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:

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}
```

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.

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.

**

Resumen del Módulo 9**

En este módulo, aprendiste a configurar herramientas esenciales para el desarrollo en TypeScript, como ESLint y Prettier para el linting y formateo de código. También exploraste cómo configurar Webpack y otros bundlers para gestionar módulos y assets. Vimos cómo realizar pruebas automatizadas con Jest y Mocha, y finalmente, cómo hacer debugging eficiente en proyectos TypeScript utilizando mapas de fuente y editores como Visual Studio Code.

Curso typescript nivel medio