typescript-playground | TypeScript Playground | Editor library

The problem is that the compiler doesn't know that value is of the type corresponding to fieldId.

I solved it by extracting the key type:

I don't know which version or config is used in stackbliz so it is hard to say why you are not getting error.

However, the problem is in empty array because empty array, by the default, is infered as never[].

In order to fix this error, you need to use explicit argument for reduce.

There's no way to do what you want.

GenericComponent requires a type that is a subtype of { id: number }. { id?: number } (or { id: number | undefined }) is not compatible with that. In short, GenericComponent assumes that id is always going to be a number - you can't provide it with undefined or no value.

{ id?: number } is a supertype of { id: number }, much like how in classic OOP examples an Animal is a supertype of Cat, and you cannot provide an Animal to an interface that specifically requires a Cat.

The only way to do this is with some kind of wrapper, either like you've written in your example or perhaps by writing a higher-order component. Alternatively, just stick with an if statement - no need to write complicated code when simple code does the job.

Here is a working version.

Props needs to extend PropsWithChildren, like so:

Because you're using intersection type & and it works like that if both of types have the same name of field. You can avoid it like this:

The easiest way is to make the generic FC a regular function, not an arrow function. (React.PropsWithChildren<> emulates what React.FC does to your props type.)

First it's important to determine what the input/output type relationship you want for multiGroupBy(). There is a spectrum of possible relationships; on one end of this spectrum you have simple typings that don't do you much good, like where no matter what you pass into multiGroupBy(), the type that comes out is object. On the other end you have incredibly complicated typings that can potentially represent the exact value that comes out, depending on what goes in... imagine a situation in which you call multiGroupBy([{x: "a", y: "b"}, {x: "a", y: "c"}], ["x", "y"]), and the return value has the type {a: {b: [{x: "a", y: "b"}], c: [{x: "a", y: "c"}]}}. This typing could potentially be easy to use, but at the cost of being quite difficult to implement, and possibly fragile.

So we need to strike a balance between those ends. The simplest typing that seems useful would look like this:

On L21, you set the type of reducer to Reducer. The actual reducer you assigned it is of a different type. While it might seem helpful to try to narrow the specificity on what will be passed to the Reducer, in practice this would be unenforceable: Redux will run every reducer for every action.

You can import { AnyAction } from 'redux'; and use this for the action type, and let the value of state be set via inference.

As specifically documented at https://redux.js.org/recipes/usage-with-typescript#define-typed-hooks , the correct definition is: