Typescript: reduce object of objects

Question

Struggling a bit getting a reduce function working with typescript - both the types and the return value - omitting some controls from storybook (added two TS errors in the code marked ** ERROR **)

Can anyone advise of the correct solution and how I get rid of the messages?

const controlsToOmit: string[] = [
  'connectedLeft',
  'connectedRight',
];

interface Props {
  accumulator: {
    [key: string]: {
      table: {
        disable: true;
      };
    };
  };
  value: string;
}

const controlsToOmitArgTypes = controlsToOmit.reduce<Props>(
  (accumulator, value) => ({
    ...accumulator,
    [value]: {
      table: {
        disable: true,
      },
    },
  }),
  {} ** Argument of type '{}' is not assignable to parameter of type 'Props' **
);

export default {
  title: 'Components/Buttons/ButtonMeta',
  component: ButtonMetaComponent,
  argTypes: {
    ...controlsToOmitArgTypes, ** Spread types may only be created from object types. **
  },
};

The controlsToOmitArgTypes returns the following object

{
    "connectedLeft": {
        "table": {
            "disable": true
        }
    },
    "connectedRight": {
        "table": {
            "disable": true
        }
    },
}

Ultimately the correct use of typescript here which would also get rid of the errors. I have achieved getting rid of the warnings by adding reduce(accumulator: Record<string, unknown>, value: string) but it's probably not the best solution? — webknit
– webknit, Commented Nov 15, 2022 at 14:04
That removes the error @KonradLinkowski but it now type hints for controlsToOmitArgTypes.accumalator/value. Which isn't what I was expecting in my return object (code snippet in my post), is my type wrong from what I expect to return? — webknit
– webknit, Commented Nov 15, 2022 at 14:08
The type parameter for reduce is indicating what is the type for the second argument. You used Props so reduce expects that {} is of type Props. .reduce<Record<string, unknown>>( would probably fix the issue without casting — Konrad
– Konrad, Commented Nov 15, 2022 at 14:14

Konrad · Accepted Answer · 2022-11-15 14:16:59Z

3

The type argument of reduce is used to indicate the return type

You want to return a structure like:

[key: string]: {
  table: {
    disable: true;
  };
};

const controlsToOmit: string[] = [
  'connectedLeft',
  'connectedRight',
];

interface Props {
  [key: string]: {
    table: {
      disable: true;
    };
  };
}

const controlsToOmitArgTypes = controlsToOmit.reduce<Props>(
  (accumulator, value) => ({
    ...accumulator,
    [value]: {
      table: {
        disable: true,
      },
    },
  }),
  {}
);

answered Nov 15, 2022 at 14:16

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript: reduce object of objects

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