как l oop через объединение двух интерфейсных свойств в React с Typescript - PullRequest
Новая
       109

как l oop через объединение двух интерфейсных свойств в React с Typescript

1 голос
/ 08 мая 2020

Из приведенной ниже структуры, работающей с 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}

В основном то, что я пытаюсь выполнить sh - это l oop через оба интерфейса и отобразить объединение как A, так и B.

Заранее спасибо.

1 Ответ

0 голосов
/ 09 мая 2020

https://medium.com/@martin_hotell / interface-vs-type-alias-in-typescript-2-7-2a8f1777af4 c

из статьи - «Вы можете определить один и тот же интерфейс несколько раз, и его определения объединятся в одно: "

Typescript merge 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

? надеюсь, что это сработает для вас, если это все еще не работает, возможно, это где-то в этой средней ссылке. Я скопировал эту ссылку из другого упомянутого мной вопроса о переполнении стека.

...