在 TypeScript 中处理 XML：库、解析与创建 XML 文档

在 TypeScript 中处理 XML：库与实践示例

XML（可扩展标记语言）仍然是数据交换、配置文件以及与遗留系统集成的常用格式。尽管 JSON 很流行，但许多企业级解决方案、SOAP 服务以及数据格式（例如 SVG、RSS、XSLT）仍然使用 XML。在 TypeScript 中，得益于静态类型，处理 XML 变得更加可靠和可预测。在本文中，我们将介绍在 TypeScript 中用于解析、创建和验证 XML 文档的最佳库。

在 TypeScript 中处理 XML 的主要库

目前，有几个成熟的库可以与 TypeScript 很好地配合使用。让我们来看看最流行的三个：

• fast-xml-parser — 在 JavaScript/TypeScript 中解析 XML 最快的库。支持验证、转换为 JSON 以及反向转换。
• xml2js — 经典的库，具有简单的 API，可将 XML 转换为 JavaScript 对象。通过 @types/xml2js 内置支持 TypeScript。
• xmldom — 用于 Node.js 的 DOM Level 2 实现，允许像操作 DOM 树一样处理 XML（类似于浏览器中的 DOMParser）。

安装与配置

首先，通过 npm 安装其中一个库：

npm install fast-xml-parser xml2js xmldom @types/xml2js

现在，让我们看看每个库的实践示例。

示例 1：使用 fast-xml-parser 解析 XML

fast-xml-parser 提供了高性能和方便的 API，可将 XML 转换为普通的 TypeScript 对象。

import { XMLParser, XMLBuilder, XMLValidator } from 'fast-xml-parser';

// 原始 XMLconst xmlData = `<?xml version="1.0" encoding="UTF-8"?><catalog>  <book id="101">    <title>TypeScript Handbook</title>    <author>Microsoft</author>    <price currency="USD">29.99</price>  </book>  <book id="102">    <title>Node.js Design Patterns</title>    <author>Mario Casciaro</author>    <price currency="EUR">34.50</price>  </book></catalog>`;

// 解析器配置const parser = new XMLParser({  ignoreAttributes: false, // 保留属性  attributeNamePrefix: '@_', // 属性前缀  textNodeName: '#text',     // 文本节点名称  isArray: (tagName) => ['book'].includes(tagName) // 始终将 <book> 返回为数组});

// 解析const result = parser.parse(xmlData);console.log(JSON.stringify(result, null, 2));

// 结果类型定义interface Book {  '@_id': string;  title: string;  author: string;  price: {    '@_currency': string;    '#text': string;  };}

interface Catalog {  catalog: {    book: Book[];  };}

const catalog = result as Catalog;console.log(`第一本书：${catalog.catalog.book[0].title}`);

请注意参数 isArray — 它确保 book 元素始终是一个数组，即使 XML 中只有一本书也是如此。

示例 2：使用 xml2js 创建 XML

xml2js 库便于从 JavaScript 对象构建 XML。它使用 Builder 进行序列化。

import { Builder } from 'xml2js';

// 要转换为 XML 的对象const data = {  root: {    $: { version: '1.0', encoding: 'UTF-8' },    user: [      {        $: { id: '1', active: 'true' },        name: '伊万·彼得罗夫',        email: 'ivan@example.com',        roles: {          role: ['admin', 'editor']        }      },      {        $: { id: '2', active: 'false' },        name: '玛丽亚·西多罗娃',        email: 'maria@example.com',        roles: {          role: ['viewer']