javascript - 当我省略/需要 Prop 时，为什么受歧视的工会不起作用？

Question

我有一个组件，它根据名为 type 的特定属性呈现不同的元素。它可以有这样的类型定义:

interface CommonProps {
  size: 'lg' | 'md' | 'sm';
}

interface SelectInputProps extends CommonProps {
  type: 'select';
  options: readonly Option[];
  selected: string;
}

interface TextInputProps extends CommonProps {
  type: 'text';
  value: string;
};

type InputProps = (SelectInputProps | TextInputProps) & ExtraProps;

function Field(props: InputProps): JSX.Element;

现在在我自己的组件中，我将访问该组件的属性，如下所示:

import { ComponentProps } from 'react';

type FieldProps = ComponentProps<typeof Field>;

function MySpecialField(props: FieldProps) {
  if (props.type === 'select') {
    // this works
    const { options, selected } = props;
  }
  return <Field {...props} />
}

这绝对没问题。它在我的 if block 中知道 props 是 SelectInputProps。然而，我做了一个小改动，似乎完全打破了这种使用discriminated union的模式。

type FieldProps = Omit<ComponentProps<typeof Field>, 'size'>;

In practice, here is what is happening

为什么会这样？有办法解决吗？

Answer 1

是因为the Omit<T, K> utility type不分发 union types在 T . implementation使用 keyof T ，当T是一个联盟，keyof T只是那些存在于联合所有成员中的键( keyof T 在 T 中是逆变，所以 keyof (A | B) 等同于 (keyof A) & (keyof B) )。这是按照 microsoft/TypeScript#31501 的预期工作的.

幸运的是，如果您想要 Omit 的分发版本, 你可以自己写一个 distributive conditional type :

type DistributiveOmit<T, K extends PropertyKey> =  
  T extends any ? Omit<T, K> : never;

然后您可以看到行为的变化:

type MyFieldProps = DistributiveOmit<React.ComponentProps<typeof Field>, 'a'>;
/* type MyFieldProps = Omit<{
    type: 'select';
    options: Option[];
} & ExtraProps, "a"> | Omit<{
    type: 'text';
    value: string;
} & ExtraProps, "a"> */

这使您的代码开始工作:

function MyField(props: MyFieldProps) {
  if (props.type === 'select') {
    const options = props.options;    // okay
  }
  return <input />
}

Playground link to code

function MyField(props: MyFieldProps) {
  if (props.type === 'select') {
    // Here's the problem
    const options = props.options;
  }
  return <input />
}