TypeScript:数组中的对象属性是相互依赖的

Question

数组中的对象属性是相互依赖的例如当调用组件

我想要componentProps必须是Type1Props，当items.type === 'type1'，如果items.type === 'type2'componentProps应该是Type2Props

//I want componentProps must be Type1Props, when ` items.type === 'type1' `， if `items.type === 'type2'` componentProps shoud be Type2Props
<AComponent items= {[
{type:'type1', componentProps{  }}
{type:'type2', componentProps{  }
]}>

下面是一个组件。tsx代码

// if type === type1 the value must be constraint with Type1Props
type ComTypes = {
type1 : Type1Props,
type2 : Type1Props,
type2 : Type1Props,
}
type ItemType =
'type1'
| 'type2'
| 'type3'

//  The object properties in the array
type ItemProps<T> = {
type: T
componentProps: ComTypes[T]
showItem?: boolean
}
interface Props extends FormProps {
itemsArray: QDItemProps[]
}
const AComponent: FC<Props> = ({itemsArray}) => {
}
export default AComponent

我不知道如何解决这个场景

Answer 1

您可以使用联合类型来完成此操作。我将给你一个不使用react的更通用的例子，以帮助其他可能偶然遇到这个问题的人。

type Type1Props = "A";
type Type2Props = "B";
type Type3Props = "C";
type PropTypes =
| {
type: "type1",
componentProps: Type1Props,
}
| {
type: "type2",
componentProps: Type2Props,
}
| {
type: "type3",
componentProps: Type3Props,
};
const p1: PropTypes = {
type: "type1",
componentProps: "A",
};
const p2: PropTypes = {
type: "type2",
componentProps: "B",
};

您应该能够为您的用例扩展它。