Create a function that takes in an array of strings and outputs a record containing a unique key for each string in the array

Question

Create a function that takes in an array of strings and outputs a record containing a unique key for each string in the array

Looking to create a function that takes an array of strings as input and returns an object with a key for each string in the input array?

Here is an example of how this can be implemented:

const getMyObject = (...keys: string[]) => keys.reduce((object, key) => ({
    ...object,
    [key]: `some-computed-value-${key}`,
  }), 
  {},
)

This allows you to safely write code like this:

const { keyA, keyB } = getMyObject('keyA', 'keyB');

If you're unsure about properly typing this function, we can explore different options.

typescript

Answer 1

Answer №1

If you're looking for a solution, you might consider using the following code snippet:

const getMyObject = <K extends string>(
  ...keys: K[]
// Record<K, TypeOfTheComputedValues>
): Record<K, string> => keys.reduce((obj, key) => ({
    ...obj,
    [key]: `some-computed-value-${key}`,
  }), 
  {},
) as Record<K, string>;

It's worth noting that a type assertion is still necessary due to the type of the accumulator in reduce only being recognized as Record<K, string> during the last iteration, which TypeScript may not automatically infer.

Playground link

Answer 2

If you're looking for a solution, you might consider using the following code snippet:

const getMyObject = <K extends string>(
  ...keys: K[]
// Record<K, TypeOfTheComputedValues>
): Record<K, string> => keys.reduce((obj, key) => ({
    ...obj,
    [key]: `some-computed-value-${key}`,
  }), 
  {},
) as Record<K, string>;

It's worth noting that a type assertion is still necessary due to the type of the accumulator in reduce only being recognized as Record<K, string> during the last iteration, which TypeScript may not automatically infer.

Playground link

Answer 3

Answer №2

One can deduce values as well:

type Predicate<T> = T extends string ? Record<T, `some-calculated-value-${T}`> : never

type Reducer<
  Arr extends Array<unknown>,
  Result extends Record<PropertyKey, unknown> = {}
  > = Arr extends []
  ? []
  : Arr extends [infer H]
  ? Result & Predicate<H>
  : Arr extends [infer Head, ...infer Tail]
  ? Reducer<[...Tail], Result & Predicate<Head>>
  : Readonly<Result>;

const fetchMyObject = <K extends string, Keys extends K[]>(...keys: [...Keys]) =>
  keys.reduce((obj, key) => ({
    ...obj,
    [key]: `some-calculated-value-${key}`,
  }),
    {} as Reducer<Keys>,
  )

const { keyA, keyB } = fetchMyObject('keyA', 'keyB'); // keys and values inferred
const { keyC, keyD } = fetchMyObject('keyA', 'keyB'); // Errors, properties do not match

Playground

Answer 4

One can deduce values as well:

type Predicate<T> = T extends string ? Record<T, `some-calculated-value-${T}`> : never

type Reducer<
  Arr extends Array<unknown>,
  Result extends Record<PropertyKey, unknown> = {}
  > = Arr extends []
  ? []
  : Arr extends [infer H]
  ? Result & Predicate<H>
  : Arr extends [infer Head, ...infer Tail]
  ? Reducer<[...Tail], Result & Predicate<Head>>
  : Readonly<Result>;

const fetchMyObject = <K extends string, Keys extends K[]>(...keys: [...Keys]) =>
  keys.reduce((obj, key) => ({
    ...obj,
    [key]: `some-calculated-value-${key}`,
  }),
    {} as Reducer<Keys>,
  )

const { keyA, keyB } = fetchMyObject('keyA', 'keyB'); // keys and values inferred
const { keyC, keyD } = fetchMyObject('keyA', 'keyB'); // Errors, properties do not match

Playground

Create a function that takes in an array of strings and outputs a record containing a unique key for each string in the array

Answer №1

Answer №2

Similar questions

Alter the language settings of the Datepicker feature in Material Angular 4

When the page is refreshed, Vercel's Next.JS success/error pattern is thrown due to the "window is not defined" error

Utilizing npm/buffer package within a TypeScript module

Constructor not executing when using Object.create

Troubleshooting a Gulp.js issue during the execution of a "compile" task

Jest is having trouble recognizing a custom global function during testing, even though it functions properly outside of testing

Is there a way to position the label to the left side of the gauge?

Leveraging Expose in combination with class-transformer

Steer clear of type assertion in your codebase when utilizing useSelector alongside Redux, Immutable.js, and TypeScript

Enhance the performance of your React/NextJS app by controlling the rendering of a component and focusing on updating

Angular 2 Guide on macOS Sierra Shows "Page Not Found" Error in Web Browser

Transferring data between components in Ionic 2: Service to Page

Experience the power of combining React with typescript, webpack, and ui-router-react for

Accessing a targeted XML file within a document using Office.js in a Word Add-In

Angular can tailor its view templates to suit either mobile or desktop platforms

Properly incorporating a git+https dependency

The altered closure variable ts remains undetectable

Tips on displaying a spinner only when data is retrieved from an Http service

express-validator not providing any feedback from endpoint when integrated with TypeScript

You cannot directly access an array useState by index in React js, but you can use the map function to