Determine the data type of an index within an array declaration

Question

Determine the data type of an index within an array declaration

Imagine we have the following array literal:

const list = ['foo', 'bar', 'baz'] as const;

We are attempting to create a type that represents potential indices of this array. This is what we tried:

const list = ['foo', 'bar', 'baz'] as const;

type ListIndex = Exclude<keyof (typeof list), keyof []>;

However, the ListIndex ends up being "0" | "1" | "2" instead of 0 | 1 | 2.

Does anyone know how to achieve the desired 0 | 1 | 2 type?

typescript

Answer 1

Answer №1

One possible solution is to utilize the below type:

type Index<T extends readonly any[]> = Exclude<Partial<T>["length"], T["length"]>

We can now test it using list:

type Test = Index<typeof list> // Test = 0 | 1 | 2 // successful!

Link to live code demo

Answer 2

One possible solution is to utilize the below type:

type Index<T extends readonly any[]> = Exclude<Partial<T>["length"], T["length"]>

We can now test it using list:

type Test = Index<typeof list> // Test = 0 | 1 | 2 // successful!

Link to live code demo

Answer 3

Answer №2

There is no straightforward method to achieve this, which can be quite frustrating. While there are ongoing efforts to address this issue, the current workaround involves a bit of extra work.

In my own project, I have implemented the following solution:

/** Define the type of elements in an array */
type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer E)[] ? E : never;

/** Function signature with arguments for 'Tail' */
type AsFunctionWithArgsOf<T extends unknown[] | readonly unknown[]> = (...args: T) => any;

/** Extract arguments from the function signature for 'Tail' */
type TailArgs<T> = T extends (x: any, ...args: infer T) => any ? T : never;

/** Obtain elements of an array after the first element */
type Tail<T extends unknown[] | readonly unknown[]> = TailArgs<AsFunctionWithArgsOf<T>>;

/** Internal utility for 'IndicesOf'; likely not needed outside this context */
type AsDescendingLengths<T extends unknown[] | readonly unknown[]> =
    [] extends T ? [0] :
    [ElementOf<ElementOf<AsDescendingLengths<Tail<T>>[]>>, T['length']];

/** Union of numeric literals representing possible indices of a tuple */
type IndicesOf<T extends unknown[] | readonly unknown[]> =
    number extends T['length'] ? number :
    [] extends T ? never :
    ElementOf<AsDescendingLengths<Tail<T>>>;

By using this implementation, your code can be structured as follows:

const list = ['foo', 'bar', 'baz'] as const;

type ListIndex = IndicesOf<typeof list>;

The underlying concept here revolves around examining the `T['length']` property (where `type T = typeof list`) to obtain actual numbers that correlate with the indices. The extracted number will always be one greater than the highest index in the array. By iteratively removing elements from the array and checking the length each time, we can determine all the indices present. This recursive process relies on the definitions of types like `Tail`, `ElementOf`, and `AsDescendingLengths`.

To elaborate further, `Tail` represents the same tuple type without its initial element, akin to a 'Pop'. Due to TypeScript's limited functionality with tuples, we utilize a function-based approach for manipulating them effectively. Functions like `ElementOf` and `Tail` serve other purposes beyond this specific scenario. However, caution must be exercised with deeply nested tuples, as TypeScript may avoid recursive types for performance reasons.

Although certain constructs like `AsDescendingLengths` may seem tailored for this particular use case, these defined types could potentially find relevance in broader contexts. Including these definitions in a global `.d.ts` file eliminates the need for individual imports but might clutter the overall scope of the project.

An additional application example is demonstrated below:

interface Array<T> {
    /**
     * Returns the index of the first occurrence of a value in an array.
     * @param searchElement The value to locate in the array.
     * @param fromIndex The array index at which to begin the search.
     * If `fromIndex` is omitted, the search starts at index 0.
     * Returns -1 if `searchElement` is not found.
     */
    indexOf<This extends T[], T>(this: This, searchElement: T, fromIndex?: IndicesOf<This>): -1 | IndicesOf<This>;
}

interface ReadonlyArray<T> {
    /**
     * Returns the index of the first occurrence of a value in an array.
     * @param searchElement The value to locate in the array.
     * @param fromIndex The array index at which to begin the search.
     * If `fromIndex` is omitted, the search starts at index 0.
     * Returns -1 if `searchElement` is not found.
     */
    indexOf<This extends readonly T[], T>(this: This, searchElement: T, fromIndex?: IndicesOf<This>): -1 | IndicesOf<This>;
}

Answer 4

There is no straightforward method to achieve this, which can be quite frustrating. While there are ongoing efforts to address this issue, the current workaround involves a bit of extra work.

In my own project, I have implemented the following solution:

/** Define the type of elements in an array */
type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer E)[] ? E : never;

/** Function signature with arguments for 'Tail' */
type AsFunctionWithArgsOf<T extends unknown[] | readonly unknown[]> = (...args: T) => any;

/** Extract arguments from the function signature for 'Tail' */
type TailArgs<T> = T extends (x: any, ...args: infer T) => any ? T : never;

/** Obtain elements of an array after the first element */
type Tail<T extends unknown[] | readonly unknown[]> = TailArgs<AsFunctionWithArgsOf<T>>;

/** Internal utility for 'IndicesOf'; likely not needed outside this context */
type AsDescendingLengths<T extends unknown[] | readonly unknown[]> =
    [] extends T ? [0] :
    [ElementOf<ElementOf<AsDescendingLengths<Tail<T>>[]>>, T['length']];

/** Union of numeric literals representing possible indices of a tuple */
type IndicesOf<T extends unknown[] | readonly unknown[]> =
    number extends T['length'] ? number :
    [] extends T ? never :
    ElementOf<AsDescendingLengths<Tail<T>>>;

By using this implementation, your code can be structured as follows:

const list = ['foo', 'bar', 'baz'] as const;

type ListIndex = IndicesOf<typeof list>;

The underlying concept here revolves around examining the `T['length']` property (where `type T = typeof list`) to obtain actual numbers that correlate with the indices. The extracted number will always be one greater than the highest index in the array. By iteratively removing elements from the array and checking the length each time, we can determine all the indices present. This recursive process relies on the definitions of types like `Tail`, `ElementOf`, and `AsDescendingLengths`.

To elaborate further, `Tail` represents the same tuple type without its initial element, akin to a 'Pop'. Due to TypeScript's limited functionality with tuples, we utilize a function-based approach for manipulating them effectively. Functions like `ElementOf` and `Tail` serve other purposes beyond this specific scenario. However, caution must be exercised with deeply nested tuples, as TypeScript may avoid recursive types for performance reasons.

Although certain constructs like `AsDescendingLengths` may seem tailored for this particular use case, these defined types could potentially find relevance in broader contexts. Including these definitions in a global `.d.ts` file eliminates the need for individual imports but might clutter the overall scope of the project.

An additional application example is demonstrated below:

interface Array<T> {
    /**
     * Returns the index of the first occurrence of a value in an array.
     * @param searchElement The value to locate in the array.
     * @param fromIndex The array index at which to begin the search.
     * If `fromIndex` is omitted, the search starts at index 0.
     * Returns -1 if `searchElement` is not found.
     */
    indexOf<This extends T[], T>(this: This, searchElement: T, fromIndex?: IndicesOf<This>): -1 | IndicesOf<This>;
}

interface ReadonlyArray<T> {
    /**
     * Returns the index of the first occurrence of a value in an array.
     * @param searchElement The value to locate in the array.
     * @param fromIndex The array index at which to begin the search.
     * If `fromIndex` is omitted, the search starts at index 0.
     * Returns -1 if `searchElement` is not found.
     */
    indexOf<This extends readonly T[], T>(this: This, searchElement: T, fromIndex?: IndicesOf<This>): -1 | IndicesOf<This>;
}

Answer 5

Answer №3

The defined outcome is what you receive. However, we can accomplish your desired result with a clever mapping technique:

const list = ['foo', 'bar', 'baz'] as const;

type StrNum = {
  "0": 0,
  "1": 1,
  "2": 2,
  "3": 3,
  "4": 4 // add more values if needed
}

type MapToNum<A extends keyof StrNum> = {
  [K in A]: StrNum[K]
}[A] // this converts string keys to numbers using the StrNum type

type ListIndex = MapToNum<Exclude<keyof (typeof list), keyof []>>;
// resulting type will be 0 | 1 | 2

Answer 6

The defined outcome is what you receive. However, we can accomplish your desired result with a clever mapping technique:

const list = ['foo', 'bar', 'baz'] as const;

type StrNum = {
  "0": 0,
  "1": 1,
  "2": 2,
  "3": 3,
  "4": 4 // add more values if needed
}

type MapToNum<A extends keyof StrNum> = {
  [K in A]: StrNum[K]
}[A] // this converts string keys to numbers using the StrNum type

type ListIndex = MapToNum<Exclude<keyof (typeof list), keyof []>>;
// resulting type will be 0 | 1 | 2

Determine the data type of an index within an array declaration

Answer №1

Answer №2

Answer №3

Similar questions

Tips for effectively utilizing the drag and drop feature with the Table Component in Ant Design

How to update an Array<Object> State in ReactJS without causing mutation

Angular 2: Musing on the potential of Hot Module Replacement and the power of @ngrx/store

Tips for clearing out text in a <p> tag with javascript when it exceeds a specific length of 100 characters

Changes are reflected in the service variable, but they are not updating in the component

The specified file ngx-extended-pdf-viewer/assets/pdf.js cannot be found

The table is failing to display the values contained within the array

Angular - Set value only if property is present

Restricting access to tabPanel in tabView when a tab is clicked using Angular

Challenges arise when employing reduce with data types in an object

The mat-slide-toggle updates the values for all products, with each value being unique

Welcome to Digital Ocean! It appears you are attempting to utilize TypeScript

Implement a new functionality to a publicly accessible type without violating the pre-established agreement

Is there a way to declare the different types of var id along with its properties in Typescript?

Handling a change event for a mat-datepicker in Angular 7 can be tricky, especially when its value is tied to an optional input parameter. Let's dive into how to

Dynamically loading classes in TypeScript without using default export

The outcome of a promise is an undefined value

Is there a way to dynamically alter the fill color of an SVG component using props along with tailwindcss styling?

Tips for resolving the AWS CDK setContext error while updating beyond v1.9.0

The type 'number' cannot be assigned to the type 'Element'