En este módulo, aprenderás cómo integrar JavaScript en proyectos TypeScript, migrar código JavaScript existente a TypeScript y gestionar la compatibilidad entre ambos lenguajes. Esto es clave para trabajar con bibliotecas de JavaScript que no estén escritas en TypeScript y para adoptar TypeScript gradualmente en proyectos de JavaScript.

8.1. Uso de librerías JavaScript en proyectos TypeScript

TypeScript es un superconjunto de JavaScript, lo que significa que todo código JavaScript válido también es un código válido en TypeScript. Sin embargo, para aprovechar las ventajas de TypeScript (como el tipado estático), debes saber cómo manejar librerías JavaScript en tus proyectos.

Pasos para usar librerías JavaScript en TypeScript:

1. Instalar la librería: Instala la librería de JavaScript como lo harías normalmente.

   1npm install lodash

2. Instalar las definiciones de tipo: Algunas librerías no están escritas en TypeScript pero tienen un archivo de tipos disponible. Estos archivos proporcionan la información de tipos que TypeScript necesita para trabajar correctamente con la librería.

   1npm install @types/lodash --save-dev

3. Importar y usar la librería: Ahora puedes importar y usar la librería en tu proyecto TypeScript con tipado estático.

Ejemplo usando lodash:

1import _ from "lodash";
2
3let numeros = [1, 2, 3, 4];
4let suma = _.sum(numeros);
5
6console.log(`Suma: ${suma}`);  // "Suma: 10"

Si la librería no tiene definiciones de tipo: Si la librería no tiene definiciones de tipo disponibles en @types, puedes usar el tipo any como una solución temporal o crear tus propias definiciones de tipos.

Ejemplo sin tipos (any):

1const libreria: any = require('libreria-sin-tipos');
2
3libreria.funcion();  // No hay ayuda de autocompletado ni validación de tipos

Creando tus propias definiciones de tipo: Puedes crear un archivo *.d.ts para declarar los tipos de la librería manualmente.

1// archivo: libreria-sin-tipos.d.ts
2declare module 'libreria-sin-tipos' {
3  export function funcion(): void;
4}

Ahora, TypeScript reconocerá los tipos definidos.

8.2. Migración de código JavaScript a TypeScript

Migrar un proyecto JavaScript a TypeScript es un proceso incremental que se puede hacer paso a paso. Aquí tienes algunas estrategias clave para migrar tu código JavaScript existente a TypeScript.

1. Cambiar la extensión de los archivos: El primer paso es cambiar la extensión de tus archivos .js a .ts. Esto permite que TypeScript analice el archivo, incluso si no tienes tipado explícito todavía.

Ejemplo: Cambia app.js a app.ts. TypeScript aún aceptará el código JavaScript, pero ahora puedes aprovechar las características de TypeScript progresivamente.

2. Agregar tipado básico: Comienza a agregar tipos a tus funciones, variables y objetos poco a poco. Esto mejora la seguridad y el autocompletado en el código.

Ejemplo:

1// Original en JavaScript
2function sumar(a, b) {
3  return a + b;
4}

1// Migrado a TypeScript con tipado
2function sumar(a: number, b: number): number {
3  return a + b;
4}

3. Usar any como paso intermedio: Al migrar, puedes usar el tipo any para partes del código donde el tipado aún no esté claro. Esto te permitirá seguir avanzando mientras solucionas el tipado más detallado más adelante.

Ejemplo:

1let datos: any = obtenerDatosDeAPI();
2console.log(datos.nombre);

4. Usar archivos de declaración .d.ts: Si estás migrando un proyecto grande y hay partes del código que no puedes migrar de inmediato, puedes utilizar archivos .d.ts para declarar los tipos externos sin tocar el código original.

5. Configurar tsconfig.json para migración: Para facilitar la migración, puedes configurar tsconfig.json de la siguiente manera:

1{
2  "compilerOptions": {
3    "allowJs": true,  // Permite incluir archivos .js
4    "checkJs": true,  // Permite que TypeScript haga comprobaciones en archivos .js
5    "outDir": "./dist",
6    "target": "es6"
7  },
8  "include": ["src/**/*"]
9}

Con allowJs habilitado, puedes incluir archivos .js junto con archivos .ts en el proyecto. Esto permite una migración más gradual.

8.3. Compatibilidad entre TypeScript y JavaScript

TypeScript es completamente compatible con JavaScript, lo que significa que puedes integrar ambos lenguajes en el mismo proyecto. Sin embargo, hay algunos aspectos clave a tener en cuenta para garantizar la compatibilidad.

1. Uso de archivos .js y .ts en el mismo proyecto: Como mencionamos antes, puedes usar la opción allowJs en el archivo tsconfig.json para incluir archivos JavaScript en tu proyecto TypeScript.

Ejemplo de tsconfig.json:

1{
2  "compilerOptions": {
3    "allowJs": true,
4    "outDir": "./dist"
5  },
6  "include": ["src/**/*"]
7}

Esto te permite tener archivos .js y .ts en el mismo proyecto mientras vas migrando progresivamente el código a TypeScript.

2. Uso de JSDoc para tipado en JavaScript: Si estás trabajando en un proyecto donde no puedes migrar a TypeScript completamente, puedes usar comentarios JSDoc para proporcionar información de tipos en archivos JavaScript, lo que permite que TypeScript haga validaciones de tipos sin necesidad de convertir el archivo a .ts.

Ejemplo con JSDoc:

1/**
2 * Suma dos números.
3 * @param {number} a - El primer número.
4 * @param {number} b - El segundo número.
5 * @returns {number} La suma de los dos números.
6 */
7function sumar(a, b) {
8  return a + b;
9}

Con checkJs habilitado en tsconfig.json, TypeScript validará este archivo .js usando la información proporcionada por JSDoc.

3. Exportaciones e importaciones entre TypeScript y JavaScript: TypeScript y JavaScript utilizan diferentes sistemas de módulos (ESM en TypeScript, CommonJS en Node.js). Para garantizar la interoperabilidad entre ambos, puedes configurar esModuleInterop en tsconfig.json.

Ejemplo:

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

Esto te permite importar módulos de JavaScript escritos en CommonJS (como module.exports) usando la sintaxis de importación de TypeScript.

Ejemplo de interoperabilidad:

Archivo en JavaScript (utils.js):

1module.exports = {
2  saludar: function(nombre) {
3    return `Hola, ${nombre}`;
4  }
5};

Archivo en TypeScript (app.ts):

1import { saludar } from './utils';
2
3console.log(saludar("Carlos"));  // "Hola, Carlos"

Gracias a esModuleInterop, puedes usar la sintaxis de importación de TypeScript para trabajar con módulos de JavaScript sin problemas.

Resumen del Módulo 8

Este módulo te ha mostrado cómo integrar JavaScript y TypeScript en un proyecto de manera eficiente. Aprendiste a usar librerías de JavaScript en TypeScript, migrar código JavaScript a TypeScript paso a paso y cómo gestionar la compatibilidad entre ambos lenguajes. Con estas herramientas, puedes adoptar TypeScript de manera progresiva en proyectos de JavaScript, mejorando la robustez y mantenibilidad del código sin perder flexibilidad.