I want to concatenate 2 arrays of nested objects of different types with lodash concat method. However typescript linter rise error about 2nd array type. My first array is:

[
  {
    Header: '...',
    accessor: '...',
    minWidth: 200,
    Filter: {...},
    filter: {...},
    Aggregated: () => null,
  },
  {
    Header: '...',
    accessor: '...',
    minWidth: 200,
    Filter: {...},
    filter: {...},
    Aggregated: () => null,
  },
  {
    Header: '...',
    accessor: '...',
    minWidth: 200,
    Aggregated: () => null,
  },
  {
    Header: '...',
    accessor: '...',
    minWidth: 200,
  },
  ...
]

Where Filter and filter are big nested objects. My second array is:

[
  {
    Header: '...',
    accessor: '...',
    disableGroupBy: true,
  }
]

I am getting typescript linter error

Type '{ Header: string; accessor: string; disableGroupBy: boolean; }' is missing the following properties from type {...} : minWidth, Filter, filter.

Note that there is no Aggregated property requirement.

Lodash documentation says about concat:

Creates a new array concatenating array with any additional arrays and/or values.

1. Does it mean I can only concat flat objects or primitive values?
2. Can I concat only arrays of nested objects of the same types?
3. Should I use different method?

CodePudding user response：

In this case, it's okay to use lodash's concat.

The reason you're getting Type Error is because TypeScript's trying to infer the type for your second array based on your first array, but this type inference is not always true.

You can either provide your own type here, or just set it as any if you don't care about the type of the returned array

// provide your type here. This type defines the shape of elements in the result array
concat<{Header: string, minwidth: number, ...}>(array1, array2)

// or set it to any
concat<any>(array1, array2)