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

What is the best method for compressing and decompressing JSON data using PHP?

Tips for extracting data from an Angular object using the *ngFor directive

An error in npm occurred: "The name "@types/handlebars" is invalid."

Is there a method in TypeScript to create an extended type for the global window object using the typeof keyword?

Is Angular 9's default support for optional chaining in Internet Explorer possible without the need for polyfill (core-js) modifications with Typescript 3.8.3?

One approach to enhance a function in Typescript involves encapsulating it within another function, while preserving

NextJS 13 causes tailwind to malfunction when route group is utilized

Error: You can't use the 'await' keyword in this context

Derived a key from an enum member to be used as an interface key

Struggling to retrieve the value of a text field in Angular with Typescript

Modify the ShortDate formatting from "2020/06/01" to "2020-06-01"

How do I make functions from a specific namespace in a handwritten d.ts file accessible at the module root level?

Issue with Ant Design form validation

initiate an animated sequence upon the initialization of the Angular server

Leveraging the power of React's callback ref in conjunction with a

Tips for passing multiple items for the onselect event in a ng-multiselect-dropdown

What is the function return type in a NextJS function?

An issue has occurred: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[NavbarComponent -> NavbarComponent

Tips for simulating or monitoring an external function without an object using Typescript 2 and Jasmine 2 within an Angular 4 application

Steps to duplicate the package.json to the dist or build directory while executing the TypeScript compiler (tsc)