使用 TypeScript 从对象创建查询字符串

在 JavaScript 中，我们经常需要将对象转换成查询字符串以进行 URL 编码。在 TypeScript 中，我们可以使用相同的方法来做到这一点。下面是一个示例代码片段，展示了如何使用 TypeScript 从对象创建查询字符串。

代码片段

interface QueryParams {
  [key: string]: string | number | boolean;
}

function buildQueryString(params: QueryParams): string {
  const parts = [];

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const value = encodeURIComponent(String(params[key]));
      parts.push(`${encodeURIComponent(key)}=${value}`);
    }
  }

  return parts.join('&');
}

// Example usage
const params: QueryParams = {
  q: 'typescript from object to query string',
  limit: 10,
  is_active: true,
};
const queryString = buildQueryString(params);
console.log(queryString); // Output: "q=typescript%20from%20object%20to%20query%20string&limit=10&is_active=true"

解释

以上代码片段中，我们定义了一个接口 QueryParams，它定义了一个对象，该对象将键映射到字符串、数字或 boolean 类型的值。

接下来，我们定义一个名为 buildQueryString 的函数，它接受一个 QueryParams 对象作为输入，并返回一个字符串，该字符串是该对象的 URL 编码查询字符串。该函数使用一个循环遍历对象的每个键，并将键和值添加到一个数组中。在处理每个值之前，我们使用 encodeURIComponent 函数将它们转换为 URL 编码的字符串。最后，我们将数组中的所有元素连接成一个字符串，并返回该字符串。

在代码片段的最后，我们定义了一个示例 QueryParams 对象，并将其传递给 buildQueryString 函数。此函数返回相应的 URL 编码查询字符串。我们将查询字符串记录到控制台中以进行演示。

结论

在 TypeScript 中将对象转换为查询字符串是相对简单的。定义一个接口来描述对象的结构，然后编写一个函数来从对象构建查询字符串。在这个简短的代码片段中，我们展示了一个十分基础的实现方式。在真实的 Web 应用程序中，通常需要更复杂的实现，以支持更广泛的数据类型和查询字符串选项。