Learn how to create a versatile TypeScript function that combines an array parameter and values to form an object

Question

Learn how to create a versatile TypeScript function that combines an array parameter and values to form an object

I've created a function that combines an array of keys with an array of values to form an object. Here's how the function looks:

function mergeToObject(keys: string[], values: string[]) {
  const object:? = {}
  for (let i = 0; i < keys.length; i++) {
    object[keys[i]] = values[i] // TypeScript raises an error here
  }
  return object
}

To demonstrate how the function works, consider this example:

mergeToObject(['a', 'b', 'c'], ['x', 'y', 'z']) // => { a: 'x', b: 'y', c: 'z' }

I always provide the keys parameter as a constant like ['a', 'b', 'c'], rather than a dynamic value. Therefore, I believe there must be a generic way to specify the return type containing specific keys such as a, b, and c.

For better understanding, let's look at a more concrete example:

const values = ['x', 'y', 'z']

// If I call the function like this
const object = mergeToObject(['a', 'b', 'c'], values)
// Then the type of object should be `{ a: string, b: string, c: string }`
object.a // is valid
object.b // is valid
object.c // is valid
object.d // is not valid

// Alternatively, if I call the function like this
const object = mergeToObject(['e', 'f', 'g'], values)
// Then the type of object should be `{ e: string, f: string, g: string }`
object.e // is valid
object.f // is valid
object.g // is valid
object.d // is not valid

So, what exactly would the generic syntax look like? Any guidance on this matter would be highly appreciated.

typescript generics

Answer 1

Answer №1

Utilize the Record method:

function convertToRecord(keys: string[], values: string[]) : Record<string, any> {
  const data: Record<string, any> = {}
  for (let i = 0; i < keys.length; i++) {
    data[keys[i]] = values[i] // TypeScript might give an error here
  }
  return data
}

For further details, check this out: https://www.typescriptlang.org/docs/handbook/utility-types.html#example-3

Please note: I have used any as the type for the values, but you can switch it to string if preferred.

Answer 2

Utilize the Record method:

function convertToRecord(keys: string[], values: string[]) : Record<string, any> {
  const data: Record<string, any> = {}
  for (let i = 0; i < keys.length; i++) {
    data[keys[i]] = values[i] // TypeScript might give an error here
  }
  return data
}

For further details, check this out: https://www.typescriptlang.org/docs/handbook/utility-types.html#example-3

Please note: I have used any as the type for the values, but you can switch it to string if preferred.

Answer 3

Answer №2

METHOD 1

You can define an interface and assign it like this:

interface combineObject {
   [key: string]: string
}

Here, combineObject represents an object with keys and values as strings.

interface combineObject {
   [key: string]: string
}

function mergeToObjKeys(keys: string[], values: string[]): combineObject {
   const obj: combineObject = {}
   for (let i = 0; i < keys.length; i++) {
      obj[keys[i]] = values[i] // TypeScript error occurs here
   }
   return obj
}

const result = mergeToObjKeys(['a', 'b', 'c'], ['x', 'y', 'z']) // => { a: 'x', b: 'y', c: 'z' }
console.log(result)

METHOD 2

interface combineObject {
   [key: string]: string;
}

function mergeToObjReduce(keys: string[], values: string[]): combineObject {
   return keys.reduce((acc: combineObject, curr: string[], index: number) => {
      acc[curr] = values[index];
      return acc;
   }, {});
}

const result = mergeToObjReduce(['a', 'b', 'c'], ['x', 'y', 'z']); // => { a: 'x', b: 'y', c: 'z' }
console.log(result);

Answer 4

METHOD 1

You can define an interface and assign it like this:

interface combineObject {
   [key: string]: string
}

Here, combineObject represents an object with keys and values as strings.

interface combineObject {
   [key: string]: string
}

function mergeToObjKeys(keys: string[], values: string[]): combineObject {
   const obj: combineObject = {}
   for (let i = 0; i < keys.length; i++) {
      obj[keys[i]] = values[i] // TypeScript error occurs here
   }
   return obj
}

const result = mergeToObjKeys(['a', 'b', 'c'], ['x', 'y', 'z']) // => { a: 'x', b: 'y', c: 'z' }
console.log(result)

METHOD 2

interface combineObject {
   [key: string]: string;
}

function mergeToObjReduce(keys: string[], values: string[]): combineObject {
   return keys.reduce((acc: combineObject, curr: string[], index: number) => {
      acc[curr] = values[index];
      return acc;
   }, {});
}

const result = mergeToObjReduce(['a', 'b', 'c'], ['x', 'y', 'z']); // => { a: 'x', b: 'y', c: 'z' }
console.log(result);

Answer 5

Answer №3

A potential solution to the issue can be represented in the following way:

function convertToEntity<
  Keys extends string[], 
  Values extends any[],
  ResultType extends { 
    [Index in keyof Keys as Keys[Index] extends string ? Keys[Index] : never]: Values[Exclude<Index, number> & keyof Values] 
  }
>(keys: readonly [...Keys], values: readonly [...Values]): ResultType {

  const entity: Record<string, any> = {}
  for (let i = 0; i < keys.length; i++) {
    entity[keys[i]] = values[i]
  }
  return entity as ResultType
}

The arrays containing the keys and values are stored in the generic tuple types Keys and Values. The function's return type is captured in ResultType. When dealing with ResultType, we iterate over Keys and use Keys[Index] as the key name for each property. Values[Index] serves as the type for each property. Due to TypeScript's indexing limitations, we need to utilize this syntax:

Values[Exclude<Index, number> & keyof Values]

.

To verify its functionality, a few tests were conducted:

const entityA = convertToEntity(['alpha', 'beta', 'gamma'], ['red', 42, new Date()])
//    ^? const entityA: { alpha: string; beta: number; gamma: Date; }

entityA.alpha
entityA.beta
entityA.gamma
entityA.delta // Error: Property 'delta' does not exist on type '{ alpha: string; beta: number; gamma: Date; }'

const entityB = convertToEntity(['one', 'two', 'three'], [42, 'blue', null])
//    ^? const entityB: { one: number; two: string; three: null; }

entityB.one
entityB.two
entityB.three
entityB.delta // Error: Property 'delta' does not exist on type '{ one: number; two: string; three: null; }'

Playground

Answer 6

A potential solution to the issue can be represented in the following way:

function convertToEntity<
  Keys extends string[], 
  Values extends any[],
  ResultType extends { 
    [Index in keyof Keys as Keys[Index] extends string ? Keys[Index] : never]: Values[Exclude<Index, number> & keyof Values] 
  }
>(keys: readonly [...Keys], values: readonly [...Values]): ResultType {

  const entity: Record<string, any> = {}
  for (let i = 0; i < keys.length; i++) {
    entity[keys[i]] = values[i]
  }
  return entity as ResultType
}

The arrays containing the keys and values are stored in the generic tuple types Keys and Values. The function's return type is captured in ResultType. When dealing with ResultType, we iterate over Keys and use Keys[Index] as the key name for each property. Values[Index] serves as the type for each property. Due to TypeScript's indexing limitations, we need to utilize this syntax:

Values[Exclude<Index, number> & keyof Values]

.

To verify its functionality, a few tests were conducted:

const entityA = convertToEntity(['alpha', 'beta', 'gamma'], ['red', 42, new Date()])
//    ^? const entityA: { alpha: string; beta: number; gamma: Date; }

entityA.alpha
entityA.beta
entityA.gamma
entityA.delta // Error: Property 'delta' does not exist on type '{ alpha: string; beta: number; gamma: Date; }'

const entityB = convertToEntity(['one', 'two', 'three'], [42, 'blue', null])
//    ^? const entityB: { one: number; two: string; three: null; }

entityB.one
entityB.two
entityB.three
entityB.delta // Error: Property 'delta' does not exist on type '{ one: number; two: string; three: null; }'

Playground

Learn how to create a versatile TypeScript function that combines an array parameter and values to form an object

Answer №1

Answer №2

Answer №3

Similar questions

What are some methods for utilizing the "name" attribute within React components?

Changing dates in JavaScript / TypeScript can result in inaccurate dates being displayed after adding days

Tips for resolving the ExtPay TypeError when using Typscript and Webpack Bundle

Is it possible to configure npm to publish to an organization different from the one automatically detected from package.json?

Achieving selective exclusion of specific keys/values while iterating through an array and rendering them on a table using Angular

Issue: The code is throwing an error "TypeError: Cannot read property 'push' of undefined" in the JavaScript engine "Hermes

Error: Module './App' not found in webpack module

Problem with rendering React Router v4 ConnectedRouter on nested routes

There are no call signatures available for the unspecified type when attempting to extract callable keys from a union

Error message: Unable to instantiate cp in Angular 17 application while building with npm run in docker container

What is the best way to perform a conditional check and return a customized object while working with a Promise?

Using Angular and Typescript to implement a switch case based on specific values

Spread operator in Typescript for complex nested collection types

Enhancing Your C# Code with Custom Extension Methods

Utilizing Sequelize to search for existing items or create new ones in a list

Utilizing server-side caching middleware with tRPC version 10

Unable to load custom package in Angular 2 testing environment

Attempting to send numerous identifiers in an API request

Exploring JSONPath in Cypress

Structuring your Angular 6 application and server project