Creating a custom Object Type based on the values of an array of objects using Typescript

Question

Creating a custom Object Type based on the values of an array of objects using Typescript

I have been attempting to create a generic type (Response) that consolidates all values from KeysForResponse, specifically the values from the valueIWant property for each object in MyObject[]. I am struggling to find a solution and wondering if it is even feasible. Essentially, when I input the following array into a function:

[{valueIWant: 'makeMeAKey', foo: 'bar'}, {valueIWant: 'alsoMakeMeAKey', foo: 'bar'}]

I expect to receive the following type as output:

{makeMeAkey: string, alsoMakeMeAKey: string}

This is what I currently have, which lacks generality:

interface MyObject {
  valueIWant: string;
  nonImportantValue: string;
}

type KeysForResponse = Array<MyObject>[number]['valueIWant'];

type Response = {
  [K in KeysForResponse]: string;
};

typescript typescript-generics

Answer 1

Answer №1

In order to access the value associated with that key, you need to specify a generic parameter

type MyCustomObject<T> = {
    desiredValue: T;
}

function customFunction <T extends string, O extends MyCustomObject<T>> (request: O[]) : {[x in O["desiredValue"]]: string}  {
    return request.reduce((accumulator, current) => {
        return {
            ...accumulator,
            [current.desiredValue]: 'bar'
        }
    }, {} as {[x in O["desiredValue"]]: string})
}

const output = customFunction([{desiredValue: 'key1', bar: 'bar'}, {desiredValue: 'key2', bar: 'bar2'}]);

Answer 2

In order to access the value associated with that key, you need to specify a generic parameter

type MyCustomObject<T> = {
    desiredValue: T;
}

function customFunction <T extends string, O extends MyCustomObject<T>> (request: O[]) : {[x in O["desiredValue"]]: string}  {
    return request.reduce((accumulator, current) => {
        return {
            ...accumulator,
            [current.desiredValue]: 'bar'
        }
    }, {} as {[x in O["desiredValue"]]: string})
}

const output = customFunction([{desiredValue: 'key1', bar: 'bar'}, {desiredValue: 'key2', bar: 'bar2'}]);

Creating a custom Object Type based on the values of an array of objects using Typescript

Answer №1

Similar questions

Obtaining the value of an ion-toggle in Ionic2 using the ionChange

retrieve document data from firestore using the service

Learn how to set up a class using TypeScript decorators

Leveraging Angular's catchError method to handle errors and return

Implementing TypeScript/Angular client generation using Swagger/OpenAPI in the build pipeline

Getting the first nested object within an object in Angular 8: A comprehensive guide

Verify whether an object possesses all the attributes of a class in TypeScript

I'm trying to determine in Stencil JS if a button has been clicked in a separate component within a different class. Can anyone assist

Defining types for functions that retrieve values with a specified default

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

Incorporating a particular JavaScript library into Angular 4 (in case the library doesn't have a variable export)

Deployment failure due to undetected development keys in gitignore

Angular 2 is having trouble identifying a component that was imported from a module

An issue has occurred: The module named 'ApprovalModule' must be compiled using the JIT compiler, however, the necessary compiler '@angular/compiler' is not currently accessible

What is the method to make a String bold when sending it through a messaging service?

Enhance the API response for Angular service purposes

Exploring ways to fetch an HTTP response using a TypeScript POST request

Is it possible to update the text within a button when hovering over it in Angular?

Solving the problem of cookieParser implementation in NestJS

The attribute 'map' is not found in the object 'MapPage'