typescript - Hur konverterar man en typ till en frågesträng?

Jag använder Typescript.

Jag har en typ definierad på detta sätt:

export type SearchStoresParameters = {
    storeCategory : string;
    latitude: number;
    longitude: number;
}

Och jag försöker konvertera ovanstående typ av objekt till en frågesträng.

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();
}

Men ovanstående kod visar fel:

(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)

Vad är det bästa sättet att konvertera en TypeScript-typ till en frågesträng?

Svar #1

Jag skulle råda att använda den inbyggda URLSearchParams-API:en eftersom den är byggd för att effektivt serialisera/deserialisera sökparametrar. Här är ett exempelprogram på hur du skulle använda den:

const data = { firstName: "Jon", lastName: "Doe" };
console.log(new URLSearchParams(data).toString()); // "firstName=Jon&lastName=Doe"

Den kodar också texten som krävs för URL:er:

console.log(new URLSearchParams({ foo: "Can it handle weird text?" }).toString()); // "foo=Can+it+handle+weird+text%3F"

Om du också är orolig för stöd, konsultera caniuse och använd en polyfill om du fortfarande vill använda det. Hur som helst, här är din kod anpassad för att använda denna 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();
}

Svar #2

searchStoresParameters[key] har en dynamisk nyckel, så du behöver definiera din typ med en dynamisk nyckel också.

export type SearchStoresParameters = {
    storeCategory : string;
    latitude: number;
    longitude: number;
    [key: string]: number | string;
}

Jag tror att du försöker analysera ett objekt till frågesträngar, så du kan också använda URLSearchParams vilket är mycket enklare

const queryString = new URLSearchParams(searchStoresParameters).toString()

Relaterade artiklar