Generic type for an array of objects, with custom object property names

Question

I have a data property inside of an object I'm looking to type in Typescript. It looks like the following:

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

I would like to be able to instantiate types of this structure using a generic but can't quite wrap my mind around what I should be doing. Here are the requirements:

key and value are the base "keys" that must be supplied, but there may be others: description for instance
options should always be an array of objects containing only the values of the key, value, and possibly description defined below

I have no problems typing this literally (like in the above example). But if I want to supply custom keys and values ("myKey" and "myValue" respectively), or if I want to specify other options like a description beyond the key and value, I cannot figure out how to do such.

The desired solution would be for me to do something like this:

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

Seems you also need a type for the mapped key (i.e. "myKey"). Does this meet your needs? tsplay.dev/mb0r2w — Alex Wayne
– Alex Wayne, Commented Apr 25, 2022 at 23:21
That's fairly close @AlexWayne, but I don't necessarily need to specify the values of key and value. Those values will end up being the properties of the options array of objects, but injecting their values is not necessary... and in fact, the values will not be present at this location in the code. I would simply like to say "define the string for the key, define the string for the value, and use those to form the object inside of the options array". — cereallarceny
– cereallarceny, Commented Apr 25, 2022 at 23:26
Well then this? tsplay.dev/m3yqLw Problem I'm not sure where those other options like description or how they should be treated. Maybe you can add an example showing those? — Alex Wayne
– Alex Wayne, Commented Apr 25, 2022 at 23:33
Do the additional keys just go in options? tsplay.dev/wXK08W — Alex Wayne
– Alex Wayne, Commented Apr 25, 2022 at 23:56
They do, yes. But every time they're included in the options they must also be present as a property with a string value outside of options. Remember, the values of the "outside properties" are the KEYS of the options array of objects. — cereallarceny
– cereallarceny, Commented Apr 26, 2022 at 0:01

Alex Wayne · Accepted Answer · 2022-04-26 00:12:38Z

I think you want a type like 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] }
}

Here K is the string literal for the key and V is for the value. Then it accepts a third parameter for a mapping of other custom properties.

Which you use like this:


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';
    };
}
*/

Collectives™ on Stack Overflow

Generic type for an array of objects, with custom object property names

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related