当与 Omit 一起使用时，type Props 在 react 和 typescript 中意味着什么？

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?

Answer 1

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.

Answer 2

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.

Answer 3

在 react 中，props 代表属性，它通常从一个组件传递到另一个组件。