问题

I have translated the code you provided into Chinese:

我有两个组件定义如下：

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

const GridRow = <T extends keyof FormValue>(props: GridRowProps<T>) => {
...
  <GridCell
    type={props.type} // &lt;-- 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`组件中收到以下错误：

属性'type'的类型不兼容。
  类型'"number" | "date" | "duration"'无法分配给类型'"number"'。
  类型'"date"'无法分配给类型'"number"'。ts(2322)

尽管类型始终解析为'"number" | "date" | "duration"'，但我仍然收到该错误，而且不知道原因以及如何解决它。

**编辑：**

在`GridCellProps`中，如果我更改：

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

此错误会消失，但我需要根据'type'属性的值来定义'value'属性的类型。

**编辑2：**

这是TS Playground（看起来有点不同，但问题是相同的）：

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgGIHsoFsBqcA2ArigN4CwAUMsjMBPgCYCMAXMgBQDOYUoA5sgA+yQiAYRaICAwCUAbQC6AbkrVa9BgCY27EISwAjaEJFiJoafOWqadRgGYdB9OnwQ4IE6PGTLilVS2GgAsOty8IALC3uZSsv426owArGE8-F5mvvHWFAC+lJRgAJ4ADigA4rwMqHYMADwAKsgQAB6QYpzIANYQxegwaJi4BMQAfMgAvMjkgfhwRvhs4fwBanUAcnBYEGyNAXnIAGQcNsKz1JfIJeVsAOSQ7XdrV8gAbqMQAPzL6ZEvVxgUEQYGA6BAABFgHxgGBOD9kFI3tAAcgCoFzjYrjddsg7s5XO4QM8sZcPkRvmwCW4PKi1MCEKDwVCYXCEUiUaT0dRztcyri7npDNBnu9Puz9EYoEoaAymZDobDOGwhVK0ZQZAEivzkFVgAwAEroADuUxmiTqyt11VqGnqvX6gww2DwFLGCXyWooCHB3CCjCtepqdXtfQGQxdn3dCjNchsF0u80W91tjGQTDuABpSUkGFsdvdcxns4FqDj7o8wFmbHkS9QE9Qk-QU3VkJpq6X-XntgLc+265dy3jVSKB-SQWCFayrUwB7XKLlKD6QH6sHBSqmGFb2EHN6HHRGRm6rGbc5wAHRr0rsdgwGRTCYJqAQMCEKCeBvIJtLGjn79jrt81xGBz1zICAKHECcQA8liDYEDYIgACgQnZlFTheDQLlScWSVGtKDyGQgA

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

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: 'date';
value: DateFieldValueType | undefined;
fractionDigits?: never;
}
| {
type: 'duration';
value: DurationFieldValueType | undefined;
fractionDigits?: never;
}
| { type: 'number'; value: number | undefined; fractionDigits: number }
);

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

答案1

得分: 1

I have solved this error, the solution was to use a switch statement to check the type of each field and return an object with the appropriate properties based on the type, this ensures that we only assign the correct properties to fields of the appropriate type, here is the updated TS playground:

我已经解决了这个错误，解决方案是使用 switch 语句来检查每个字段的类型，并根据类型返回一个具有相应属性的对象，这确保我们只将正确的属性分配给相应类型的字段，这里是更新后的 TS playground:

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgGIHsoFsBqcA2ArigN4CwAUMsjMBPgCYCMAXMgBQDOYUoA5sgA+yQiAYRaICAwCUAbQC6AbkrVa9BgCY27EISwAjaEJFiJoafOWqadRgGYdB9OnwQ4IE6PGTLilVS2GgAsOty8IALC3uZSsv426owArGE8-F5mvvHWFAC+lJRgAJ4ADigA4rwMqHYMADwAKsgQAB6QYpzIANYQxegwaJi4BMQAfMgAvMjkgfhwRvhs4fwBanUAcnBYEGyNAXnIAGQcNsKz1JfIJeVsAOSQ7XdrV8gAbqMQAPzL6ZEvVxgUEQYGA6BAABFgHxgGBOD9kFI3tAAcgCoFzjYrjddsg7s5XO4QM8sZcPkRvmwCW4PKi1MCEKDwVCYXCEUiUaT0dRztcyri7npDNBnu9Puz9EYoEoaAymZDobDOGwhVK0ZQZAEivzkFVgAwAEroADuUxmiTqyt11VqGnqvX6gww2DwFLGCXyWooCHB3CCjCtepqdXtfQGQxdn3dCjNchsF0u80W91tjGQTDuABpSUkGFsdvdcxns4FqDj7o8wFmbHkS9QE9Qk-QU3VkJpq6X-XntgLc+265dy3jVSKB-SQWCFayrUwB7XKLlKAB6JctKBQTDISg+kB+rBwUqphhW9hBo+hx0RkZuqxm3OcAB0+9K7HYMBkUwmCagEDAhCgngNsgTZLDQD4gWOXb5riMAPrm0GQUOsE4pB5LEGwsFoRAkFAhOzKKnCGFwXKk4skqNaUHkMiFBQK7IJwriEPK26+mAyDPkenAAMqMfKOhniGDrhs617jLe0z3k+B6vu+n7moEnDGrCCAABYcMh-IfkBCBwJwKAPG0VYsKS1A-n+AHya8iYLM2YEQSZlzwT2RFOTskHYvyREoQ51BYURWHuWiqI6XpeLUkSdzGZ2pm-v+gE+cBNmgbB9nRY5mzOWBrnYQlSEPt5aW+Z8-mfIFeTBbp+kjlAkUOWZcWWVZiXJnZSWBesGjQS5GVublnlgQVTVihSJUUu1sp4VOSouSR+HTmVLzolRShAA