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

When converting a .ts file to a .js file using the webpack command, lengthy comments are automatically appended at the end of

How can JSON be best connected in Angular for optimal performance?

Tips for including additional properties to a <button> element using ReactJS and Typescript

Adding a method to an object with TypeScript: A step-by-step guide

What's stopping me from using useState() to assign API data to an array?

Determine if a condition is met in Firebase Observable using scan() and return the

Updates to TypeScript 2.3.1 creating disruptions in SystemJS plunk

Using ngIf to validate an empty string in Angular 5

Transmit information using JSON format in Angular 8 using FormData

Tips for expanding third-party classes in a versatile manner using Typescript

What is the recommended approach for managing state in React when multiple components are trying to access and modify its data at the same time?

What could be preventing my state from changing to false when I click the close button on the menu?

Is it possible for Angular2 to map a lone JSON object?

Issue: The TypeError reported is due to the absence of any definition for "_co.category.category_type"

The language in the React Native app remains unchanged despite utilizing i18next.changeLanguage

I am in need of assistance with incorporating a particular hibernate Inheritance mapping into my project

Error: It is not possible to assign a value to the Request property of the Object since it only has a getter method

How to retrieve a variable from an object within an array using AngularJS code

WebStorm displays all imported items as unused in a TypeScript backend project

The rapid execution of code causing an observable race condition