score:0
This seems odd in that if you do not explicitly return something from an arrow function. I believe that is construed as a "never". So, to me, this seems like the problem. If I am wrong, sorry about that.
const Dispatch = createContext({
dispatch: (action: ActionInterface) => {
//
},
});
score:0
The issue is related to the way you constructed your ActionInterface
type and used it in the reducer.
What you need is to have a way for TypeScript to differentiate the action structure when you pass it to the switch statement.
The best way to solve this is by simply give a hint to TypeScript about your actions and the union type you have.
Look at this example in TypeScript playground
score:3
it is a best practice to define types for action creators separately.
Instead of
interface ActionInterface {
type: string;
value: string | boolean;
}
use two interface and define the type based on that
interface IActionInterface {
type: string;
}
interface IMessageActionInterface extends IActionInterface {
value: string;
}
interface IShowActionInterface extends IActionInterface {
value: boolean;
}
type ActionTypes = IMessageActionInterface | IShowActionInterface;
In Reducer
const Reducer = (state: StateInterface, action: ActionTypes) => { }
score:6
Typescript is not able to determine a safe typecast from IActionInterface
value: string | boolean
to StateInterface
warningShow: boolean
, in this code - warningShow: action.value
. It cannot safely presume that value
will only contain a boolean.
There are several ways to suppress this, a simple one is -
warningShow: action.value as boolean
warningMessage: action.value as string
The as
keyword will assert that the type of value
is a boolean
or string
.
Source: stackoverflow.com
Related Query
- React Typescript - Argument of type is not assignable to parameter of type
- React js Typescript Argument of type 'string' is not assignable to parameter of type 'SetStateAction<number>'
- TypeScript w/ React - Argument of type 'string' is not assignable to parameter of type 'keyof T'
- Typescript React type argument of type not assignable to parameter of type
- Typescript error on React Component: Argument of type 'Element' is not assignable to parameter of type
- Argument of type 'File' is not assignable to parameter of type 'never'. React with TypeScript
- How to fix React TypeScript error: Argument of type '""' is not assignable to parameter of type 'SetStateAction<undefined>'
- react usestate hooks error: argument of type 'yyy' is not assignable to parameter of type 'setstateaction<xx>'
- Typescript React/Redux : Argument of type 'typeof MyClass' is not assignable to parameter of type 'ComponentType<...'
- React with Typescript: Argument of type 'never[]' is not assignable to parameter of type 'StateProperties | (() => StateProperties)'
- React TypeScript: Argument is not assignable to parameter of type 'never'
- React Typescript: Argument of type '{ [x: number]: any; }' is not assignable to parameter of type
- React onclick Argument of type 'EventTarget' is not assignable to parameter of type 'Node'
- Using state and includes in React gives Argument of type 'number' is not assignable to parameter of type 'never' error
- Argument of type 'never[]' is not assignable to parameter of type 'never' when declaring a type in Typescript
- Typescript Error: Argument of type 'NodeListOf<HTMLInputElement> | undefined' is not assignable to parameter of type 'Iterable<HTMLInputElement> ..."
- Stateful Component with Typescript and react-redux: Argument of type 'typeof MyClass' is not assignable to parameter of type Component
- Typescript complaining about React useState setter `Argument of type 'Dispatch<SetStateAction<never[]>>' is not assignable to parameter of
- React and Typescript: Argument of type is not assignable to parameter of type 'EventListenerOrEventListenerObject'
- Using EmailJS in TypeScript for a contact form, Argument of type 'EventTarget' is not assignable to parameter of type... .ts(2345)
- TypeScript - Argument of type 'String' is not assignable to parameter of type 'string'
- Argument of type '(props: ITableProps) => JSX.Element' is not assignable to parameter of type ... - React HOC
- Argument of type is not assignable to parameter of type 'SetStateAction<never[]>'. in React
- Argument of type is not assignable to parameter of type Typescript Error
- ReactJS Typescript Argument of type '{ keyPrefix: string; }' is not assignable to parameter of type string
- React Typescript: Argument of type is not assignable to parameter of type
- How to fix the error argument of type string or undefined is not assignable to parameter of type string using typescript and react?
- TypeScript error Argument of type is not assignable to parameter of type Appstate despite having all necessary types included
- TS and React State - Argument of type 'RangeModifier' is not assignable to parameter of type
- React typescript is not assignable to parameter of type
More Query from same tag
- how can i send message to particular user using socket io in mern app
- Auth0 and react, redirect user to signup page
- Uncaught TypeError: this.state.map is not a function
- How can I handle change in multiple input field and send the data to an api with axios?
- Firebase v9 React JS IndexOf is not a function
- Fetch request stops working if I change route
- React: is there a different between using curly brackets and omitting them?
- How to use React hook in a react class?
- How does Redux Thunk implement
- Check prop values before loading component
- Some component props reset after drop in react-dnd
- How to use clsx in nested components in React
- How to conditionally set a Style variable in JSX (React)?
- How to make background shown on pulldown Black instead of white on safari mobile web with React
- Handle async foreach loop then dispatch to redux
- Bind operation at React
- React Router 3 not rendering correct component
- How to style HTML element tags in MUI?
- react hook form: materail ui: Textfield: onSubmit, not passing Filelist in the data
- How to make JavaScript function runs only when parameter changes
- iterate object entries and render multiple jsx components. NOT ARRAY
- How do I say, in TypeScript, "a component that I can call without props"?
- What's the best way to group a JSON object by a certain value?
- Understanding how to refer to properties in react components
- How do test async components with Jest?
- Calling a function in parent component from a child component - React+flux+alt
- Why methods as arrow functions work in react classes but not in normal classes?
- showing a different component on state change and for loop React js
- AgGrid custom html on drag
- Having problem to desctructure my data on React