在本指南中，我将向你介绍网络搜索的基础知识，其中包括 TypeScript.我们将介绍从设置项目到处理更高级的刮擦任务（如处理多个页面）的所有内容。课程结束时，您将能够轻松、自信地创建自己的 TypeScript 网页搜索脚本。让我们开始吧

为什么选择 TypeScript 进行网络抓取？

与普通 JavaScript 相比，TypeScript 具有多项优势，尤其是在大型项目中。以下是 TypeScript 成为网络刮擦最佳选择的一些关键原因：

• 打字能力强:TypeScript 的强类型有助于避免 JavaScript 中经常出现的许多 bug。这对于处理大量数据的大型刮擦项目尤为重要。
• 代码可读性:TypeScript 提供了类型注解，使代码更易读、更易维护。这可以在调试或重新查看项目时节省时间。
• 与 JavaScript 库兼容:TypeScript 与 JavaScript 完全兼容，这意味着您仍然可以使用流行的 JavaScript 库，如 Axios 和 Cheerio for web scraping.

虽然 Python 是传统上最流行的网络搜刮语言，但 TypeScript 的类型安全性和与 JavaScript 库的集成使其成为熟悉该语言的开发人员的绝佳选择。

先决条件

开始之前，您需要在机器上设置一些东西：

Node.js:确保计算机上安装了 Node.js。您可以从 Node.js 官方网站.

TypeScript:您需要在系统中全局安装 TypeScript。在终端运行以下命令即可：

npm install -g typescript

文本编辑器/IDE:使用任何支持 TypeScript 的集成开发环境，如 Visual Studio Code。

一切就绪后，您就可以开始编写刮板了！

设置项目

创建项目文件夹:首先，为项目创建一个新文件夹。打开终端并运行

mkdir web-scraper-typescript
CD web-scraper-typescript

初始化项目:运行以下命令建立新的 Node.js 项目：

npm init -y

此命令将生成 package.json 文件。

初始化 TypeScript:接下来，在你的项目中运行 TypeScript 进行初始化：

NPX TSC - 启动

这将创建一个包含 TypeScript 配置选项的 tsconfig.json 文件。

安装依赖项:为了执行网络扫描，我们将使用两个关键软件包： Axios 进行 HTTP 请求，以及 Cheerio 用于解析 HTML。使用以下命令安装它们：

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

@types/ 包为 Node.js 和 Cheerio 提供 TypeScript 定义，实现代码自动补全和类型检查。

书写您的第一个爬取工具

现在，您的环境已经建立，是时候编写您的第一个网络搜索器了。在本例中，我们将从一家在线商店中抓取产品信息。具体步骤如下

步骤 1：发出 HTTP GET 请求

第一步是检索要抓取的页面的 HTML 内容。我们将使用 Axios 发送 HTTP GET 请求。

import 公轴 from "axios";
async function scrapeSite() {
const response = await axios.get("https://www.example.com");
const html = response.data;
console.log(html)；
}
scrapeSite();

在此代码中

• axios.get() 用于发出 GET 请求。
• response.data 包含页面的 HTML 内容。

第 2 步：解析 HTML 内容

获得 HTML 后，我们需要对其进行解析以提取数据。这就是 Cheerio 的用武之地。Cheerio 是一款快速、轻量级的 HTML 解析器，可模仿 jQuery 的语法。

import 公轴 from "axios";
import { 加载 } from "加油";
async function scrapeSite() {
const response = await axios.get("https://www.example.com");
const html = response.data;
const $ = load(html)；
// 使用 Cheerio 提取数据
const title = $("h1").text();
console.log(title)；
}
scrapeSite();

在此代码中

• 载入(html) 用 HTML 内容初始化 Cheerio。
• $("h1").text() 选择第一个
  

  元素，并检索其文本。

步骤 3：从特定元素中提取数据

既然我们已经知道如何解析 HTML，那就来提取具体的产品详细信息，如每件产品的名称、价格和 URL。假设每个产品都在一个

import 公轴 from "axios";
import { 加载 } from "加油";
async function scrapeSite() {
const response = await axios.get("https://www.example.com/products");
const html = response.data;
const $ = load(html)；
$("div.product").each((i，产品) => {
const name = $（产品）。find("h2").text();
const 价格 = $（产品）。find(".价格").text();
const url = $（产品）。find("a").attr("href");
console.log(产品名称： ${name}`);
console.log(价格 ${price｝`);
console.log(`URL： ${url}`);
});
}
scrapeSite();

给你

• $("div.product").each() 循环浏览页面上的所有产品元素。
• 查找() 用于查找特定的子元素，如产品名称、价格和 URL。

步骤 4：在数组中存储数据

如果要存储提取的数据以便进一步处理（例如导出到 CSV 文件），可以将数据推送到数组中。让我们创建一个 Product 类型，并将提取的数据存储到数组中：

import 公轴 from "axios";
import { 加载 } from "加油";
type Product = {
name: string;
price: string;
url: string;
};
async function scrapeSite() {
const response = await axios.get("https://www.example.com/products");
const html = response.data;
const $ = load(html)；
const products: Product[] = [];
$("div.product").each((i，产品) => {
const name = $（产品）。find("h2").text();
const 价格 = $（产品）。find(".价格").text();
const url = $（产品）。find("a").attr("href");
const 产品数据: Product = {
name: name、
price价格、
url: url
};
产品。push(产品数据）；
});
console.log(产品）；
}
scrapeSite();

第 5 步：将数据保存为 CSV

您可以使用 fast-csv 等库将刮擦数据保存为 CSV 文件。首先，安装 fast-csv 软件包：

npm install fast-csv

然后，修改您的搜索器，将数据保存为 CSV：

import 公轴 from "axios";
import { 加载 } from "加油";
import { writeToPath } from "@fast-csv/format";
type Product = {
name: string;
price: string;
url: string;
};
async function scrapeSite() {
const response = await axios.get("https://www.example.com/products");
const html = response.data;
const $ = load(html)；
const products: Product[] = [];
$("div.product").each((i，产品) => {
const name = $（产品）。find("h2").text();
const 价格 = $（产品）。find(".价格").text();
const url = $（产品）。find("a").attr("href");
const 产品数据: Product = {
name: name、
price价格、
url: url
};
产品。push(产品数据）；
});
writeToPath("products.csv"产品，{ headers: true })
.on("错误", (error) => console.error(错误））；
}
scrapeSite();

该脚本会将刮擦数据保存到名为 products.csv 的文件中。

第 6 步：抓取多个页面（分页）

许多网站都有多个产品页面。要从多个页面中抓取数据，您需要浏览分页链接。这可以通过检查 "下一页 "链接并抓取来实现。

下面介绍如何抓取多个页面：

import 公轴 from "axios";
import { 加载 } from "加油";
async function scrapeSite() {
let currentPage = 1;
const products: Product[] = [];
while （currentPage <= 5) {
const response = await axios.get(`https://www.example.com/products?page=${currentPage}`);
const html = response.data;
const $ = load(html)；
$("div.product").each((i，产品) => {
const name = $（产品）。find("h2").text();
const 价格 = $（产品）。find(".价格").text();
const url = $（产品）。find("a").attr("href");
const 产品数据: Product = {
name: name、
price价格、
url: url
};
产品。push(产品数据）；
});
currentPage ；
}
writeToPath("products.csv"产品，{ headers: true })
.on("错误", (error) => console.error(错误））；
}
scrapeSite();

在这个示例中，我们使用 while 循环来搜索五页产品。

高级技术

用 Puppeteer 处理动态页面

如果页面内容是通过 JavaScript 动态加载的，Cheerio 可能就不够用了。在这种情况下，可以使用无头浏览器 Puppeteer 来抓取数据。Puppeteer 可以渲染 JavaScript 并提供对最终内容的访问。

安装 Puppeteer：

npm install puppeteer

然后，你就可以编写一个脚本，从动态渲染的页面中抓取数据。

避免检测和拦截

网站通常会采取反搜索措施。为避免被检测和阻止，请考虑以下策略：

• 轮换用户代理:使用不同的 用户代理字符串 使您的请求看起来像是来自不同的浏览器。
• 代理轮换:使用代理服务器隐藏您的 IP 地址。查看我的 最佳旋转代理.
• 节流请求:限制请求的速率，以避免触发速率限制系统。

结论

TypeScript 是一种强大的网络刮擦工具，它具有强键入、易于与 JavaScript 库集成以及大型项目可扩展性等优点。通过本教程的逐步讲解，您已经学会了如何设置环境、编写基本的刮擦程序、刮擦多个页面以及将数据保存到 CSV 文件。

有了基础知识，您现在可以探索更高级的技术，例如使用 Puppeteer 处理动态页面和使用代理避免检测。TypeScript 的强大功能将使您的网络搜刮项目更可靠、更易于维护。祝你搜刮愉快！