A guide on combining two native Record types in TypeScript

Question

A guide on combining two native Record types in TypeScript

Is it possible to combine two predefined Record types in TypeScript?

Consider the two Records below:

var dictionary1 : Record<string, string []> ={
    'fruits' : ['apple','banana', 'cherry'],
    'vegetables' : ['cucumber','onion']
};

var dictionary2 : Record<string, string []> ={
    'fruits' : ['apple','banana', 'orange', 'pear'],
    'vegetables' : ['cucumber','corn'],
    'beverages' : ['soda']
};

I want to merge these two Records to achieve the following combined result:

var mergedDictionary : Record<string, string []> ={
    'fruits' : ['apple','banana', 'cherry', 'orange', 'pear'],
    'vegetables' : ['cucumber','onion', 'corn'],
    'beverages' : ['soda']
};

javascript typescript

Answer 1

Answer №1

Here is a possible solution - I have not yet tested it for performance

Check it out on typescriptlang.org/play

const dict1 : Record<string, string []> ={
    'fruits' : ['apple','banana', 'cherry'],
    'vegetables' : ['cucumber','onion'],
    'meats': ['beef']
};

const dict2 : Record<string, string []> ={
    'fruits' : ['apple','banana', 'orange', 'pear'],
    'vegetables' : ['cucumber','corn'],
    'beverages' : ['soda']
};

const mergedDict: Record<string, string []> = [dict1, dict2]
.reduce((acc, dic) => {
    const updated = Object.keys(dic).reduce((agg, key) => { return { ...agg, [key]: [...new Set([...(agg[key] || []), ...dic[key]])]}; }, acc);
    return { ...acc, ...updated };
}, {} as Record<string, string[]>);

console.log({ mergedDict });

The first reduce function combines the keys of the dictionaries
For each key, the content of the arrays needs to be combined
The second reduce merges the arrays for each key
If the key does not exist in the source map, we use a hack (agg[key] || []) to return an empty array
To avoid duplicates, a set is used and then converted back into an array
```
[...new Set(/* merged arrays */)]
```

And here is the final result:

{
  "mergedDict": {
    "fruits": [
      "apple",
      "banana",
      "cherry",
      "orange",
      "pear"
    ],
    "vegetables": [
      "cucumber",
      "onion",
      "corn"
    ],
    "meats": [
      "beef"
    ],
    "beverages": [
      "soda"
    ]
  }
}

Answer 2

Here is a possible solution - I have not yet tested it for performance

Check it out on typescriptlang.org/play

const dict1 : Record<string, string []> ={
    'fruits' : ['apple','banana', 'cherry'],
    'vegetables' : ['cucumber','onion'],
    'meats': ['beef']
};

const dict2 : Record<string, string []> ={
    'fruits' : ['apple','banana', 'orange', 'pear'],
    'vegetables' : ['cucumber','corn'],
    'beverages' : ['soda']
};

const mergedDict: Record<string, string []> = [dict1, dict2]
.reduce((acc, dic) => {
    const updated = Object.keys(dic).reduce((agg, key) => { return { ...agg, [key]: [...new Set([...(agg[key] || []), ...dic[key]])]}; }, acc);
    return { ...acc, ...updated };
}, {} as Record<string, string[]>);

console.log({ mergedDict });

The first reduce function combines the keys of the dictionaries
For each key, the content of the arrays needs to be combined
The second reduce merges the arrays for each key
If the key does not exist in the source map, we use a hack (agg[key] || []) to return an empty array
To avoid duplicates, a set is used and then converted back into an array
```
[...new Set(/* merged arrays */)]
```

And here is the final result:

{
  "mergedDict": {
    "fruits": [
      "apple",
      "banana",
      "cherry",
      "orange",
      "pear"
    ],
    "vegetables": [
      "cucumber",
      "onion",
      "corn"
    ],
    "meats": [
      "beef"
    ],
    "beverages": [
      "soda"
    ]
  }
}

A guide on combining two native Record types in TypeScript

Answer №1

Similar questions

Displaying an iframe in Internet Explorer

Unlocking the power of URL manipulation in Fastify using Node.js

A beginner's guide to efficiently indexing tables in AngularJS

Having trouble uploading an image using the Cloudinary API in a Next.js project

Safari displays the contents of JSON files instead of automatically downloading them

Why isn't data coming through after sending ajax post requests?

I attempted to use the Stripe API, but it seems to be non

What is the best way to arrange an array or display it accurately?

Is it possible for me to save external CDN JavaScript files to my local system?

What could be the reason for this function failing to calculate the mean of a set of data points?

Getting the Value from a Promise into a Variable in a React Component

Swap out internal Wordpress hyperlinks for Next.js Link Component

Upgrade jQuery visibility and opacity animations to pure JavaScript for a more lightweight solution

A windows application developed using either Javascript or Typescript

Stop the loop in cypress

Ways to position divs without causing them to collapse or override existing divs

Exploring JSON data in AngularJS

How should one approach working with libraries that do not have type definitions in TypeScript?

utilizing the angularjs $scope variable within a jquery bind method

Is there a way to identify the index of user input when using the .map method?