在现代 Web 开发中，URL 是一个经常被涉及的概念。而在 TypeScript 中，定义 URL 类型的时候需要用到 @types/is-url 这个 npm 包，本文将对该包的使用进行详细介绍。
1. 安装
使用 npm 安装 @types/is-url：
npm install --save-dev @types/is-url
2. 导入
要使用 @types/is-url，需要在 TypeScript 中导入它：
import * as isUrl from 'is-url';
3. 使用
3.1 检查 URL 是否合法
使用 isUrl 函数可以检查字符串中是否包含合法的 URL。它应该是以下之一：
- http 或 https
- ftp
- ipc
- irc
- magnet
- mailto
- mms
- news
- sip
- sms
- tel
- xmpp
const url = 'https://github.com';
if (isUrl(url)) {
console.log(`${url} is valid`);
} else {
console.log(`${url} is not valid`);
}以上示例中，使用了 isUrl 函数来检查 URL 是否合法。
3.2 解析 URL
使用 URL 类可以将 URL 解析为其组成部分，例如协议、主机名、查询参数等等。以下是一个简单的示例：
const myUrl = new URL('https://www.example.com/search?q=query');
console.log(myUrl.protocol); // 'https:'
console.log(myUrl.hostname); // 'www.example.com'
console.log(myUrl.pathname); // '/search'
console.log(myUrl.search); // '?q=query'在上面的示例中，首先创建了一个 URL 实例，然后使用 URL 实例上的属性获取 URL 的各个部分。例如，protocol 属性返回协议名称（'https:'），hostname 属性返回主机名（'www.example.com'），`pathname` 返回路径名（'/search'）。
3.3 构造 URL
下面是一个示例，展示了如何在 TypeScript 中构造 URL：
const baseUrl = 'https://api.example.com';
const queryParams = {id: 1};
const url = new URL(baseUrl);
Object.entries(queryParams).forEach(([key, value]) => {
url.searchParams.set(key, value);
});
console.log(url.toString()); // 'https://api.example.com?id=1'在上面的示例中，首先创建了一个基本 URL，然后使用 URL 实例上的 searchParams 属性将查询参数添加到 URL 中。
4. 总结
在 TypeScript 中使用 @types/is-url 很容易。只需导入模块，然后使用 isUrl 函数、URL 类或 searchParams 属性即可。这些功能非常有用，可以在很多场景中快速有效地解析或构造 URL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/202555