[英]how to loop through the union of two interface Props in React with Typescript
From the structure below working with React 16.9.0
and Typescript ^16.9.20"
:从下面使用
React 16.9.0
和Typescript ^16.9.20"
的结构:
file A.ts:
export interface person{
id: number || null,
first_name: string,
date_of_birth: string,
some_unique_number: string,
}
file B.ts:
export interface member{
group_name: string:
first_name: string,
pass_code: string,
some_unique_number: string,
}
file C.tsx:
# import file A
# import file B
interface Props {
result: Array<person | member>;
}
let newResult: any[] = []; <=== I feel like `any[]` is wrong maybe
if (result) {
newResult = results.map((result) => {
return (
<div className="something" key={item.some_unique_number}>
{result.id}
{result.first_name}
{result.date_of_birth}
{result.group_name}
{result.pass_code}
</div>
);
});
}
My current solution above is generating the error below:我上面的当前解决方案正在生成以下错误:
Property 'id' does not exist on type 'person | member'.
Property 'id' does not exist on type 'member'. TS2339
20 | <div className="something" key={item.external_member_id}>
> 21 | {item.id}
Basically what i am trying to accomplish is loop through both interface and display the union of both A and B.基本上我想要完成的是循环通过两个界面并显示 A 和 B 的联合。
Thank you in advance.先感谢您。
https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c
from the article - "You can define same interface multiple times, and its definitions will merge into one:"来自文章-“您可以多次定义相同的接口,其定义将合并为一个:”
Not sure if this works but if we were being creative with your example:不确定这是否有效,但如果我们对您的示例很有创意:
// file A.ts
export interface person{
id: number || null,
first_name: string,
date_of_birth: string,
some_unique_number: string,
}
// file B.ts:
export interface member{
group_name: string:
first_name: string,
pass_code: string,
some_unique_number: string,
}
export interface peopleOrMember extends member
export interface peopleOrMember extends person
hope that works for you, If it still does not work maybe it is somewhere in that medium link.希望这对你有用,如果它仍然不起作用,也许它在那个媒体链接的某个地方。 I copied that link out of the other stackoverflow question that I mentioned.
我从我提到的另一个 stackoverflow 问题中复制了该链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.