Customized object property names for an array of generic object types

Question

Customized object property names for an array of generic object types

I am working with an object in Typescript that has a data property structured like this:

type MyThing = {
  data: {
    options: {
      myKey: string,
      myValue: string
    }[],
    key: 'myKey',
    value: 'myValue'
  }
}

I want to create types of this structure using generics, but I am struggling to figure out the best approach. Here are the requirements:

The base keys key and value must be provided, but additional keys like description could also be included.
The options should always be an array of objects containing only the values of the keys specified (e.g., key, value, and potentially description).

While I can type this structure directly as shown above, I am unsure how to customize it with different keys or include extra options like descriptions.

An ideal solution would allow me to do something like this:

type MyThing = {
  data: DataComposer<['key', 'value']>
  // data: DataComposer<['key', 'value', 'description', ...]>
}

typescript

Answer 1

Answer №1

If you are looking for a type structure similar to this:

type DataComposer<
    K extends string,
    V extends string,
    OtherKeys extends Record<string, string> = Record<never, string>
> = {
    data: {
        options: { [optionKey in K | V | OtherKeys[keyof OtherKeys]]: string}[],
        key: K,
        value: V,
    } & { [OtherKey in keyof OtherKeys]: OtherKeys[OtherKey] }
}

In this context, K represents the string literal for the key while V corresponds to the value. Additionally, it allows for a third parameter for defining other custom properties.

You can implement it as follows:


type MyThing = DataComposer<'myKey', 'myValue'>
/*
type MyThing = {
    data: {
        options: {
            myKey: string;
            myValue: string;
        }[];
        key: "myKey";
        value: "myValue";
    };
}
*/

type MyThingWithOther = DataComposer<'myKey', 'myValue', { foo: 'myFoo' }>
/*
type MyThingWithOther = {
    data: {
        options: {
            myKey: string;
            myValue: string;
            myFoo: string;
        }[];
        key: "myKey";
        value: "myValue";
        foo: 'myFoo';
    };
}
*/

Answer 2

If you are looking for a type structure similar to this:

type DataComposer<
    K extends string,
    V extends string,
    OtherKeys extends Record<string, string> = Record<never, string>
> = {
    data: {
        options: { [optionKey in K | V | OtherKeys[keyof OtherKeys]]: string}[],
        key: K,
        value: V,
    } & { [OtherKey in keyof OtherKeys]: OtherKeys[OtherKey] }
}

In this context, K represents the string literal for the key while V corresponds to the value. Additionally, it allows for a third parameter for defining other custom properties.

You can implement it as follows:


type MyThing = DataComposer<'myKey', 'myValue'>
/*
type MyThing = {
    data: {
        options: {
            myKey: string;
            myValue: string;
        }[];
        key: "myKey";
        value: "myValue";
    };
}
*/

type MyThingWithOther = DataComposer<'myKey', 'myValue', { foo: 'myFoo' }>
/*
type MyThingWithOther = {
    data: {
        options: {
            myKey: string;
            myValue: string;
            myFoo: string;
        }[];
        key: "myKey";
        value: "myValue";
        foo: 'myFoo';
    };
}
*/

Customized object property names for an array of generic object types

Answer №1

Similar questions

When using videojs, I have the ability to include a Text Track event handler, however, there is currently no option to remove it

"Users have reported that the file upload preview feature in Angular 6 only works after the

Finding parameters in Angular 4

What causes an interface to lose its characteristics when a property is defined using index signatures?

The debate between using "this" versus "classname" to access static elements in

What could be causing the HTTP PUT requests to stop functioning properly after a number of requests?

Tips for preventing a wrapped union type from collapsing

Setting up a project in TypeScript with Angular 2(+) and a Node/Express server is essential for successful

The Typescript Select is displaying an incorrect value

Swap out a specific object within an observable array by comparing object properties

Ways to verify whether a checkbox is selected and store the status in the LocalStorage

typescript - instantiate an object using values stored in an array

The html-duration-picker is not being displayed in the proper format

Typescript service wrapper class returning Axios HEAD request

The types for Cypress are not being detected by my Angular tsconfig file

Enhance Material UI with custom properties

Displaying data from an Angular subscription in a user interface form

Tips for utilizing the patchValue method within a dynamic FormArray in Angular

Utilize Material-UI in Reactjs to showcase tree data in a table format

How to eliminate the ng-component tag from an Angular 8 table row template