Converting an array into an object by using a shared property in each element of the array as the key

Question

Converting an array into an object by using a shared property in each element of the array as the key

I have an item that looks like this:

const obj = [
  { link: "/home", title: "Home1" },
  { link: "/about", title: "About2" },
  { link: "/contact", title: "Contact1" }
] as const

and I want to produce items in the following format:

const menu: MenuItems = {
  "/home": [{ link: "/home", title: "Home2" }] // can also include Home1, but not Contact1
}

Is it achievable to create a type for this? Here's my approach to clarify my intent:

type Obj = typeof obj;
type Item = Obj[number]

type MenuItems = {
  [K in Item["link"]]: Array<Item extends {link: K} ? Item : never>;
}

codesandbox: https://codesandbox.io/s/56564

typescript conditional-types

Answer 1

Answer №1

Although you are on the right track, the issue lies in the fact that your T is a concrete type and not a generic type parameter. Therefore,

T extends { pointer: K } ? T : never

does not distribute over unions as expected. This means that T extends { pointer: K } will simply return false for each choice of K, resulting in never[] instead of the desired outcome.

To regain distributive conditional types, it's recommended to use a type alias similar to

type Something<X> = X extends { pointer: K } ? X : never

, and then substitute Something<T>. Fortunately, the built-in utility type Extract<T, U> already functions this way. So you can utilize the following:

type M = { [K in T["pointer"]]?: Array<Extract<T, { pointer: K }>> };

This will result in:

/* 
type M = {
    "/name"?: ({
        readonly pointer: "/name";
        readonly name: "N1";
    } | {
        readonly pointer: "/name";
        readonly name: "N2";
    })[];
    "/zip"?: {
        readonly pointer: "/zip";
        readonly name: "Z1";
    }[];
}
*/

This output aligns more closely with your expectations. Note that I made the properties optional since your constant m lacks some properties:

const m: M = {
    "/name": [{ pointer: "/name", name: "E2" }]
}; // should work

I hope this clears things up; best of luck!

Link to Playground with code

Answer 2

Although you are on the right track, the issue lies in the fact that your T is a concrete type and not a generic type parameter. Therefore,

T extends { pointer: K } ? T : never

does not distribute over unions as expected. This means that T extends { pointer: K } will simply return false for each choice of K, resulting in never[] instead of the desired outcome.

To regain distributive conditional types, it's recommended to use a type alias similar to

type Something<X> = X extends { pointer: K } ? X : never

, and then substitute Something<T>. Fortunately, the built-in utility type Extract<T, U> already functions this way. So you can utilize the following:

type M = { [K in T["pointer"]]?: Array<Extract<T, { pointer: K }>> };

This will result in:

/* 
type M = {
    "/name"?: ({
        readonly pointer: "/name";
        readonly name: "N1";
    } | {
        readonly pointer: "/name";
        readonly name: "N2";
    })[];
    "/zip"?: {
        readonly pointer: "/zip";
        readonly name: "Z1";
    }[];
}
*/

This output aligns more closely with your expectations. Note that I made the properties optional since your constant m lacks some properties:

const m: M = {
    "/name": [{ pointer: "/name", name: "E2" }]
}; // should work

I hope this clears things up; best of luck!

Link to Playground with code

Converting an array into an object by using a shared property in each element of the array as the key

Answer №1

Similar questions

Access to the server has been restricted due to CORS policy blocking: No 'Access-Control-Allow-Origin'

The Context API's `useContext` hook appears to be malfunctioning, persistently

Explore Angular's ability to transform a nested observable object into a different object

Issue with page break functionality during print preview

Ways to activate auto completion without using a string

"Using Angular and TypeScript to dynamically show or hide tabs based on the selected language on a website

Issue encountered in Loopback 4: Error with @repository dependency injection (TypeError: Undefined property 'findOne')

Angular dynamic array binding binds to multiple elements rather than just one

Is there a way to retrieve the Incoming Message object in Angular using HttpClient?

Displaying Well-Formatted XML in Angular2 Using Typescript

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

Why is it considered an error when an index signature is missing in a type?

Tips for utilizing chodorowicz / ts-debounce effectively

What steps can I take to improve this code and prevent the error "Property 'patient' does not exist on type 'Request<ParamsDictionary>'" from occurring?

When using the e.target.getAttribute() method in React, custom attributes may not be successfully retrieved

What is the most efficient way to update data multiple times by mapping over an array of keys in a react hook?

I am experiencing an issue with my date filter where it does not display any results when I choose the same date for the start and end dates. Can anyone help me troub

In the search for "action.payload" using Redux Toolkit

Creating a new endpoint within the Angular2 framework using typescript

Guide for releasing a typescript package compatible with both node and react applications