TypeScript Error: key does not exist on type Range

[mateja176]

Subject of the issue

Describe your issue here.

This is a type error, meaning that it does not impact the module's runtime. The prop key is missing in interface Range.

[BUG] Bug Reproduce Steps

Tell us how to reproduce this issue.

The above assumption is backed by the following evidence:

export interface CommonCalendarProps {
  onChange?: (range: OnChangeProps) => void;
  // ...
}

export type OnChangeProps = Range | { selection: Range } | Date;

export interface Range {
    /** default: today */
    startDate?: Date;
    /** default: today */
    endDate?: Date;
}

Whereas at runtime:

<DateRangePicker
  onChange={(item) => {
    if ('selection' in item) {
        setRange(item.selection); // { startDate: 'foo', endDate: 'bar', key: 'selection' }
    }
  }}
  // ...
/>

[BUG] Expected behaviour

The Range interface should be expanded to include the key. Like so:

export interface Range {
    /** default: today */
    startDate?: Date;
    /** default: today */
    endDate?: Date;
  key?: 'selection';
}

Perhaps a better alternative is to adjust the OnChangeProps type to:

export type OnChangeProps = Range | { selection: Range & { key: 'selection' } } | Date;

Environment

Package Version: 1.1.3
React version: 16.9
Node version: 14
Browser: Chrome

[mwq27]

I think this was fixed:

export interface RangeWithKey extends Range {
    key: 'selection';
}

export type OnChangeProps = Range | { selection: RangeWithKey } | Date;

[naufaldi]

I think this was fixed:

export interface RangeWithKey extends Range {
    key: 'selection';
}

export type OnChangeProps = Range | { selection: RangeWithKey } | Date;

still get error when use this type. say
Property 'selection' does not exist on type 'OnChangeProps'. Property 'selection' does not exist on type 'Date'.

[rslohith]

Facing the same issue. @naufaldi were you able to get around this?

[rslohith]

Need to use RangeKeyDict