В этом руководстве я познакомлю вас с основами веб-скрапинга с помощью TypeScript. Мы разберем все: от настройки проекта до более сложных задач веб-скрейпинга, например работы с несколькими страницами. К концу вы сможете легко и уверенно создавать собственные скрипты веб-скрейпинга на TypeScript. Поехали!

Почему стоит выбрать TypeScript для веб-скрапинга?

TypeScript предлагает несколько преимуществ по сравнению с обычным JavaScript, особенно для крупных проектов. Вот некоторые ключевые причины, по которым TypeScript отлично подходит для веб-скрапинга:

• Strong Typing: Строгая типизация TypeScript помогает избежать многих ошибок, которые часто возникают в JavaScript. Это особенно важно для крупных проектов веб-скрейпинга, где обрабатывается большой объем данных.
• Code Readability: TypeScript предоставляет аннотации типов, благодаря которым код становится более читаемым и простым в поддержке. Это может сэкономить вам время при отладке или возврате к проекту.
• Совместимость с библиотеками JavaScript: TypeScript полностью совместим с JavaScript, так что вы по-прежнему можете использовать популярные JavaScript-библиотеки, такие как Axios и Cheerio для веб-скрапинга.

Хотя Python традиционно является самым популярным языком для веб-скрапинга, типобезопасность TypeScript и его интеграция с библиотеками JavaScript делают его отличным выбором для разработчиков, знакомых с этим языком.

Пререквизиты

Перед началом убедитесь, что на вашем компьютере уже настроено несколько вещей:

Node.js: Ensure that Node.js is installed on your computer. You can download the latest version from the Node.js official website.

TypeScript: Вам нужно глобально установить TypeScript в системе. Сделать это можно, выполнив в терминале следующую команду:

npm install -g typescript

Text Editor/IDE: Используйте любую IDE с поддержкой TypeScript, например Visual Studio Code.

Когда все будет настроено, можно приступать к написанию скрапера!

Настройка проекта

Создайте папку проекта: Сначала создайте новую папку для проекта. Откройте терминал и выполните:

mkdir web-scraper-typescript
cd web-scraper-typescript

Инициализируйте проект: Run the following command to set up a new Node.js project:

npm init -y

This command will generate a package.json file.

Initialize TypeScript: Затем инициализируйте TypeScript в проекте, выполнив:

npx tsc - init

This will create a tsconfig.json file that contains configuration options for TypeScript.

Install Dependencies: Для веб-скрапинга мы будем использовать два ключевых пакета: Axios для отправки HTTP-запросов и Cheerio для парсинга HTML. Установите их следующими командами:

npm install axios cheerio
npm install - save-dev @types/node @types/cheerio

The @types/ packages provide TypeScript definitions for Node.js and Cheerio, enabling code completion and type checking.

Написание первого скрапера

Теперь, когда окружение настроено, пора написать ваш первый веб-скрапер. В этом примере мы соберём информацию о товарах из интернет-магазина. Вот шаги:

Шаг 1: Отправьте HTTP GET-запрос

Первый шаг — получить HTML-содержимое страницы, с которой вы хотите собрать данные. Мы будем использовать Axios для отправки HTTP GET-запроса.

импорт axios с сайта "axios";
async функция scrapeSite() {
const ответ = ожидайте axios.получить("https://www.example.com");
const html = response.data;
консоль.журнал(html);
}
scrapeSite();

В этом коде:

• axios.get() используется для выполнения GET-запроса.
• response.data содержит HTML-разметку страницы.

Шаг 2: Разбор HTML-контента

Когда HTML получен, его нужно разобрать, чтобы извлечь данные. Здесь на помощь приходит Cheerio. Cheerio - быстрый, лёгкий HTML-парсер, который повторяет синтаксис jQuery.

импорт axios с сайта "axios";
импорт { load } с сайта "cheerio";
async функция scrapeSite() {
const ответ = ожидайте axios.получить("https://www.example.com");
const html = response.data;
const $ = загрузка(html);
// Extract data using Cheerio
const title = $("h1").текст();
консоль.журнал(title);
}
scrapeSite();

В этом коде:

• load(html) инициализирует Cheerio с HTML-контентом.
• $(“h1”).text() выбирает первый найденный элемент
  

  элемент и извлекает его текст.

Шаг 3: Извлечение данных из конкретных элементов

Теперь, когда мы знаем, как парсить HTML, давайте извлечем конкретные сведения о товарах, такие как название, цена и URL каждого товара. Предположим, что каждый товар находится внутри

импорт axios с сайта "axios";
импорт { load } с сайта "cheerio";
async функция scrapeSite() {
const ответ = ожидайте axios.получить("https://www.example.com/products");
const html = response.data;
const $ = загрузка(html);
$("div.product").each((i, productпрокси {
const name = $(product).find("h2").текст();
const price = $(product).find(".price").текст();
const url = $(product).find("a").attr("href");
консоль.журнал(`Product Name: ${name}`);
консоль.журнал(`Price: ${price}`);
консоль.журнал(`URL: ${url}`);
});
}
scrapeSite();

Вот:

• $(“div.product”).each() перебирает все элементы товаров на странице.
• find() используется для поиска конкретных дочерних элементов, таких как название товара, цена и URL.

Шаг 4: Сохранение данных в массиве

Если вы хотите сохранить собранные данные для дальнейшей обработки (например, для экспорта в CSV-файл), вы можете помещать их в массив. Давайте создадим тип Product и сохраним извлечённые данные в массиве:

импорт axios с сайта "axios";
импорт { load } с сайта "cheerio";
type Product = {
name: string;
price: string;
url: string;
};
async функция scrapeSite() {
const ответ = ожидайте axios.получить("https://www.example.com/products");
const html = response.data;
const $ = загрузка(html);
const продукция: Product[] = [];
$("div.product").each((i, productпрокси {
const name = $(product).find("h2").текст();
const price = $(product).find(".price").текст();
const url = $(product).find("a").attr("href");
const productData: Product = {
name: name,
price: цена,
url: url
};
products.push(productData);
});
консоль.журнал(products);
}
scrapeSite();

Шаг 5: Сохранение данных в CSV

Для сохранения собранных данных в CSV-файл можно использовать библиотеки вроде fast-csv. Сначала установите пакет fast-csv:

npm install fast-csv

Затем измените ваш скрапер, чтобы сохранять данные в CSV-файл:

импорт axios с сайта "axios";
импорт { load } с сайта "cheerio";
импорт { writeToPath } с сайта "@fast-csv/format";
type Product = {
name: string;
price: string;
url: string;
};
async функция scrapeSite() {
const ответ = ожидайте axios.получить("https://www.example.com/products");
const html = response.data;
const $ = загрузка(html);
const продукция: Product[] = [];
$("div.product").each((i, productпрокси {
const name = $(product).find("h2").текст();
const price = $(product).find(".price").текст();
const url = $(product).find("a").attr("href");
const productData: Product = {
name: name,
price: цена,
url: url
};
products.push(productData);
});
writeToPath("products.csv", products, { заголовки: true })
.на("error", (ошибкапрокси консоль.ошибка(error));
}
scrapeSite();

This script will save the scraped data to a file called products.csv.

Шаг 6: Скрапинг нескольких страниц (пагинация)

На многих сайтах товары разбиты на несколько страниц. Чтобы собрать данные с нескольких страниц, нужно переходить по ссылкам пагинации. Это можно сделать, проверив наличие ссылки на следующую страницу «Next» и собрав данные с неё.

Вот как можно собирать данные с нескольких страниц:

импорт axios с сайта "axios";
импорт { load } с сайта "cheerio";
async функция scrapeSite() {
пусть currentPage = 1;
const продукция: Product[] = [];
в то время как (currentPage <= 5) {
const ответ = ожидайте axios.получить(`https://www.example.com/products?page=${currentPage}`);
const html = response.data;
const $ = загрузка(html);
$("div.product").each((i, productпрокси {
const name = $(product).find("h2").текст();
const price = $(product).find(".price").текст();
const url = $(product).find("a").attr("href");
const productData: Product = {
name: name,
price: цена,
url: url
};
products.push(productData);
});
currentPage  ;
}
writeToPath("products.csv", products, { заголовки: true })
.на("error", (ошибкапрокси консоль.ошибка(error));
}
scrapeSite();

В этом примере мы используем цикл while, чтобы собрать данные с пяти страниц товаров.

Advanced Techniques

Работа с динамическими страницами с помощью Puppeteer

Если содержимое страницы динамически загружается через JavaScript, Cheerio может оказаться недостаточно. В таких случаях можно использовать Puppeteer, headless-браузер, чтобы собирать данные. Puppeteer умеет рендерить JavaScript и давать доступ к итоговому содержимому.

Install Puppeteer:

npm install puppeteer

Затем вы можете написать скрипт для сбора данных со страниц, отрисовываемых динамически.

Как избегать обнаружения и блокировок

Сайты часто применяют меры против скрейпинга. Чтобы не быть обнаруженными и заблокированными, рассмотрите следующие стратегии:

• Rotate User Agents: Используйте другие строки user-agent чтобы ваши запросы выглядели так, будто они приходят из разных браузеров.
• Proxy Rotation: Используйте прокси, чтобы скрыть свой IP-адрес. Посмотрите мой список лучшие ротирующиеся прокси.
• Throttling Requests: Ограничьте частоту запросов, чтобы не сработали механизмы rate limiting.

Заключение

TypeScript — мощный инструмент для веб-скрапинга, который даёт преимущества строгой типизации, простой интеграции с библиотеками JavaScript и масштабируемости для крупных проектов. Следуя этому пошаговому туториалу, вы узнали, как настроить окружение, написать базовые скраперы, собрать данные с нескольких страниц и сохранить их в CSV-файл.

Теперь, когда основы рассмотрены, вы можете перейти к более продвинутым техникам, например к работе с динамическими страницами с помощью Puppeteer и к обходу обнаружения с использованием прокси. Мощные возможности TypeScript сделают ваши проекты по веб-скрапингу более надёжными и простыми в сопровождении. Удачного скрапинга!