大佬教程收集整理的这篇文章主要介绍了具有联合类型和泛型的 Typescript 数组要求字段是可选的以进行编译，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试在 TypeScript 下为我的 React Router 配置创建页面映射。由于每个页面都会由不同的组件类型生成，并且这些不同的组件将具有不同的属性，因此我想使用一个通用容器，但保留组件与其 props 接口之间的语义链接。
我希望地图的每个元素都由几个字段定义，名义上是名称、显示页面的组件以及该组件的相关道具。我认为泛型似乎是解决此问题的明智方法：
type PageDef<T> = {
name: String;
component: FunctionComponent<T>;
props: T;
}
（注意：我也尝试将其作为接口使用，但遇到了同样的问题。）
对于这个例子，让我们假设我已经定义了两个 props 接口和两个对应的功能组件（实际上还有很多......）：
export interface PropsOne {
test_1: String
}
export interface PropsTwo {
test_2: number
}
function ComponentOne(props: PropsOnE) {
return <div> {props.test_1} </div>
}
function ComponentTwo(props: PropsTwo) {
return <div> {props.test_2} </div>
}
然后我像这样创建一个页面地图：
type SupportedPages = PageDef<PropsOne> | PageDef<PropsTwo>;
const pages: Array<SupportedPages> = [
{
name: "Page one",component: ComponentOne,props: {
test_1: "Hello,world"
}
},{
name: "Page two",component: ComponentTwo,props: {
test_2: 42
}
}
]
目前没有错误！
当我在 MainPage 组件中使用 pages 时出现问题：
function MainPage(props: { pages: Array<SupportedPages> }) {
return <div>
{props.pages.map(page => {
const PageComponent = page.component;
return <PageComponent {...page.props}/>
})}
</div>
}
这里我在 PageComponent 标签上有一个错误：
TS2322: Type '{ test_1: String; } | { test_2: String; }' is not assignable to type 'IntrinsicAttributes & PropsOne & { children?: ReactNode; } & PropsTwo'.
Property 'test_2' is missing in type '{ test_1: String; }' but required in type 'PropsTwo'.
我真的不明白这是在告诉我什么 - 似乎道具类型被推断为两个道具的交集？不过我很确定我希望它成为工会。
如果页面是FunctionalComponent<PropsOne>类型，那么props应该是PropsOne类型，它不应该关心PropsTwo中的字段，反之亦然反之。
我可以在短期内通过在 props 接口中使字段可选来解决这个问题，但这并不真正符合 TypeScript 的精神。我想也许拥有一系列混合类型也不是特别好的做法......
我是 TS 新手，所以我怀疑我对如何推断属性类型有误解。很高兴就构建此架构的最佳方式提出建议。
@H_874_0@解决方法暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
以上是大佬教程为你收集整理的具有联合类型和泛型的 Typescript 数组要求字段是可选的以进行编译全部内容，希望文章能够帮你解决具有联合类型和泛型的 Typescript 数组要求字段是可选的以进行编译所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。