Parsing de HTML em TypeScript: bibliotecas, ferramentas e exemplos

Parsing de HTML em TypeScript: guia completo para o desenvolvedor

TypeScript é uma extensão do JavaScript que adiciona tipagem estática. No entanto, para parsing de HTML (extração de dados de páginas web), o TypeScript utiliza as mesmas bibliotecas que o JavaScript, mas com suporte a tipos. Isso torna o código mais confiável, compreensível e fácil de manter. Neste artigo, vamos analisar as principais ferramentas para parsing de HTML em TypeScript, mostrar exemplos de código e dar recomendações para a escolha da biblioteca.

Por que fazer parsing de HTML em TypeScript?

O parsing de HTML é necessário para:

• Coleta de dados (scraping) de sites (preços, notícias, conteúdo).
• Automação de testes de interfaces web.
• Extração de informações de arquivos HTML estáticos.
• Migração de conteúdo entre sistemas.

TypeScript ajuda a evitar erros de tipo ao trabalhar com elementos DOM e resultados de parsing.

Principais bibliotecas para parsing de HTML em TypeScript

Vamos considerar as três ferramentas mais populares que funcionam bem com TypeScript.

1. Cheerio

Cheerio é uma biblioteca rápida, flexível e leve que implementa um subconjunto do jQuery para trabalhar com HTML no lado do servidor. Ela não requer um navegador e é ideal para parsing de páginas estáticas. Para TypeScript, existe o pacote @types/cheerio com tipos prontos.

Instalação:

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

Exemplo de parsing com Cheerio em TypeScript:

import * as cheerio from 'cheerio';

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

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

// Extração tipada de dadosinterface PageData {  title: string;  links: string[];}

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

Vantagens: Sintaxe jQuery, alta velocidade, tamanho pequeno.

Desvantagens: Não executa JavaScript, não é adequado para SPAs dinâmicas.

2. JSDOM

JSDOM é uma emulação do ambiente do navegador (DOM) no Node.js. Ele permite executar JavaScript na página e trabalhar com a API DOM completa. TypeScript suporta JSDOM através do pacote @types/jsdom.

Instalação:

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

Exemplo de parsing com JSDOM em TypeScript:

import { JSDOM } from 'jsdom';

const html = `<html><body><div id="content">Texto interno</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 interno

// Tipagem do elementoconst contentDiv: HTMLElement | null = document.getElementById('content');if (contentDiv) {  console.log(contentDiv.innerHTML);}

Vantagens: DOM completo, suporte a JavaScript, correspondência precisa com o navegador.

Desvantagens: Mais pesado que Cheerio, mais lento em tarefas simples.

3. Puppeteer (com TypeScript)

Puppeteer é uma biblioteca para controlar o navegador Chrome/Chromium. É ideal para parsing de páginas dinâmicas (React, Vue, Angular). TypeScript é suportado nativamente.

Instalação:

npm install puppeteer

Exemplo de parsing com Puppeteer em TypeScript:

import puppeteer from 'puppeteer';

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