Error: Unable to assign generic type due to type mismatch

Question

Error: Unable to assign generic type due to type mismatch

I'm struggling to understand the type error generated by the following code. Can anyone point out what I might be doing incorrectly?

Type '(state: State) => State' is not assignable to type 'Action'.
  Types of parameters 'state' and 'state' are incompatible.
    Type 'S' is not assignable to type 'State'.

The error occurs specifically on line 14 (const action: Action = ...).

interface IState {
  count: number;
}

class State implements IState {
  count: number;
}

type Action = <S>(state: S) => S
type Dispatch = <A extends Action>(action: A) => void

const dispatch = (action: Action) => { }

const action: Action = (state: State) => state

dispatch(action)

I would expect State and the generic type S to be compatible.

TS playground

typescript

Answer 1

Answer №1

Action is a versatile function that can be called with any type that meets the specified type constraints for a given type parameter.

Here's an example of code that compiles smoothly:

declare const action: Action;
action({ count: 0 }); //should return  {count :number } 
action({ sum: 0 }); //should return  {sum :number } 
action({ msg: "Some text" }); //should return  {msg:number }

The issue arises when your function, based on its signature, does not adhere to this flexibility requirement. It takes in a state and returns a state, which doesn't align with the expectations of action.

If your function is simply meant to be an identity function, using any can help make it compatible with the signature:

const action: Action = (state: any) => state

Alternatively, you can implement the function in a generic way:

const action: Action = <T>(state: T) => state

If you're looking for a regular function with a customizable signature for a specific type, you may need to introduce a type argument to Action:

type Action<S> = (state: S) => S
type Dispatch = <A extends Action<any>>(action: A) => void

const dispatch = (action: Action<any>) => { }

const action: Action<IState> = (state) => state
    //declare const action: Action;
action({ count: 0 });
action({ sum: 0 }); // error
action({ msg: "Some text" }); // error


dispatch(action)

Answer 2

Action is a versatile function that can be called with any type that meets the specified type constraints for a given type parameter.

Here's an example of code that compiles smoothly:

declare const action: Action;
action({ count: 0 }); //should return  {count :number } 
action({ sum: 0 }); //should return  {sum :number } 
action({ msg: "Some text" }); //should return  {msg:number }

The issue arises when your function, based on its signature, does not adhere to this flexibility requirement. It takes in a state and returns a state, which doesn't align with the expectations of action.

If your function is simply meant to be an identity function, using any can help make it compatible with the signature:

const action: Action = (state: any) => state

Alternatively, you can implement the function in a generic way:

const action: Action = <T>(state: T) => state

If you're looking for a regular function with a customizable signature for a specific type, you may need to introduce a type argument to Action:

type Action<S> = (state: S) => S
type Dispatch = <A extends Action<any>>(action: A) => void

const dispatch = (action: Action<any>) => { }

const action: Action<IState> = (state) => state
    //declare const action: Action;
action({ count: 0 });
action({ sum: 0 }); // error
action({ msg: "Some text" }); // error


dispatch(action)

Error: Unable to assign generic type due to type mismatch

Answer №1

Similar questions

Plot the components of an array and calculate the instances that JavaScript executes

When trying to set the focus on the first item in a list using HTML and Angular, the focus unexpectedly shifts to the second

Encountered an issue in React Native/Typescript where the module 'react-native' does not export the member 'Pressable'.ts(2305)

A Guide to Iterating Through Arrays of Objects Using TypeScript

The current version of Firebase functions is not reflecting the most recent modifications when running "firebase serve"

The JsonFormatter is throwing an error because it is trying to access the property 'on' of an undefined variable

Incorporating OpenLayers and TypeScript: Issue with Event.map.forEachFeatureAtPixel, where the argument type is not compatible with the parameter type

In Typescript, type errors in Object Spread Syntax are not causing any issues

Execute an Asynchronous Operation in NgRx After Triggering an Action

Having difficulty invoking the forEach function on an Array in TypeScript

Tips for testing a mapbox popup using jasmine testing?

Is there a way to prevent TypeScript from flagging static members on a function as errors?

The function within the Context Hook has not been invoked

Troubles with applying Global Themes in StyledComponents for React Native

Retrieving the input[text] value in TypeScript before trimming any special characters

Missing 'id' property in object {`id`} when utilizing GraphQL with Typescript

Comparing vue.component to using import statements inside a component

How do I implement branch code using TypeScript types in Svelte?

Cannot locate: Unable to find the module '@react-stately/collections' in the Next.js application

Is it possible for two distinct TypeScript interfaces to share identical keys while allowing for varying values?