Is it possible for Typescript to automatically infer object keys based on the value of a previous argument?

Question

Is it possible for Typescript to automatically infer object keys based on the value of a previous argument?

Currently, my goal is to create a translation service that includes type checking for both tags and their corresponding placeholders. I have a TagList object that outlines the available tags along with a list of required placeholders for each translated string.

export const TagList = {
    username_not_found: ['username']
};

In this setup, the key represents the tag name while the value consists of placeholders necessary in the translated text.

An example dictionary may look like this:

// Please note that the keys should be either numbers or strings, not like this unconventional format
const en: {[name: keyof (typeof TagList)]: string} = {
    "username_not_found": "The user {username} does not exist"
}

The method used for translating tags functions as follows:

this.trans("username_not_found", {username: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d1e0200080203082d08150c00270123242017110704462b2725">[email protected]</a>"});

My objective is to enable type checking and autocompletion within my IDE for placeholder objects to ensure all placeholders are correctly configured.

For instance:

// Incorrect: Missing "username" placeholder.
this.trans("username_not_found", {});

// Also incorrect: Using a nonexistent placeholder "foobar".
this.trans("username_not_found", {foobar: "42"});

// Correct:
this.trans("username_not_found", {username: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="295a46444c464748694e534a46515d474e05535452"></a>[email protected]"});

At present, I am utilizing keyof (typeof TagList) as the argument type for tagName. Although it currently works, I am seeking a way to deduce the structure of the second argument based on the first argument's value.

I aim to streamline the process by avoiding the need for multiple tag lists maintained simultaneously in various interfaces and objects.

Thank you for your assistance!

typescript typescript-typings typescript-generics

Answer 1

Answer №1

To start off, it is important to ensure that TagList remains immutable.

Afterwards, I proceeded to establish a literal type based on the key, resembling the functionality of Array.prototype.reduce

export const TagList = {
    username_not_found: ['username'],
    username_found: ['name'],
    batman: ['a', 'b']
} as const;

type Elem = string

type Reducer<
    Arr extends ReadonlyArray<Elem>, // array
    Result extends Record<string, any> = {} // accumulator
    > = Arr extends [] ? Result // if array is empty -> return Result
    : Arr extends readonly [infer H, ...infer Tail] // if array is not empty, do recursive call with array Tail and Result
    ? Tail extends ReadonlyArray<Elem>
    ? H extends Elem
    ? Reducer<Tail, Result & Record<H, string>>
    : never
    : never
    : never;

type TagList = typeof TagList;

const trans = <Tag extends keyof TagList, Props extends Reducer<TagList[Tag]>>(tag: Tag, props: Props) => null as any

trans("username_not_found", { username: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e89b87858d87868da88d90898598848dc68b8785">[email protected]</a>" }); // ok
trans("username_found", { name: "John" }); // ok
trans("batman", { a: "John", b: 'Doe' }); // ok

trans("username_not_found", { name: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e4f8faf2f8f9f2d7f2eff6fae7fbf2b9f4f8fa">[email protected]</a>" }); // expected error
trans("username_found", { username: "John" }); // expected error

The main objective here is to transform the tuple ['username'] into { username: string }

If you were to achieve this in pure js, how would you go about it?

['username'].reduce((acc, elem) => ({ ...acc, [elem]: 'string' }), {})

I have employed a similar algorithm but opted for recursion over iteration.

This serves as a javascript equivalent of the Reducer utility type

const reducer = (arr: ReadonlyArray<Elem>, result: Record<string, any> = {}): Record<string, any> => {
    if (arr.length === 0) {
        return result
    }

    const [head, ...tail] = arr;

    return reducer(tail, { ...result, [head]: 'string' })
}

For additional insights, feel free to visit my blog

Answer 2

To start off, it is important to ensure that TagList remains immutable.

Afterwards, I proceeded to establish a literal type based on the key, resembling the functionality of Array.prototype.reduce

export const TagList = {
    username_not_found: ['username'],
    username_found: ['name'],
    batman: ['a', 'b']
} as const;

type Elem = string

type Reducer<
    Arr extends ReadonlyArray<Elem>, // array
    Result extends Record<string, any> = {} // accumulator
    > = Arr extends [] ? Result // if array is empty -> return Result
    : Arr extends readonly [infer H, ...infer Tail] // if array is not empty, do recursive call with array Tail and Result
    ? Tail extends ReadonlyArray<Elem>
    ? H extends Elem
    ? Reducer<Tail, Result & Record<H, string>>
    : never
    : never
    : never;

type TagList = typeof TagList;

const trans = <Tag extends keyof TagList, Props extends Reducer<TagList[Tag]>>(tag: Tag, props: Props) => null as any

trans("username_not_found", { username: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e89b87858d87868da88d90898598848dc68b8785">[email protected]</a>" }); // ok
trans("username_found", { name: "John" }); // ok
trans("batman", { a: "John", b: 'Doe' }); // ok

trans("username_not_found", { name: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e4f8faf2f8f9f2d7f2eff6fae7fbf2b9f4f8fa">[email protected]</a>" }); // expected error
trans("username_found", { username: "John" }); // expected error

The main objective here is to transform the tuple ['username'] into { username: string }

If you were to achieve this in pure js, how would you go about it?

['username'].reduce((acc, elem) => ({ ...acc, [elem]: 'string' }), {})

I have employed a similar algorithm but opted for recursion over iteration.

This serves as a javascript equivalent of the Reducer utility type

const reducer = (arr: ReadonlyArray<Elem>, result: Record<string, any> = {}): Record<string, any> => {
    if (arr.length === 0) {
        return result
    }

    const [head, ...tail] = arr;

    return reducer(tail, { ...result, [head]: 'string' })
}

For additional insights, feel free to visit my blog

Answer 3

Answer №2

After creating a demo, I became intrigued to experiment with it. It appears to be functioning correctly for my needs.

const SomeStrings = {
  first: 'some text begin {test} {best}',
  second: ' {nokey} {key} some text in end',
  third: 'gsdfgsdfg',
} as const;

type ExtractReplacedParams<T extends string = string> = T extends `${infer _start}{${infer ks}}${infer _next}`
  ? _next extends `${infer _altStart}{${infer altKey}}${infer _altNext}`
    ? ExtractReplacedParams<_next> & { [k in ks]: string }
    : { [k in ks]: string }
  : Record<string, never>;

type Keys = keyof typeof SomeStrings;

type stMap = { [K in keyof typeof SomeStrings]: typeof SomeStrings[K] };

export const someTranslate = <K extends Keys>(key: K, replaceObj: ExtractReplacedParams<stMap[K]>): string => {
  const phrase = SomeStrings[key];

  if (replaceObj) {
    for (const [replaceKey, value] of Object.entries(replaceObj)) {
      phrase.replace(replaceKey, value);
    }
  }

  return phrase;
};

console.log(someTranslate('second', { nokey: 'seems', key: 'works' }));

Answer 4

After creating a demo, I became intrigued to experiment with it. It appears to be functioning correctly for my needs.

const SomeStrings = {
  first: 'some text begin {test} {best}',
  second: ' {nokey} {key} some text in end',
  third: 'gsdfgsdfg',
} as const;

type ExtractReplacedParams<T extends string = string> = T extends `${infer _start}{${infer ks}}${infer _next}`
  ? _next extends `${infer _altStart}{${infer altKey}}${infer _altNext}`
    ? ExtractReplacedParams<_next> & { [k in ks]: string }
    : { [k in ks]: string }
  : Record<string, never>;

type Keys = keyof typeof SomeStrings;

type stMap = { [K in keyof typeof SomeStrings]: typeof SomeStrings[K] };

export const someTranslate = <K extends Keys>(key: K, replaceObj: ExtractReplacedParams<stMap[K]>): string => {
  const phrase = SomeStrings[key];

  if (replaceObj) {
    for (const [replaceKey, value] of Object.entries(replaceObj)) {
      phrase.replace(replaceKey, value);
    }
  }

  return phrase;
};

console.log(someTranslate('second', { nokey: 'seems', key: 'works' }));

Is it possible for Typescript to automatically infer object keys based on the value of a previous argument?

Answer №1

Answer №2

Similar questions

Limit the parameter of a TypeScript method decorator based on the method's type

When checking for a `null` value, the JSON property of Enum type does not respond in

What is the method to access an interface or type alias that has not been explicitly exported in TypeScript type definitions?

Looking for a solution to the TypeScript & Mantine issue of DateValue not being assignable?

How to immediately set focus on a form control in Angular Material without needing a click event

Determine characteristics of object given to class constructor (typescript)

The practice of following the UpperCamelCase convention post object transformation

What is the process of transforming two forms into components and then integrating those components into a view in Angular 5?

JavaScript - Imported function yields varied outcome from module

In React Typescript, the input type="checkbox" does not show any value in the value attribute

Bring in d3 along with d3-force-attract

Encountering a TypeScript error when using Redux dispatch action, specifically stating `Property does not exist on type`

Choosing a single item from multiple elements in React using React and typescript

Using Regular Expressions: Ensuring that a specific character is immediately followed by one or multiple digits

Tips for refreshing the apollo cache

Ways to trigger the keyup function on a textbox for each dynamically generated form in Angular8

Encountering an error in Angular 8 where attempting to access an element in ngOnInit results in "Cannot read property 'focus' of null"

Encountering a problem with the 'string' parameter when using TypeScript

What could be causing my data to undergo alterations when transitioning from a frontend form submission to a backend API?

Reviewing for the presence of "Undefined" in the conditional statement within Transpiled Javascript code for