时间戳

首页 > 解决方案 > 与 Omit 一起使用时，type Props 在 react 和 typescript 中的含义是什么？

reactjs - 与 Omit 一起使用时，type Props 在 react 和 typescript 中的含义是什么？

问题描述

我是使用 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>
        );
    }

在这种情况下，类型PropswithOmit在这里做什么？

标签： reactjstypescriptreact-dates

解决方案

这一行function DateRangePicker(props: Props)意味着DateRangePicker组件 props 应该与Props之前定义的类型兼容。

而这块

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

表示 typeProps应该等于DayPickerRangeControllerShapeinterface，但没有某些字段，例如numberOfMonths等focusedInput。

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

推荐阅读