Parsing HTML in TypeScript: Libraries, Tools, and Examples

Parsing HTML in TypeScript: A Complete Developer's Guide

TypeScript is a superset of JavaScript that adds strict typing. However, for parsing HTML (extracting data from web pages), TypeScript uses the same libraries as JavaScript, but with type support. This makes the code more reliable, understandable, and easier to maintain. In this article, we will cover the main tools for parsing HTML in TypeScript, show code examples, and provide recommendations for choosing a library.

Why Parse HTML in TypeScript?

Parsing HTML is necessary for:

• Collecting data (scraping) from websites (prices, news, content).
• Automating web interface testing.
• Extracting information from static HTML files.
• Migrating content between systems.

TypeScript helps avoid type errors when working with DOM elements and parsing results.

Main Libraries for Parsing HTML in TypeScript

Let's look at three of the most popular tools that work well with TypeScript.

1. Cheerio

Cheerio is a fast, flexible, and lightweight library that implements a subset of jQuery for working with HTML on the server side. It does not require a browser and is great for parsing static pages. For TypeScript, there is the @types/cheerio package with ready-made types.

Installation:

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

Example of parsing with Cheerio in TypeScript:

import * as cheerio from 'cheerio';

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

const title: string = $('h1.title').text();console.log(title); // Hello, world!

// Typed data extractioninterface PageData {  title: string;  links: string[];}

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

Pros: jQuery syntax, high speed, small size.

Cons: Does not execute JavaScript, not suitable for dynamic SPAs.

2. JSDOM

JSDOM is an emulation of the browser environment (DOM) in Node.js. It allows you to execute JavaScript on the page and work with the full DOM API. TypeScript supports JSDOM through the @types/jsdom package.

Installation:

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

Example of parsing with JSDOM in TypeScript:

import { JSDOM } from 'jsdom';

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

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

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

Pros: Full DOM, JavaScript support, accurate browser emulation.

Cons: Heavier than Cheerio, slower for simple tasks.

3. Puppeteer (with TypeScript)

Puppeteer is a library for controlling the Chrome/Chromium browser. It is ideal for parsing dynamic pages (React, Vue, Angular). TypeScript is supported out of the box.

Installation:

npm install puppeteer

Example of parsing with Puppeteer in TypeScript:

import puppeteer from 'puppeteer';

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