前言
在前端开发中，我们经常需要对 URL 进行一些操作，比如对 URL 进行解析、比较、美化等等。而 normalize-url 正是一个可以减轻我们工作量的工具，它可以通过一些简单的配置，实现 URL 的规范化，包括但不限于：
- 将 URL 协议和主机名转换为小写；
- 删除默认端口（http 80 端口和 https 443 端口）；
- 删除查询字符串中的重复参数名等。
而在 TypeScript 项目中，我们就可以使用 @types/normalize-url 这个 npm 包，获得完美的类型支持。本文将为大家介绍如何使用这个包。
安装
要使用 @types/normalize-url 这个类型定义文件，需要先安装 normalize-url，可以使用 npm 或者 yarn 进行安装：
npm install normalize-url @types/normalize-url --save # 或者 yarn add normalize-url @types/normalize-url
使用
使用步骤：
- 引入 normalize-url 包：
import normalizeUrl from "normalize-url";
- 使用 normalizeUrl 函数进行 URL 规范化：
const url = "HTTPS://EXAMPLE.COM:8888/bar/../foo/bar?q=x#fragment"; console.log(normalizeUrl(url)); // https://example.com:8888/foo/bar?q=x#fragment
以上代码的输出结果即为规范化后的 URL，其中包括了 URL 协议、主机名、端口、路径和查询参数等。
- 使用 config 参数进行配置
normalizeUrl 函数可以接受第二个参数 config，通过这个参数可以进行一些额外的配置，比如删除 URL 的查询字符串、自定义查询字符串分隔符等。以下是一些常见的示例：
-- -------------------- ---- ------- ------ ------------ ---- ---------------- ----- --- - ------------------------------------------------------------ ----------------------------- - ---------------------- -------- ---- -- -- ------------------------------------------ ----------------------------- - ------------ - ---------- --- - ---- -- -- ---------------------------------------------------------展开代码
- 使用自定义验证器
normalizeUrl 还支持使用自定义验证器进行 URL 格式验证，用法如下：
import normalizeUrl from "normalize-url"; const url = "example.com"; const isHttps = (url: URL) => url.protocol === "https:"; // 自定义验证器 console.log(normalizeUrl(url, { urlIsValid: isHttps })); // 抛出异常 TypeError
使用自定义验证器需要注意，若 URL 不符合验证器规则，则会抛出异常。
总结
通过本文的介绍，我们了解了如何在 TypeScript 项目中使用 @types/normalize-url 这个 npm 包以及如何使用 normalizeUrl 函数对 URL 进行规范化操作。同时，我们也学习了如何通过 config 参数进行额外的配置和使用自定义验证器进行 URL 格式验证。掌握这些技术，将使我们在前端开发中更加方便快捷地处理 URL 相关的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/146171
