What is the best way to selectively retrieve a combination of keys from multiple objects within an array?

Question

What is the best way to selectively retrieve a combination of keys from multiple objects within an array?

Consider the following scenario:

const common = {
  "test": "Test",
  "test2": "Test2"
}

const greetings = {
  "hello": "Hello"
}

export const locales = (["en", "nl"] as const);
export type I18nMap = Record<typeof locales[number], {
    common: typeof common;
    greetings: typeof greetings;
}>;;

I am looking to be able to choose a single key like "common" or an array of keys such as

["common", ""greetings"

. Depending on the selected key(s), I want to have the ability to select any of the keys within the chosen object. I'm unsure how to accomplish this, below is my attempt

type Namespace = keyof I18nMap[keyof I18nMap];

export function useTranslation<
  T extends Namespace | Namespace[],
  U extends T extends Namespace
    ? keyof I18nMap[keyof I18nMap][Namespace]
    : keyof I18nMap[keyof I18nMap][Namespace][number]
>(namespace: T) {}

For example, when the namespace is "common", I anticipate only "test" | "test2" to be available for type U. If I select an array ["common", "greetings"], I expect a union of "test" | "test2" | "hello" for type U

typescript typescript-typings

Answer 1

Answer №1

To start off, let's transfer the

{common: typeof common; greetings: typeof greetings}

type to an interface for easier manipulation:

interface I18nData {
  common: typeof common;
  greetings: typeof greetings;
}

export type I18nMap = Record<typeof locales[number], I18nData>;

type Namespace = keyof I18nData;

The type T should only extend Namespace (and not Namespace | Namespace[]), while the parameter namespace should be T | T[]. By specifying a mixed array in namespace, TypeScript will infer T as the combination of those types.

Next, U needs to extend keyof I18nData[T]. Yet, simply implementing this results in an error:

export function useTranslation<
  T extends Namespace,
  U extends keyof I18nData[T]
>(namespace: T | T[], key: U) {}
// Error: Argument of type 'string' is not assignable to parameter of type 'never'.
useTranslation(['common', 'greetings'], 'test');

This issue arises because T comprises of 'common' | 'greetings' and I18nData[T] transforms into

{test1: string; test2: string} | {hello: string}

. Since there are no shared keys among the union types, keyof I18ndata[T] becomes never.

To rectify this, you can employ distributive conditional types:

export function useTranslation<
  T extends Namespace,
  // Obtain keyof I18nData[T] for each T
  U extends T extends unknown ? keyof I18nData[T] : never
>(namespace: T | T[], key: U) {}

// Successful cases
useTranslation('common', 'test');
useTranslation('greetings', 'hello');
useTranslation(['common', 'greetings'], 'test');
useTranslation(['common', 'greetings'], 'hello');

// Unsuccessful cases
useTranslation('common', 'hello');
useTranslation('greetings', 'test');
useTranslation(['common'], 'hello');

Playground link

Answer 2

To start off, let's transfer the

{common: typeof common; greetings: typeof greetings}

type to an interface for easier manipulation:

interface I18nData {
  common: typeof common;
  greetings: typeof greetings;
}

export type I18nMap = Record<typeof locales[number], I18nData>;

type Namespace = keyof I18nData;

The type T should only extend Namespace (and not Namespace | Namespace[]), while the parameter namespace should be T | T[]. By specifying a mixed array in namespace, TypeScript will infer T as the combination of those types.

Next, U needs to extend keyof I18nData[T]. Yet, simply implementing this results in an error:

export function useTranslation<
  T extends Namespace,
  U extends keyof I18nData[T]
>(namespace: T | T[], key: U) {}
// Error: Argument of type 'string' is not assignable to parameter of type 'never'.
useTranslation(['common', 'greetings'], 'test');

This issue arises because T comprises of 'common' | 'greetings' and I18nData[T] transforms into

{test1: string; test2: string} | {hello: string}

. Since there are no shared keys among the union types, keyof I18ndata[T] becomes never.

To rectify this, you can employ distributive conditional types:

export function useTranslation<
  T extends Namespace,
  // Obtain keyof I18nData[T] for each T
  U extends T extends unknown ? keyof I18nData[T] : never
>(namespace: T | T[], key: U) {}

// Successful cases
useTranslation('common', 'test');
useTranslation('greetings', 'hello');
useTranslation(['common', 'greetings'], 'test');
useTranslation(['common', 'greetings'], 'hello');

// Unsuccessful cases
useTranslation('common', 'hello');
useTranslation('greetings', 'test');
useTranslation(['common'], 'hello');

Playground link

What is the best way to selectively retrieve a combination of keys from multiple objects within an array?

Answer №1

Similar questions

Combining two observables into one and returning it may cause Angular guards to malfunction

Is there a more concise method for accepting a collection of interfaces in TypeScript?

Creating an Observable with no data in Angular 6 using Rxjs 6

Transferring Information Across Angular Components via a Service Utilizing an RxJS Subject

File manager built with React, allowing users to easily remove files stored in the browser or on a local host

What are the steps to resolve the issue of assigning void type to type ((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined in a react application?

Restricting Dates in Angular 2 Date Picker

Angular Material 2/4/5: Retrieving the unselected value from a multi-select dropdown

Guide on utilizing a declaration within a third-party module

How can NgRx be used to properly reset or empty an array within the state object?

What is the best way to implement custom sorting for API response data in a mat-table?

Changing the selection on multiple input fields in Angular

What could be the reason for the variable's type being undefined in typescript?

The assignment of type 'null' to type 'number' is not valid

Is it best to make a refactored/service method public or private in Typescript?

Jasmine test confirms that momentJS objects with the same values do not match

Encountering an Issue with Vue 3 and Vue Router 4: Uncaught TypeError - Trying to Access Undefined Properties (specifically 'push')

Generate a list of items in typescript, and then import them into a react component dynamically

Restricting the types within a generic union type in TypeScript

Utilizing IonPage and DeepLinkMetadataType in Ionic 3 for tab navigation: Eliminating the need for tab-0