如何在打字稿中输入 URLSearchParams 来接收对象？答案

【问题标题】：How type URLSearchParams in typescript to receive an object?如何在打字稿中输入 URLSearchParams 来接收对象？
【发布时间】：2022-01-04 11:29:18
【问题描述】：

我有一个函数，通过参数接收一个对象，这个对象进入 URLSearchParams，之后，我创建一个 toString() 并得到下面的答案：

const object = {
    name: 'Test',
    age: 20
};

function exampleFunction(objectExample) {

   const url = new URLSearchParams(objectExample);
   return url.toString();
};

console.log(exampleFunction(object));
// result: name=Test&age=20

答案结果是我所期望的，问题是当我尝试输入这个参数来创建一个界面时，比如：

interface ObjectTest { name: string, age: number }

 function exampleFunction(objectExample: ObjectTest) {
    
       const url = new URLSearchParams(objectExample: ObjectTest) << /* error, URLSearchParams expect a type Record<string, string> */;
       return url.toString();
    };

不打字，代码工作正常，我的问题是：如果我的 URLSearchParams 期望其他东西，我如何输入这个参数来接收对象？我已经尝试传递一个对象 stringfy（如 JSON.stringfy(object)，但结果类似于 // %7B%22ma,e%22%3A%22Test%22%2C%22age%age%22#A@） %70= 而不是 name=Test&age=20 )

【问题讨论】：

标签： typescript types urlsearchparams

【解决方案1】：

URLSearchParams 接受一个对象作为参数，但该对象的所有值都必须是字符串。

Record 是一种实用程序类型。 Record<string, string> 是为键和值都是字符串的对象指定的类型。

因此您可以将age 转换为字符串来修复错误：

interface ObjectTest { name: string, age: number }

function exampleFunction(objectExample: ObjectTest) {
    const url = new URLSearchParams({...objectExample, age: objectExample.age.toString()})
    return url.toString();
};

Playground

【讨论】：