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

Question

我刚开始使用 typescript 和 react-dates 包。
我不确定下面的类型是什么意思

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>
        );
    }

在这种情况下，类型 Props 和 Omit 的作用是什么？

Answer 1

在react props中表示属性，一般是从一个组件传递到另一个组件。

Answer 2

这一行 function DateRangePicker(props: Props) 表示 DateRangePicker 组件属性应该与之前定义的 Props 类型兼容。

还有这个街区

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

表示类型Props应该等于DayPickerRangeControllerShape接口，但没有一些字段，如numberOfMonths、focusedInput等

Omit 基本上从您传递给它的接口或类型中剥离（删除）一些字段。

Answer 3

说明打字稿，

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

基本上，您可以使用 Omit 通过删除某些属性从现有类型创建新类型。

例如，

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.

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

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

typescript

reactjs

react-dates