TS question with CalendarState | RangeCalendarState in CalendarCell.tsx

[mattwendzina]

I have created a reusable Calendar that can be used for a single Calendar and a Range Calendar.

In my CalendarCell.tsx file I have defined state as a union:

interface CellProps extends AriaCalendarCellProps {
    currentMonth: CalendarDate;
    state: CalendarState | RangeCalendarState;
}

export const CalendarCell = ({ currentMonth, date, state }: CellProps) => {
...

This is causing an issue because I am doing some conditional styling for the RangeCalendar which I saw in one of Styled Examples:

 const isSelectionStart = state.highlightedRange
        ? isSameDay(date, state.highlightedRange.start)
        : isSelected;
    const isSelectionEnd = state.highlightedRange
        ? isSameDay(date, state.highlightedRange.end)
        : isSelected;

I get a TS error on highlightedRange because this only exists on RangeCalendarState and not CalendarState. I'm a TS newbie and don't know how to write this in such a way that I can almost do a TS if check or typeof check first so that it knows whether highlightedRange will be an available bit of state.

If anyone has any ideas how I could achieve this that would be much appreciated = )

[mattwendzina]

I've gone with the solution of just casting it prior to these checks, but interested if anyone has any better solutions.

const rangeState = state as RangeCalendarState
 const isSelectionStart = state.highlightedRange
        ? isSameDay(date, state.highlightedRange.start)
        : isSelected;
    const isSelectionEnd = state.highlightedRange
...

[mechadragon01]

I have the same issue. Although, not sure how you casted without TS issues:
Conversion of type 'CalendarState' to type 'RangeCalendarState' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first

Edit: This is what I did

  const rangeState = state as unknown as RangeCalendarState;
  const isSelectionStart = rangeState.highlightedRange
    ? isSameDay(date, rangeState.highlightedRange.start)
    : isSelected;
  const isSelectionEnd = rangeState.highlightedRange
    ? isSameDay(date, rangeState.highlightedRange.end)
    : isSelected;

[devongovett]

You could use 'highlightedRange' in state in the conditional, which TS can use to infer the type:

const isSelectionStart = 'highlightedRange' in state
        ? isSameDay(date, state.highlightedRange.start)
        : isSelected;