Make sure a Typescript array contains a particular value

Question

Make sure a Typescript array contains a particular value

Currently, I am in the process of developing a dropdown-style component where the value and options are separate props. My goal is to incorporate Typescript to ensure that the value remains a valid option. Although I could perform this validation at runtime, I believe it should be achievable within TS.

Do you think this is feasible?

interface Props<N extends number> {
    count: N,
    options: Array<N | number> // Tuples aren't suitable as the length can vary
}

const Component = <N extends number>({count, options} : Props<N>) => {
  // While we could do a runtime check to validate `count` against `options`, it would be ideal to handle this earlier if possible
}

Component({count: 5, options: [1,2,3]}) // Ideally, this should return an error

typescript typescript-generics

Answer 1

Answer №1

The main concept here is to deduce the specific types of count and options and assign them to the generic types N and O. While it's straightforward for N, determining the type for O requires indicating to the compiler that we want a tuple type of number literals, not just an array of numbers like number[]. This can be achieved by enclosing O in a variadic tuple type represented as [...O].

To enforce validation, a conditional type is used to verify if N belongs to O[number]. If it doesn't belong, the conditional resolves to never, resulting in an error since nothing can be assigned to never.

interface Props<N extends number, O extends readonly number[]> {
  count: N;
  options: N extends O[number] ? readonly [...O] : never;
}
const Component = <N extends number, O extends readonly number[]>({
  count,
  options,
}: Props<N, O>) => {};

This approach works well when the array provided as options is a tuple type.

Component({ count: 5, options: [1, 2, 3] }); // error

Component({ count: 5, options: [1, 2, 3, 5] }); // ok

Component({ count: 5, options: [] as number[] }); 
// ok, all elements in options are numbers and 5 does extend number :/

If options happens to be an array type, with its elements being of type number, then the fact that 5 extends number ultimately satisfies the type checking requirements.

Playground

Answer 2

The main concept here is to deduce the specific types of count and options and assign them to the generic types N and O. While it's straightforward for N, determining the type for O requires indicating to the compiler that we want a tuple type of number literals, not just an array of numbers like number[]. This can be achieved by enclosing O in a variadic tuple type represented as [...O].

To enforce validation, a conditional type is used to verify if N belongs to O[number]. If it doesn't belong, the conditional resolves to never, resulting in an error since nothing can be assigned to never.

interface Props<N extends number, O extends readonly number[]> {
  count: N;
  options: N extends O[number] ? readonly [...O] : never;
}
const Component = <N extends number, O extends readonly number[]>({
  count,
  options,
}: Props<N, O>) => {};

This approach works well when the array provided as options is a tuple type.

Component({ count: 5, options: [1, 2, 3] }); // error

Component({ count: 5, options: [1, 2, 3, 5] }); // ok

Component({ count: 5, options: [] as number[] }); 
// ok, all elements in options are numbers and 5 does extend number :/

If options happens to be an array type, with its elements being of type number, then the fact that 5 extends number ultimately satisfies the type checking requirements.

Playground

Make sure a Typescript array contains a particular value

Answer №1

Similar questions

What is the reason behind localStorage.getItem consistently returning a string value?

Error in JavaScript: A surprise anonymous System.register call occurred

Unable to extract the 'data' property from an undefined source in React, causing an error

Is it possible to set up VS Code's code completion feature to automatically accept punctuation suggestions?

Tips for displaying field options after typing parentheses in TypeScript in Visual Studio Code

What is the best way to pass a string value instead of an event in Multiselect Material UI?

How can TypeScript objects be serialized?

The Angular project was functioning properly when tested locally, but encountered an error in the Quill Editor during the building process

The payload from the Axios POST request is failing to reach its destination endpoint

Retrieving the output from a nested scope within a function

Typescript's intriguing concept of objects containing arrays inside other objects

The power of absolute paths in React Native 0.72 with TypeScript

The onChange event does not work as expected for Select controls

Step-by-step guide on setting up pnpm directly, without the need to first

Invoke a function within the <img> tag to specify the source path

Utilizing References in React Components

"Encountered an issue with Next-Auth session returning as undefined in getServerSideProps using NextJS version 13.2

React / NextJS: Repeating Audiowave Component

Issue 2339: Dealing with || and Union Types

Angular - Dropdown menu fails to display options