Retrieve an array containing values whose types are derived from a rest parameter

Question

Retrieve an array containing values whose types are derived from a rest parameter

I am seeking to develop a React hook for retrieving user settings. Here is a simplified example illustrating this:

import React from "react";

interface UserSettings
{
    SHOW_TIME_IN_HEADER: boolean;
    GRID_SIZE: number;
}

const USER_SETTINGS: UserSettings = {
    SHOW_TIME_IN_HEADER: true,
    GRID_SIZE: 8,
};

export const useUserSetting = <S extends keyof UserSettings>(...setting: S[]): UserSettings[S][] =>
{
    return setting.map(s => USER_SETTINGS[s]);
};

export const Component = () =>
{
    const [
        showTime, // Should be boolean but it is number | boolean
        gridSize // Should be number but it is number | boolean
    ] = useUserSetting("SHOW_TIME_IN_HEADER", "GRID_SIZE");

    return (
        <div>
            {"..."}
        </div>
    );
};

TS Playground

I aim for the hook to provide an array containing values of its respective type. In this scenario, both returned values share the type number | boolean, whereas one should exclusively be of type number or boolean.

Is such differentiation achievable? And what would be the appropriate term for it? My primary hurdle at present lies in articulating this issue accurately for research purposes.

If you possess the solution to my dilemma or can articulate the problem more concisely, please do not hesitate to reach out. Thank you.

typescript types typescript-generics

Answer 1

Answer №1

If you aim to define the return data type of useUserSetting as a mapped tuple type, it's crucial not to categorize the setting rest parameter as S[]. This is because simply using an array type won't retain the sequence. Instead, make the generic type parameter S represent an array type itself and assign the type S to the setting parameter. By doing so, the compiler can successfully infer a tuple type for S.

This would be my suggested typing:

export const useUserSetting = <S extends Array<keyof UserSettings>>(
    ...setting: S): {
        [I in keyof S]: UserSettings[Extract<S[I], keyof UserSettings>]
    } => {
    return setting.map(s => USER_SETTINGS[s]) as any; // requires an assertion here
};

The return type iterates through the numeric keys I of the S tuple, generating UserSettings[S[I]]. Unfortunately, the compiler cannot verify whether S[I] will be a key within UserSettings. To address this, I utilize the Extract utility type. The notation

Extract<S[I], keyof UserSettings>

validates that only elements of S[I] which are assignable to keyof UserSettings are retained, essentially enabling us to proceed without issues.

It should also be noted that the implementation,

setting.map(s => USER_SETTNGS[s]

, fails to adhere to the mapped tuple type. The typings from Array.prototype.map() solely produce an Array, losing any ordering information. In the presented approach, a type assertion to any has been utilized. Presumably, the focus lies more on enhancing the experience for the callers of useUserSetting() rather than the developer themselves.

const [
    showTime, // boolean
    gridSize // number
] = useUserSetting("SHOW_TIME_IN_HEADER", "GRID_SIZE");

gridSize.toFixed(); // functions correctly

Great news! The return type of useUserSetting() results in [number, boolean], making gridSize identifiable as a number, allowing for appropriate usage (e.g., gridSize.toFixed() doesn't trigger a compiler error).

Playground link to code

Answer 2

If you aim to define the return data type of useUserSetting as a mapped tuple type, it's crucial not to categorize the setting rest parameter as S[]. This is because simply using an array type won't retain the sequence. Instead, make the generic type parameter S represent an array type itself and assign the type S to the setting parameter. By doing so, the compiler can successfully infer a tuple type for S.

This would be my suggested typing:

export const useUserSetting = <S extends Array<keyof UserSettings>>(
    ...setting: S): {
        [I in keyof S]: UserSettings[Extract<S[I], keyof UserSettings>]
    } => {
    return setting.map(s => USER_SETTINGS[s]) as any; // requires an assertion here
};

The return type iterates through the numeric keys I of the S tuple, generating UserSettings[S[I]]. Unfortunately, the compiler cannot verify whether S[I] will be a key within UserSettings. To address this, I utilize the Extract utility type. The notation

Extract<S[I], keyof UserSettings>

validates that only elements of S[I] which are assignable to keyof UserSettings are retained, essentially enabling us to proceed without issues.

It should also be noted that the implementation,

setting.map(s => USER_SETTNGS[s]

, fails to adhere to the mapped tuple type. The typings from Array.prototype.map() solely produce an Array, losing any ordering information. In the presented approach, a type assertion to any has been utilized. Presumably, the focus lies more on enhancing the experience for the callers of useUserSetting() rather than the developer themselves.

const [
    showTime, // boolean
    gridSize // number
] = useUserSetting("SHOW_TIME_IN_HEADER", "GRID_SIZE");

gridSize.toFixed(); // functions correctly

Great news! The return type of useUserSetting() results in [number, boolean], making gridSize identifiable as a number, allowing for appropriate usage (e.g., gridSize.toFixed() doesn't trigger a compiler error).

Playground link to code

Answer 3

Answer №2

As far as my knowledge goes, it seems like the current situation does not allow for that feature. This seems to be the best solution available at the moment

Answer 4

As far as my knowledge goes, it seems like the current situation does not allow for that feature. This seems to be the best solution available at the moment

Retrieve an array containing values whose types are derived from a rest parameter

Answer №1

Answer №2

Similar questions

Preventing Circular Dependencies in RollupJS and TypeScript: Ensuring Build Failure When Circular Dependencies are Detected

When running `npm test`, Mocha TS tests encounter failure, but the issue does not arise when executing them

Adding client-side scripts to a web page in a Node.js environment

Exploring Dependency Injection in Angular2: A Comparison of TypeScript Syntax and @Inject Approach

The module 'ngx-cookie-service' could not be located

TypeScript type identifiers and their misuse as values: "only meant for a specific type, but being utilized as a value in this context."

Is it possible to define a unique function signature in a child class when implementing a method from a parent class?

Error message: `Socket.io-client - Invalid TypeError: Expected a function for socket_io_client_1.default`

Excessive geolocation position responses in Angular 5

Tips for serializing the execution of an array of observables

Safe way to implement map and spread operator in your codebase

Revealing a typescript function for interacting with HTML pages through manual calls

Utilizing Angular: Invoking a function from a directive within a component

What is the best way to incorporate TypeScript into a simple JavaScript project and release it as a JavaScript library with JSDoc for TypeScript users?

What are the most optimal configurations for tsconfig.json in conjunction with node.js modules?

Tips for enabling users to import from subdirectories within my NPM package

Tips for deleting a certain element from an array with the aid of a service in Angular 9

Can the child component ensure that the Context value is not null?

Building basic objects in TypeScript

What could be causing my if statement to fail even though the condition is met?