我正在使用 Typescript。
我有一个这样定义的类型:
export type SearchStoresParameters = {
storeCategory : string;
latitude: number;
longitude: number;
}
我正在尝试将上述类型对象转换为查询字符串。
export const searchStores = async (searchStoresParameters : SearchStoresParameters ) => {
var queryString = Object.keys(searchStoresParameters).map((key) => {
return encodeURIComponent(key) + '=' + encodeURIComponent(searchStoresParameters[key])
}).join('&');
const searchStoresApi = process.env.REACT_APP_BACKEND_SERVICE_API + "/stores?" + queryString;
const res = await fetch(
searchStoresApi,
);
const response = await res.json();
}
但是,上面的代码显示错误:
(parameter) searchStoresParameters: SearchStoresParameters
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'SearchStoresParameters'.
No index signature with a parameter of type 'string' was found on type 'SearchStoresParameters'.ts(7053)
将打字稿类型转换为查询字符串的最佳方法是什么?
我建议使用 内置
URLSearchParams
API,因为它是为了高效地序列化/反序列化搜索参数数据而构建的。这是一个如何使用它的示例程序:
const data = { firstName: "Jon", lastName: "Doe" };
console.log(new URLSearchParams(data).toString()); // "firstName=Jon&lastName=Doe"
它还根据 URL 的需要对文本进行编码:
console.log(new URLSearchParams({ foo: "Can it handle weird text?" }).toString()); // "foo=Can+it+handle+weird+text%3F"
此外,如果您担心支持,请咨询caniuse,如果您想继续使用它,请使用a polyfill。无论如何,这里是适合使用此 Web API 的代码:
export const searchStores = async (searchStoresParameters : SearchStoresParameters ) => {
var queryString = new URLSearchParams(searchStoresParameters).toString();
const searchStoresApi = process.env.REACT_APP_BACKEND_SERVICE_API + "/stores?" + queryString;
const res = await fetch(
searchStoresApi,
);
const response = await res.json();
}
searchStoresParameters[key]
带有动态键,所以你也需要用动态键定义你的类型。
export type SearchStoresParameters = {
storeCategory : string;
latitude: number;
longitude: number;
[key: string]: number | string;
}
我认为你正在尝试解析一个对象来查询字符串,所以你也可以使用URLSearchParams,这要简单得多
const queryString = new URLSearchParams(searchStoresParameters).toString()
我将类型转换为查询字符串,如下所示:
var queryString = Object.keys(params).map(key => key + '=' + params[key as keyof IChatAsk]).join('&');
类型定义如下:
export type ChatAsk = {
prompt: string;
cid: number;
}