Limiting JSDoc/TypeScript type to a specific array element

Question

Limiting JSDoc/TypeScript type to a specific array element

Utilizing TypeScript with JSDoc poses a challenge as I aim to restrict a variable to one of the known values stored in an array.

I am aware that it can be achieved like so:

/** @type {'one'|'two'|'three'} */
let v = 'four';
// ==> Error, type 'four' is not assignable to type 'one'|'two'|'three'

In my scenario, the desired values are already defined in an array nearby. To prevent redundancy, I wish to reference them somehow, although I am uncertain if it's feasible. Something along these lines would be ideal:

const OPTIONS = ['one', 'two', 'three'];

/** @type {string<Options>} */
let v = 'four';
// ==> Desired -- Error, type 'four' is not assignable to type 'one'|'two'|'three'
// ==> but that doesn't actually work...

Is there any method to accomplish this?

typescript jsdoc

Answer 1

Answer №1

Since August 28, 2021, you can achieve this by utilizing JSDoc inline @type {const} as shown below:

const OPTIONS = /** @type {const} */ (['one', 'two', 'three']);

/** @type {typeof OPTIONS[number]} */
let value = 'four'; 
//  ^ error: Type '"four"' is not assignable to type '"one" | "two" | "three" |

Answer 2

Since August 28, 2021, you can achieve this by utilizing JSDoc inline @type {const} as shown below:

const OPTIONS = /** @type {const} */ (['one', 'two', 'three']);

/** @type {typeof OPTIONS[number]} */
let value = 'four'; 
//  ^ error: Type '"four"' is not assignable to type '"one" | "two" | "three" |

Answer 3

Answer №2

Modifying arrays at runtime may not be the best approach:

const CHOICES = ['red', 'blue', 'green'];
CHOICES[0] = 'YELLOW';

To ensure immutability, consider converting the array to a tuple:

const CHOICES = ['red', 'blue', 'green'];                
const CHOICES_TUPLE = ['red', 'blue', 'green'] as const;

Difference in inferred types:

// const CHOICES: string[]
// const CHOICES_TUPLE: readonly ["red", "blue", "green"]

Now you can enforce specific value types:

const OPTIONS_TUPLE = ['dog', 'cat', 'bird'] as const;
type PetsValue = typeof OPTIONS_TUPLE[number];
const y: PetsValue = 'fish'; 
//TS2322: Type '"fish"' is not assignable to type '"dog" | "cat" | "bird"'.

Answer 4

Modifying arrays at runtime may not be the best approach:

const CHOICES = ['red', 'blue', 'green'];
CHOICES[0] = 'YELLOW';

To ensure immutability, consider converting the array to a tuple:

const CHOICES = ['red', 'blue', 'green'];                
const CHOICES_TUPLE = ['red', 'blue', 'green'] as const;

Difference in inferred types:

// const CHOICES: string[]
// const CHOICES_TUPLE: readonly ["red", "blue", "green"]

Now you can enforce specific value types:

const OPTIONS_TUPLE = ['dog', 'cat', 'bird'] as const;
type PetsValue = typeof OPTIONS_TUPLE[number];
const y: PetsValue = 'fish'; 
//TS2322: Type '"fish"' is not assignable to type '"dog" | "cat" | "bird"'.

Limiting JSDoc/TypeScript type to a specific array element

Answer №1

Answer №2

Similar questions

Understanding the Functions of Angular Providers and Implementing Them

Error in NodeJS when trying to run ESM: "ReferenceError: exports is not defined

What is the process for generating an injected and a const object instance?

What is the correct method for typing sagas?

Customize YouTube iframe styles in Angular 4+ with TypeScript

What is the process for exporting the reducer function and integrating it into the storeModule.forRoot within an Angular application?

Unusual conduct exhibited by a 16th version Angular module?

Tips on updating the content of an HTML element dynamically when it is already being populated using *ngFor

Tips on obtaining checkbox values other than "true"

Utilizing MongoDB query for geoLocation with maxDistance parameter

Updating the navigation bar in Node/Angular 2 and displaying the sidebar once the user has logged in

Tips for creating a typescript typeguard function for function types

Utilizing a directive in contexts beyond a component

Using Angular filter pipe to customize markers in Leaflet maps

Error: Issue determining the type of variable. Unable to eliminate type 'any'

Traversing an array of objects in TypeScript and appending to a separate array if not already present

The database did not respond, causing the API to resolve without sending a response for the specified endpoint (/api/dates). This could potentially lead to requests becoming stalled in Next

What is the best way to execute a function that retrieves data from a MySQL query and then sends it back as a result in Express.js?

Balancing website speed with capturing product impression

How can I receive live notifications for a document as soon as it is created?