Currently, I am working on implementing a tagged union type pattern for my action creators within a redux application. The TypeScript compiles without any issues, however, my code editor, Visual Studio Code 1.26.1, is flagging an error.
[ts] Type 'boolean | { open: boolean; }' is not assignable to type 'boolean'. Type '{ open: boolean; }' is not assignable to type 'boolean'.
The version of TypeScript displayed in the bottom right corner is TypeScript 3.0, which aligns with the version being used in my project. According to my understanding of TypeScript, it should be able to infer the correct type based on the value provided. While this functionality appears to be working from a TypeScript perspective, the error in VS Code persists.
reducer
import { Action } from '../actions';
interface State {
open: boolean;
};
const defaultState : State = {
open: false,
};
export default (state = defaultState, { type, payload } : Action) : State => {
switch(type) {
case 'PASSWORD/OPEN':
return { ...state, open: payload } // ERROR here on open property
}
}
actions/index.ts
import { PasswordAction, openPassword, closePassword } from './password';
export type Action = PasswordAction;
export default {
openPassword,
closePassword,
};
actions/password.ts
interface OpenAction {
type: 'PASSWORD/OPEN';
payload: boolean;
}
interface CloseAction {
type: 'PASSWORD/CLOSE';
payload: { open: boolean; };
}
export type PasswordAction = OpenAction | CloseAction;
export const openPassword = () : OpenAction => ({
type: 'PASSWORD/OPEN',
payload: true,
});
export const closePassword = () : CloseAction => ({
type: 'PASSWORD/CLOSE',
payload: {open: false},
});
Disclaimer
This issue might not be directly related to programming and could potentially be considered off-topic. Initially, I planned to raise the question on their GitHub page, but upon reviewing the issue checklist, it suggested asking questions here. Since I am uncertain if this is a bug, I wanted to seek clarification here first.