英文:
Types of property 'X' are incompatible (when using string union)
问题
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} // <-- 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
英文:
I have two components defined as following:
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}
...
/>
...
}
My types are defined as following:
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 }
);
For some reason I get this error in the GridCell component:
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)
Even though type always resolves as "number" | "date" | "duration", I still get that error, and I have no idea why, and on how to resolve it.
Edit:
In GridCellProps if I change :
& (
| {
type: 'date';
value: DateFieldValueType | undefined;
fractionDigits?: never;
}
| {
type: 'duration';
value: DurationFieldValueType | undefined;
fractionDigits?: never;
}
| { type: 'number'; value: number | undefined; fractionDigits: number }
);
To:
type: 'date' | 'duration' | 'number';
This error disappears, but I need to define the type of the value prop depending on the value of the type prop.
Edit 2:
Here is the TS playground (it looks a bit different, but the issue is the same):
答案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:
英文:
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:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论