Typescript converting an array of objects to a Map

Question

I have the following array:

const myArray = [{
   a: 'test',
   b: 1
}, {
   a: 'test1',
   b: 2
}];

I would like to convert this array to a Map, based on one of it's properties, and maintain a strongly typed code, with a function like this:

convertArrayToMap<TObject extends {}, TArray extends TObject[], TProperty extends keyof TObject>(inputArray: TArray, property: TProperty): Map<TProperty, TObject> {
   // ... logic goes here <-- I AM AWARE of the logical code, this is not what I need, I need help in typing my function
}

I am having two troubles with the typings here:

when I try to use the function, typescript implies TProperty as never, yet it correctly identifies the TArray type. Why is this happening?
the way how this is written at the moment, the returned Map is set to have keys of the TProperty value, but instead of that, I would need keys typed as the type of the TProperty from the object. I tried with typeof TProperty but typescript complains.

In general, here is an example, on how the function should work:

const map = convertArrayToMap(myArray, 'a'); // this should be a Map<string, { a: string, b: number}> type 
console.log(map.get('test').b); // this logs 1 on the screen

Parzh · Accepted Answer · 2021-11-04 10:29:19Z

1

Try this one:

function convertArrayToMap<
  TObject extends object,
  TProperty extends keyof TObject,
>(
  inputArray: TObject[],
  property: TProperty,
): Map<TObject[TProperty], TObject> {
  // ...
}

Here's also a link to playground.

edited Nov 4, 2021 at 10:29

answered Nov 4, 2021 at 10:19

Parzh

10.2k4 gold badges48 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Adam Baranyai Over a year ago

yes, this solves part of my problem, but, my Map now states that it is a Map<'a', { a: string, b: number}> instead of it being a Map<string, { a: string, b: number}>, so that still remains. :( (based on the example in the original question)

Parzh Over a year ago

Isn't Map<'a', ...> better for your needs than Map<string, ...>?

Parzh Over a year ago

I can change this, I'm just asking

Parzh Over a year ago

Oh, right, I misunderstood the question. You want a value of the property to be the key. Got it, on it

Adam Baranyai Over a year ago

doesn't Map<'a', ...> mean that it is a map that has a single a key?

captain-yossarian from Ukraine · Accepted Answer · 2021-11-04 11:08:26Z

If you are interested in infering the literal type, you can consider thsis example:

export { }; // ignore this

type Overloading<
  Tuple extends any[],
  Prop extends keyof Tuple[number],
  Result extends Map<never, never> = Map<never, never>
  > =
  Tuple extends []
  ? Result
  : Tuple extends [infer Head, ...infer Tail]
  ? Prop extends keyof Head ? Overloading<Tail, Prop, Result & Map<Head[Prop], Head>> : never : never

declare function convertArrayToMap<
  Key extends PropertyKey,
  Value extends string | number,
  Obj extends Record<Key, Value>,
  Prop extends keyof Obj,
  Tuple extends Obj[]
>(
  tuple: [...Tuple],
  property: Prop,
): Overloading<[...Tuple],Prop>;


const map = convertArrayToMap([
  {
    id: "123",
    name: "John Doe",
    age: 42,
  },
  {
    id: "456",
    name: "Jane Doe",
    age: 17,
  },
], 'id');

// {
//     id: "123";
//     name: "John Doe";
//     age: 42;
// }
const person = map.get("123"); // this is `{id: 123, name:'JohnDoe'} | undefined`
const name = person!.name; "John Doe"

PLayground

Overloading iterates through provided tuple, and creates an overloading of Map data structure for appropriate key.

Drawback: it works only with literal argument or with as const assertion.

More about inference on function arguments you can find in my blog

Keep in mind, that intersection of Map<string, number> & Map<number,string> creates an overloading:


type Overloading = Map<string, number> & Map<number,string>;

declare const map: Overloading;

map.get('hello') // number | undefined
map.get(42) // string | undefined

Collectives™ on Stack Overflow

Typescript converting an array of objects to a Map

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related