Is there a way to restrict the type of the value returned by URLSearchParams.get() to a specific union type?

Question

Is there a way to restrict the type of the value returned by URLSearchParams.get() to a specific union type?

When handling a search parameter in the URL, such as ?mode=view, it is important to validate the value of mode to ensure it is either 'edit' or 'view'. To achieve this, a custom type called ModeTuple is created and converted to a union type using indexed access types ModeTuple[number].

type ModeTuple = ['view', 'edit'];

const searchParams = new URLSearchParams();
const modes: ModeTuple = ['view', 'edit'];

const m1: ModeTuple[number] = modes.includes(searchParams.get('mode')) ? searchParams.get('mode') : 'view';

The goal is to verify if the value of mode is valid by using modes.includes(...), which should narrow the type down to 'edit' | 'view'.

An error occurs:

Argument of type 'string' is not assignable to parameter of type '"view" | "edit"'

This suggests that the Array.prototype.includes method may not successfully narrow the type from string to

"view" | "edit"

. Despite the logic in the JavaScript code dictating that the mode value must be either 'view' or 'edit', TypeScript does not recognize this.

TypeScript Playground

typescript types

Answer 1

Answer №1

const check: ModeTuple[number] = modes.includes(searchParams.get('mode')) ? searchParams.get('mode') : 'view';

will not function properly for a couple of reasons:

mode.includes requires a ModeTuple[number] parameter, but searchParams.get('mode') returns string | null.
The type narrowing done by TypeScript is limited. Even if #1 was not an issue, it would not be able to infer from
```
modes.includes(searchParams.get('mode'))
```
that the subsequent call to searchParams.get('mode') will return a ModeTuple[number]. (This is because not all functions are pure, so TypeScript cannot assume that a function will return the same result when called twice with the same arguments.)

For situations like this, I prefer starting with a constant array and deriving types from it:

const modes = ["view", "edit"] as const;
type ModeTuple = typeof modes; // If you want it
type Mode = ModeTuple[number];

This way, values are only listed once, which reduces chances of errors when modifications need to be made.

Next, you could replace your original m1 code with:

const m1 =
    modeString !== null && (modes as readonly string[]).includes(modeString)
    ? modeString as ModeTuple[number]
    : "view";

...but inline type assertions like that can be verbose and error-prone with repeated use.

I personally prefer defining a single type predicate (also known as "type guard") function that can be reused:

function isMode(mode: string | null): mode is Mode {
    return mode !== null && (modes as readonly string[]).includes(mode);
}

Then, you could do:

const modeString = new URLSearchParams(location.search).get("mode");
const m1 = isMode(modeString) ? modeString : "view";

Or, create a function for this purpose if needed in multiple places:

function getMode(searchParams: URLSearchParams): Mode | null {
    const mode = searchParams.get("mode");
    // Or perform the check here directly if `isMode` is not defined
    return isMode(mode) ? mode : null;
}

Now, getting the value becomes simpler:

const m1 = getMode(theSearchParams):

Playground link

Answer 2

const check: ModeTuple[number] = modes.includes(searchParams.get('mode')) ? searchParams.get('mode') : 'view';

will not function properly for a couple of reasons:

mode.includes requires a ModeTuple[number] parameter, but searchParams.get('mode') returns string | null.
The type narrowing done by TypeScript is limited. Even if #1 was not an issue, it would not be able to infer from
```
modes.includes(searchParams.get('mode'))
```
that the subsequent call to searchParams.get('mode') will return a ModeTuple[number]. (This is because not all functions are pure, so TypeScript cannot assume that a function will return the same result when called twice with the same arguments.)

For situations like this, I prefer starting with a constant array and deriving types from it:

const modes = ["view", "edit"] as const;
type ModeTuple = typeof modes; // If you want it
type Mode = ModeTuple[number];

This way, values are only listed once, which reduces chances of errors when modifications need to be made.

Next, you could replace your original m1 code with:

const m1 =
    modeString !== null && (modes as readonly string[]).includes(modeString)
    ? modeString as ModeTuple[number]
    : "view";

...but inline type assertions like that can be verbose and error-prone with repeated use.

I personally prefer defining a single type predicate (also known as "type guard") function that can be reused:

function isMode(mode: string | null): mode is Mode {
    return mode !== null && (modes as readonly string[]).includes(mode);
}

Then, you could do:

const modeString = new URLSearchParams(location.search).get("mode");
const m1 = isMode(modeString) ? modeString : "view";

Or, create a function for this purpose if needed in multiple places:

function getMode(searchParams: URLSearchParams): Mode | null {
    const mode = searchParams.get("mode");
    // Or perform the check here directly if `isMode` is not defined
    return isMode(mode) ? mode : null;
}

Now, getting the value becomes simpler:

const m1 = getMode(theSearchParams):

Playground link

Is there a way to restrict the type of the value returned by URLSearchParams.get() to a specific union type?

Answer №1

Similar questions

Enhance your FullCalendar experience with React by displaying extra information on your calendar

When utilizing the useRef hook in Material-UI, an error may arise stating: "The property 'value' is not found on the type 'never'."

Tips on joining property name in typescript

tips for closing mat select when clicked outside

Enhancements to managing universal configuration object across the entire application

Do I have to create all the classes returned when consuming a JSON web service in Angular/Typescript?

Is there a way to transfer ngClass logic from the template to the TypeScript file in Angular?

The React Nested Loop Query: Maximizing Efficiency in Data

How can we direct the user to another tab in Angular Mat Tab using a child component?

Retrieve the thousand separator for numbers using Angular in various languages

The specified 'IArguments' type does not qualify as an array type

Expand the size of the imported gltf model within Three.js

Modifying the menu with Angular 4 using the loggedInMethod

How do you transfer byte[] data using a DTO in Java Spring?

Error Found: Unexpected Colon (:) in Vue TypeScript File

When using Typescript inheritance, the datatypes shown in IntelliSense are unexpectedly listed as "any" instead of

404 Error: Unable to Locate Socket Io

Having trouble assigning a value of `undefined` to a TextField state in React hook

Using ngModel instead of value to bind a custom Angular directive for currency input

Unable to find custom components when using react-router