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!

Comentarios

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

Lautaro Bustos

student•

De que nos sirve la libreria "webpack-node-externals" ? Cual es su funcion ? No lo entendi muy bien.

Yosef Enmanuel Blandin Rios

student•

Webpack te permite definir externos: módulos que no deben agruparse. Al empaquetar con Webpack para el backend, generalmente no deseamos empaquetar las dependencias en node_modules. Esta biblioteca crea una función externa que ignora node_modules al empaquetar en Webpack.

Nunca pares de aprender!

Alexis Toro Navarro

student•

Por si tienen problemas con la configuración uwu

Maderkit SA

student•

Si no deseo usar tyscript, ¿Que inconvenientes podria llegar a tener?

Enrique Maya Garcia

student•

Ninguno. El profe lo usa por gusto. Typescript simplemente es un lenguaje de programaciòn basado en javascript y le agrega cosas màs "formales" al lenguaje.

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

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',
         ]
 }

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