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

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

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:19

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

Curso de Webpack con Express.js, React.js y TypeScript

Clase 5 de 22

Clase 5 / 22

Recursos

¿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

Hace 5 años

++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

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

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

Configuración de API Rest con TypeScript y JSON para Platzi Store

Webpack en el Frontend

Migración y Optimización de Proyectos con Webpack 5

Configuración de Webpack para Desarrollo y Producción en React

Creación de Hooks para Consumo de APIs en React con Axios

"Implementación de Context en React para Gestión de Estado"

Configuración de Alias en Webpack para Proyectos JavaScript

Optimización de Imágenes y Uso de CDN en Proyectos Web

Optimización de Imágenes PNG con Image Minimiser Webpack Plugin

Configuración de TypeScript en React con Webpack

Configuración de Hot Reload en Webpack con React

División de Código con Lazy Loading en React

División de Código con Webpack y Micro Frontend en React

Configuración Avanzada de Webpack para Separar Código y Dependencias

Despliegue

Despliegue de Aplicaciones Web con Netlify y GitHub

Despliegue de API en Heroku con Express y TypeScript

Conexión de un Dominio Personalizado a Netlify y Cloudflare

Migración de Wetpack y Optimización para Producción

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

Progreso del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Recursos

Recursos