Parseo de HTML en TypeScript: bibliotecas, herramientas y ejemplos

Parseo de HTML en TypeScript: guía completa para el desarrollador

TypeScript es una extensión de JavaScript que añade tipificación estricta. Sin embargo, para el parseo de HTML (extracción de datos de páginas web), TypeScript utiliza las mismas bibliotecas que JavaScript, pero con soporte de tipos. Esto hace que el código sea más fiable, comprensible y fácil de mantener. En este artículo, analizaremos las principales herramientas para el parseo de HTML en TypeScript, mostraremos ejemplos de código y daremos recomendaciones para elegir una biblioteca.

¿Por qué parsear HTML en TypeScript?

El parseo de HTML es necesario para:

• Recopilar datos (scraping) de sitios web (precios, noticias, contenido).
• Automatizar pruebas de interfaces web.
• Extraer información de archivos HTML estáticos.
• Migrar contenido entre sistemas.

TypeScript ayuda a evitar errores de tipo al trabajar con elementos DOM y resultados de parseo.

Principales bibliotecas para el parseo de HTML en TypeScript

Consideremos las tres herramientas más populares que funcionan muy bien con TypeScript.

1. Cheerio

Cheerio es una biblioteca rápida, flexible y ligera que implementa un subconjunto de jQuery para trabajar con HTML en el lado del servidor. No requiere navegador y es ideal para el parseo de páginas estáticas. Para TypeScript existe el paquete @types/cheerio con tipos predefinidos.

Instalación:

npm install cheerionpm install --save-dev @types/cheerio

Ejemplo de parseo con Cheerio en TypeScript:

import * as cheerio from 'cheerio';

const html = `<html><body><h1 class="title">¡Hola, mundo!</h1></body></html>`;const $ = cheerio.load(html);

const title: string = $('h1.title').text();console.log(title); // ¡Hola, mundo!

// Extracción de datos tipificadainterface PageData {  title: string;  links: string[];}

const data: PageData = {  title: $('h1').text(),  links: $('a').map((i, el) => $(el).attr('href')).get()};

Ventajas: Sintaxis jQuery, alta velocidad, tamaño reducido.

Desventajas: No ejecuta JavaScript, no es adecuado para SPA dinámicas.

2. JSDOM

JSDOM es una emulación del entorno del navegador (DOM) en Node.js. Permite ejecutar JavaScript en la página y trabajar con la API DOM completa. TypeScript soporta JSDOM a través del paquete @types/jsdom.

Instalación:

npm install jsdomnpm install --save-dev @types/jsdom

Ejemplo de parseo con JSDOM en TypeScript:

import { JSDOM } from 'jsdom';

const html = `<html><body><div id="content">Texto dentro</div></body></html>`;const dom = new JSDOM(html);const document = dom.window.document;

const content: string | null = document.getElementById('content')?.textContent ?? '';console.log(content); // Texto dentro

// Tipificación del elementoconst contentDiv: HTMLElement | null = document.getElementById('content');if (contentDiv) {  console.log(contentDiv.innerHTML);}

Ventajas: DOM completo, soporte de JavaScript, correspondencia precisa con el navegador.

Desventajas: Más pesado que Cheerio, más lento en tareas simples.

3. Puppeteer (con TypeScript)

Puppeteer es una biblioteca para controlar el navegador Chrome/Chromium. Es ideal para el parseo de páginas dinámicas (React, Vue, Angular). TypeScript tiene soporte integrado.

Instalación:

npm install puppeteer

Ejemplo de parseo con Puppeteer en TypeScript:

import puppeteer from 'puppeteer';

async function parsePage(url: string): Promise<string> {  const browser = await puppeteer.