当与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

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

这个区块

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

意味着类型Props应该等于DayPickerRangeControllerShape接口，但没有一些字段，如numberOfMonths、focusedInput等。

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

Answer 2

静态Typescript，

Omit<Type, 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.

Answer 3

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