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

Angular 2 Quickstart encountered a 404 error when trying to retrieve the /app/main.js

What is the best way to assign JSON values to my class property?

Is it possible to retrieve the precise key currently indexed within type declaration?

What is the best way to apply a filter to an array of objects nested within another object in JavaScript?

Ways to troubleshoot a serverless framework plugin issue

What is the process for incorporating the jsnetworkx library into an ionic or angular 4 project?

Utilize Hardhat and NPM to distinguish between unit tests and integration tests efficiently

Utilize the findIndex method to search for an element starting at a designated index

Using TypeScript and NestJs: Spread types can only be generated from object types

Get the @types definition installed from a forked repository

Can you explain the significance of the | symbol in TypeScript?

The specified property is not found in the type 'IntrinsicAttributes & IntrinsicClassAttributes<DatePicker> & Readonly<{ children?: ReactNode; }>'

Omit certain table columns when exporting to Excel using JavaScript

Best Practice for Using *ngIf in Angular (HTML / TypeScript)

What is the best way to divide a string into an array containing both linked and non-linked elements?

Changing the data type of a column in an Excel file from XLSX to

Problem with (click) event not triggering in innerHtml content in Angular 4

Implementing an Asynchronous Limited Queue in JavaScript/TypeScript with async/await

Is it possible to implement websockets with inversify-express-utils?

What is the method for extracting the types of parameters from a function type while excluding a single parameter?