Migración de Aplicaciones Node.js a TypeScript paso a paso

Clase 5 de 22 • Curso de Webpack con Express.js, React.js y TypeScript

Contenido del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Tomar examen

Resumen

¿Cómo migrar una aplicación a TypeScript?

Al migrar una aplicación a TypeScript, no solo mejoramos la mantenibilidad del código con tipos más fuertes, sino que también minimizamos los errores en tiempo de desarrollo. Este proceso puede resultar un tanto intimidante al principio debido a la necesidad de modificar varias configuraciones. Sin embargo, estos pasos ayudarán a convertir una aplicación JavaScript existente en una aplicación TypeScript eficiente.

¿Qué necesitas para empezar la migración?

Instalación de dependencias:
- Asegúrate de tener Node.js y npm instalados en tu entorno de desarrollo.
- Ejecuta el siguiente comando en la terminal para instalar TypeScript y otras herramientas necesarias:
```
npm install typescript ts-loader @types/express --save-dev
```
- Estas dependencias incluyen TypeScript, el loader ts-loader para Webpack y los tipos de Express.
Renombrar archivos a la extensión '.ts':
- Cambia la extensión de tus archivos de .js a .ts para que TypeScript pueda compilar el código adecuadamente.

¿Cómo configurar Webpack para TypeScript?

Es necesario ajustar la configuración de Webpack para lograr una integración fluida con TypeScript. Sigue estos pasos:

Configuración básica del entorno y variables: Crear un archivo .env para definir las variables de entorno, lo que te permitirá establecer el modo y el puerto de tu aplicación como se muestra a continuación:
```
PORT=3005
NODE_ENV=development
```

Modificar las extensiones en la configuración de Webpack:

Asegúrate de incluir .ts en las extensiones a reconocer por Webpack y crear el loader específico para TypeScript:

const nodeExternals = require('webpack-node-externals');

module.exports = {
  // otras configuraciones...
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  externals: [nodeExternals()]
};

¿Cómo configurar el archivo tsconfig.json?

Uno de los archivos más importantes al trabajar con TypeScript es tsconfig.json. Es aquí donde defines la configuración para el compilador TypeScript:

Crear y configurar tsconfig.json:

Este archivo debe contener al menos las siguientes opciones para asegurarte de que TypeScript pueda compilar tu proyecto adecuadamente:

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

¿Cómo verificar el funcionamiento de la aplicación?

Una vez hayas configurado todo, es importante verificar que la aplicación corra sin problemas:

Pruebas en modo desarrollo:
- Ejecuta el proyecto en modo desarrollo con el comando:
```
npm run dev
```
- Accede a localhost:3005 para asegurarte de que la aplicación responde adecuadamente.
Construir para producción:
- Para preparar la aplicación para producción, ejecuta:
```
npm run build
```
- Revisa que la carpeta dist contenga los archivos correctamente optimizados para producción.

Con estas configuraciones y pasos, tu aplicación debería estar correctamente migrada a TypeScript, aprovechando todas las ventajas que esta herramienta ofrece en cuanto a seguridad y escalabilidad. ¡Ánimo y a seguir mejorando tus habilidades de desarrollo!

Paolo Joaquin Pinto Perez

student•

++Configuración de TypeScript++

Typescript npm:

npm install typescript ts-loader @types/express -D

Cambiamos la extensión de src/index.js a index.ts: Adaptamos Index a typescript:

import * as express from 'express';
import { Request, Response } from 'express';

const app = express();
const port = 3000;

app.get('/', (req: Request, res: Response) => {
    res.send('Hello Typescript')
});

app.listen(port, () => {
    console.log(`App listening on port: ${port}`);
})

Creamos en la raiz el archivo .env (variables de entorno). .env :

POST=3005
NODE_ENV=development

En Webpack.config.js

const path = require('path');
// path: la ubicacion del proyecto
const NODE_ENV = process.env.NODE_ENV;
const PORT = process.env.PORT;
...
module.exports = {
    name: 'express-server',
// ACTUALIZAMOS LA EXTENSIÓN DE INDEX
    entry: './src/index.ts',
    target: 'node',
// AÑADIMOS: mode
    mode: NODE_ENV,
// en resolve:
 extensions: ['.ts','.js']
// en rules añadimos
{
        test: /\.ts$/,
        use: [
            'ts-loader',
         ]
 }

Creamos el archivo tsconfig.json:

{
    "compilerOptions": {
        "sourceMap": true,
    }
}

Por ultimo instalamos:

npm install webpack-node-externals -D

Añadimos en webpack.config.js:

const path = require('path');
const nodeExternals = require('webpack-node-externals');
....
module.exports = {
    mode: NODE_ENV,
    externals: [nodeExternals()],
}

y npm run build

Migración de Aplicaciones Node.js a TypeScript paso a paso

Introducción

Migración y Configuración Avanzada de Webpack 5 con TypeScript

Configuración y Optimización de Proyectos con Webpack y TypeScript

Webpack en el Backend

Configuración Básica de Express y Webpack para Proyectos Node.js

Configuración de Webpack para Proyectos con Express