[SOLVED] What does type Props mean in react and typescript when used with Omit?

What does type Props mean in react and typescript when used with Omit?

I am new to using typescript and react-dates package.
I am not sure what the below type means

type Props = Omit<
    DayPickerRangeControllerShape,
    | 'numberOfMonths'
    | 'focusedInput'
    | 'onFocusChange'
    | 'hideKeyboardShortcutsPanel'
    | 'noBorder'
>;

function DateRangePicker(props: Props) {
    return (
        <Wrapper>
            <DayPickerRangeController
                {...props}
                numberOfMonths={3}
                onFocusChange={noop}
                hideKeyboardShortcutsPanel
                noBorder
                horizontalMonthPadding={32}
                dayPickerNavigationInlineStyles={{
                    display: 'flex',
                    justifyContent: 'space-between',
                }}
            </Wrapper>
        );
    }

What does the type Props with Omit do here in this case?

Solution

This line function DateRangePicker(props: Props) means that DateRangePicker component props should be compatible with Props type that is defined earlier.

And this block

type Props = Omit<
    DayPickerRangeControllerShape,
    | 'numberOfMonths'
    | 'focusedInput'
    | 'onFocusChange'
    | 'hideKeyboardShortcutsPanel'
    | 'noBorder'
>;

means that type Props should be equal to DayPickerRangeControllerShape interface, but without some of the fields, like numberOfMonths, focusedInput and etc.

Omit basically strips (removes) some fields from interface or type which you pass to it.