typescript-playground | This is the YouTube playlist for this repository

You can define a helper type DefinedKeys that uses a mapped type to leave out the keys for which the value includes undefined:

If you're confident that it shouldn't be a Maybe type, you can cast it:

Most of what you are trying to achieve here is done out of the box by Redux Toolkit. But it's still a good exercise to write things yourself! You're on the right path but there are a few changes that need to be made to your typings.

ActionTypes is an enum so the type that describes its members is just ActionTypes rather than keyof ActionTypes.

Rather than using a generic for the action in the reducer, you want to say that the reducer can take an action which is a union of the all the valid actions. We can use a mapped type for this.

My first attempt

Either you know exactlyn what you are returning and then you returns the precise type :

playground

The problem is that your addEventListener() typing has no idea how the type parameter relates to the subtype of Event that handler should accept. In the TypeScript standard library file lib.dom.d.ts, individual EventTarget types are given a very specific mapping from type to handler. For example, the Window interface's signature for its addEventListener method looks like this:

You need to Omit the theme property from the props of the wrapped component:

This is due to the nature of type resolvement in typescript. When you type a variable: Lets say to be a number (let a: number) it can contain all sub types of number. This works for union types (let a: 1 | 2 | 3) as well as objects. So a type {a: number, b: number}, can be implemented with any object, as long as it has the keys a and b as (subtypes of) number. Also, usually there is no need to prevent the further spesification of types since all functions / classes working with the interface (e.g. System) will have all System properties types as expected. They dont care about the rest.

Note that there is an exception to this rule. When you require an object as parameter of your function, and you are declaring it inline (on the function call), typescript will throw an error.

When you refer to a generic parameter in the interface or class definition, you should not create one in the method. Right now TypeScript is correctly pointing out that T coming from Array is not the same as T coming from pluck. So if you remove one in the interface definition, everything is fine:

1. Determine an object which contains all the key/values to be copied.
2. Use reduce for each property you want to copy, starting with an empty object.
3. Combine the target object with the values you want to overwrite.