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

Question

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?

Please note that `Omit` is a big part of your question and should be in the title (I've made some small updates to try and help out). The code is also case-sensitive, so `Omit` and `omit` are not the same thing. — crashmstr, Aug 31 '20 at 11:48

score 2 · Accepted Answer · answered Aug 31 '20 at 11:43

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.

score 2 · Answer 2 · answered Aug 31 '20 at 11:57

Stating Typescript,

Omit<Type, Keys> Constructs a type by picking all properties from Type and then removing Keys.

Basically, you can use Omit to create a new type from an already existing type by removing certain properties.

For example,

interface Employee {
  id: number;
  name: string;
}

type EmployeeWithoutName = Omit<Employee, "name">;

const employee: Employee = {
  id: 1
  name: "Richard"
};

const employeeWithoutName: EmployeeWithoutName = {
  id: 1
};

employeeWithoutName.name = "Jones"; // Throws an error.

score 0 · Answer 3 · answered Aug 31 '20 at 11:34

0

In react props represent the property, which is generally passed form one component to another component.

answered Aug 31 '20 at 11:34

Ravi Kumar

13
7

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

3 Answers3