Convert an array of objects into a singular object while preserving data types in TypeScript

Question

Convert an array of objects into a singular object while preserving data types in TypeScript

I have an array filled with objects containing keys name and value. My goal is to merge these objects into a single object, where the keys correspond to the name property and the values correspond to the value property of the input objects.

type Input = { name: string, value: any }[]
type Output = Record<string, any> // Key-value object { [name]: value }

const input: Input = [
    { name: 'name', value: 'Michal' },
    { name: 'age', value: 24 },
    { name: 'numbers', value: [4, 7, 9] }
]

const getOutput = (input: Input): Output => {
    return input.reduce((output, record) => ({ ...output, [record.name]: record.value }), {})
}

// The output is: { name: 'Michal', age: 24, numbers: [4, 7, 9] } 
const output: Output = getOutput(input)

The provided example works correctly, but it uses the Record<string, any> type for the output. This results in loss of type information for the values. Is there a way to achieve this transformation while preserving the types?

output.age.length // This should trigger a TypeScript error as `number` does not have a `length` property
output.numbers.length // Should be 3
output.address // This should result in a TypeScript error as `input` does not have an `address` property

typescript typescript-generics

Answer 1

Answer №1


type Elem<V> = { name: string, value: V }

type Callback<Item> =
    Item extends { name: infer Name, value: infer Value }
    ? Name extends PropertyKey
    ? Record<Name, Value> : never : never


type Reducer<T extends Array<any>, Acc = {}> =
    T extends []
    ? Acc
    : T extends [infer Head, ...infer Tail]
    ? Reducer<Tail, Acc & Callback<Head>>
    : never

const getOutput = <
    N extends number,
    Value extends number | string | [N, ...N[]],
    Name extends string,
    Item extends { name: Name, value: Value },
    Input extends Item[]
>(input: [...Input]) =>
    input.reduce((output, record) =>
        ({ ...output, [record.name]: record.value }),
        {} as Reducer<Input>
    )

const result = getOutput([
    { name: 'name', value: 'Alex' },
    { name: 'age', value: 30 },
    { name: 'items', value: [1, 2, 3] }
])
result.age // 30
result.name // 'Alex'
result.items // [1, 2, 3]

Playground

Explanation

Reducer and Callback - operate similarly to Array.prototype.reducer, but with recursive iterations. Here is a JavaScript representation of Reducer:


const Callback = (elem) => {
    const { name, value } = elem;
    return { [name]: value }
}

const reducer = (arr: ReadonlyArray<any>, result: Record<string, any> = {}): Record<string, any> => {
    if (arr.length === 0) {
        return result
    }

    const [head, ...tail] = arr;

    return reducer(tail, { ...result, ...Callback(head) }
}

Refer to this answer and my blog for more details.

[...Input] - I utilized variadic tuple types for inferring each object in the array

Answer 2


type Elem<V> = { name: string, value: V }

type Callback<Item> =
    Item extends { name: infer Name, value: infer Value }
    ? Name extends PropertyKey
    ? Record<Name, Value> : never : never


type Reducer<T extends Array<any>, Acc = {}> =
    T extends []
    ? Acc
    : T extends [infer Head, ...infer Tail]
    ? Reducer<Tail, Acc & Callback<Head>>
    : never

const getOutput = <
    N extends number,
    Value extends number | string | [N, ...N[]],
    Name extends string,
    Item extends { name: Name, value: Value },
    Input extends Item[]
>(input: [...Input]) =>
    input.reduce((output, record) =>
        ({ ...output, [record.name]: record.value }),
        {} as Reducer<Input>
    )

const result = getOutput([
    { name: 'name', value: 'Alex' },
    { name: 'age', value: 30 },
    { name: 'items', value: [1, 2, 3] }
])
result.age // 30
result.name // 'Alex'
result.items // [1, 2, 3]

Playground

Explanation

Reducer and Callback - operate similarly to Array.prototype.reducer, but with recursive iterations. Here is a JavaScript representation of Reducer:


const Callback = (elem) => {
    const { name, value } = elem;
    return { [name]: value }
}

const reducer = (arr: ReadonlyArray<any>, result: Record<string, any> = {}): Record<string, any> => {
    if (arr.length === 0) {
        return result
    }

    const [head, ...tail] = arr;

    return reducer(tail, { ...result, ...Callback(head) }
}

Refer to this answer and my blog for more details.

[...Input] - I utilized variadic tuple types for inferring each object in the array

Answer 3

Answer №2

It is important to reevaluate the structure of your input data as it may be causing unexpected results. Consider refining how you manage and process your data for better outcomes.

To address this issue without altering the original input, one approach could be:

const ValueDescriptor = {type:'NUMBER',value:number} | {type:'STRING',value:string} | {type:'NUMBER_ARRAY',value:number[]} /* | ... any custom type*/

type OutputData = Record<string, ValueDescriptor>

Answer 4

It is important to reevaluate the structure of your input data as it may be causing unexpected results. Consider refining how you manage and process your data for better outcomes.

To address this issue without altering the original input, one approach could be:

const ValueDescriptor = {type:'NUMBER',value:number} | {type:'STRING',value:string} | {type:'NUMBER_ARRAY',value:number[]} /* | ... any custom type*/

type OutputData = Record<string, ValueDescriptor>

Convert an array of objects into a singular object while preserving data types in TypeScript

Answer №1

Answer №2

Similar questions

Update the appearance by utilizing ngModelChange

When using http.get(), both Promise and Observable may encounter failures

A guide on implementing a Type Guard check for an Indexed Property

Can discriminated unions solely be utilized with literal types?

Having trouble establishing a connection to the TyreORM Module database while using a Postgres Docker image

Implement a T3 App Redirect in a TRPC middleware for unsigned users

Is it possible to utilize types as constants in a switch statement?

TypeScript: Despite declaring specific types, generic functions still treat parameters as "any"

The Angular 4 directive appears to be showing 'undefined' when accessing @input values

Implementing a more efficient method for incorporating UUIDs into loggers

Can Angular ping local addresses in a manner similar to using the terminal?

The element 'mdb-range-input' is not recognized. To ensure that it is a valid Angular component, please confirm that it is included in this module

Utilizing TypeScript Partials: Efficiently transferring selected fields between objects

Arranging a list of objects in Angular 6

Defining RefObject effectively in TypeScript

After compiling typescript, ES6 Map.forEach is unexpectedly not a function

Translate JSON to TypeScript class. If the property is an object and not present in the JSON, the class should contain an empty object

Tips for utilizing ngIf based on the value of a variable

Issue during Firebase production: emptyChildrenSingleton isn't recognized

An issue arising with the TypeScript antlr4ts listener type