[英]how to loop through the union of two interface Props in React with Typescript
从下面使用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>
);
});
}
我上面的当前解决方案正在生成以下错误:
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}
基本上我想要完成的是循环通过两个界面并显示 A 和 B 的联合。
先感谢您。
https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c
来自文章-“您可以多次定义相同的接口,其定义将合并为一个:”
不确定这是否有效,但如果我们对您的示例很有创意:
// 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
希望这对你有用,如果它仍然不起作用,也许它在那个媒体链接的某个地方。 我从我提到的另一个 stackoverflow 问题中复制了该链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.