How to type URLSearchParams in typescript

Question

I am trying to limit the Record type of params passed to URLSearchParams to a specific amount of strings as shown below:

interface GetCoordsParams {
    params: Record<'city' | 'appid' | 'limit', string>;
};

export const createGetCoordsQuery = async (params: GetCoordsParams) => {
    const query = new URLSearchParams(params).toString();
    await fetch(`http://api.geo.com/1.0/direct?q=${query}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        },
    });
};

Unfortunately, typescript doesn't let me do that by throwing

Argument of type 'GetCoordsParams' is not assignable to parameter of type 'string | string[][] | Record<string, string> | URLSearchParams | undefined'.

Alex Wayne · Accepted Answer · 2022-08-07 06:50:33Z

1

GetCoordsParams defines the data you want on a property named params.

So you want:

new URLSearchParams(params.params)

Which is sort of ugly.

So you could:

interface GetCoordsParams {
    params: Record<'city' | 'appid' | 'limit', string>;
};

export const createGetCoordsQuery = async ({ params }: GetCoordsParams) => {
    const query = new URLSearchParams(params)
    //...
}

Or:

type GetCoordsParams = Record<'city' | 'appid' | 'limit', string>;

export const createGetCoordsQuery = async (params: GetCoordsParams) => {
    const query = new URLSearchParams(params).toString();
    //...
}

edited Aug 7, 2022 at 6:50

answered Aug 7, 2022 at 6:29

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

softgrip · Accepted Answer · 2022-08-07 06:30:09Z

0

The problem is your interface defines a params property.

So basically it's expecting params.params.

Easiest way to change this is probably just turn it into a type that doesn't have a sub property of 'params'.

type GetCoordsParams = Record<'city' | 'appid' | 'limit', string>


export const createGetCoordsQuery = async (params: GetCoordsParams) => {
    const query = new URLSearchParams(params).toString();
    }

answered Aug 7, 2022 at 6:30

softgrip

534 bronze badges

Collectives™ on Stack Overflow

How to type URLSearchParams in typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related