我有两个组件，定义如下：

const GridCell = <T extends keyof FormValue>(
  props: GridCellProps<T>,
) => {
....
}

const GridRow = <T extends keyof FormValue>(props: GridRowProps<T>) => {
...
  <GridCell
    type={props.type} // <-- error here
    fractionDigits={props.fractionDigits}
    ...
    />
...
}

我的类型定义如下：

export type GridRowFieldType<T extends keyof FormValue> = {
  isDetail: boolean;
  highlighted: boolean;
  label: string;
  fieldName: T;
} & (
  | { type: 'date' | 'duration'; fractionDigits?: never }
  | { type: 'number'; fractionDigits: number }
);

export type GridRowProps<T extends keyof FormValue> = {
  showDetails: boolean;
  values: FormValue[T];
} & GridRowFieldType<T>;

export type GridCellProps<T extends keyof FormValue> = {
  label: string;
  fieldName: T;
  index: number;
} & (
  | {
      type: 'date';
      value: DateFieldValueType | undefined;
      fractionDigits?: never;
    }
  | {
      type: 'duration';
      value: DurationFieldValueType | undefined;
      fractionDigits?: never;
    }
  | { type: 'number'; value: number | undefined; fractionDigits: number }
);

由于某种原因，我在GridCell组件中得到了这个错误：

Types of property 'type' are incompatible.
      Type '"number" | "date" | "duration"' is not assignable to type '"number"'.
        Type '"date"' is not assignable to type '"number"'.ts(2322)

即使type总是解析为"number" | "date" | "duration"，我仍然得到这个错误，我不知道为什么，也不知道如何解决它。

编辑：

在GridCellProps中，如果我更改：

& (
  | {
      type: 'date';
      value: DateFieldValueType | undefined;
      fractionDigits?: never;
    }
  | {
      type: 'duration';
      value: DurationFieldValueType | undefined;
      fractionDigits?: never;
    }
  | { type: 'number'; value: number | undefined; fractionDigits: number }
);

收件人：

type: 'date' | 'duration' | 'number';

这个错误消失了，但是我需要根据type属性的值定义value属性的类型。

编辑二：

这里是TSPlayground（看起来有点不同，但问题是相同的）：
https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgGIHsoFsBqcA2ArigN4CwAUMsjMBPgCYCMAXMgBQDOYUoA5sgA+yQiAYRaICAwCUAbQC6AbkrVa9BgCY27EISwAjaEJFiJoafOWqadRgGYdB9OnwQ4IE6PGTLilVS2GgAsOty8IALC3uZSsv426owArGE8-F5mvvHWFAC+lJRgAJ4ADigA4rwMqHYMADwAKsgQAB6QYpzIANYQxegwaJi4BMQAfMgAvMjkgfhwRvhs4fwBanUAcnBYEGyNAXnIAGQcNsKz1JfIJeVsAOSQ7XdrV8gAbqMQAPzL6ZEvVxgUEQYGA6BAABFgHxgGBOD9kFI3tAAcgCoFzjYrjddsg7s5XO4QM8sZcPkRvmwCW4PKi1MCEKDwVCYXCEUiUaT0dRztcyri7npDNBnu9Puz9EYoEoaAymZDobDOGwhVK0ZQZAEivzkFVgAwAEroADuUxmiTqyt11VqGnqvX6gww2DwFLGCXyWooCHB3CCjCtepqdXtfQGQxdn3dCjNchsF0u80W91tjGQTDuABpSUkGFsdvdcxns4FqDj7o8wFmbHkS9QE9Qk-QU3VkJpq6X-XntgLc+265dy3jVSKB-SQWCFayrUwB7XKLlKD6QH6sHBSqmGFb2EHN6HHRGRm6rGbc5wAHRr0rsdgwGRTCYJqAQMCEKCeBvIJtLGjn79jrt81xGBz1zICAKHECcQA8liDYEDYIgACgQnZlFTheDQLlScWSVGtKDyGQgA