Проблема с типизированным шрифтом в функции карты реакции смешанных типов - PullRequest
Новая
       8

Проблема с типизированным шрифтом в функции карты реакции смешанных типов

0 голосов
/ 25 января 2019

Я определил два типа, Team и Position.Они оба являются частью массива, который я повторяю в своем компоненте реакции.

на основе типов, определенных ниже в моей функции map. Я вижу следующую ошибку.

Примеры ошибок, которые я вижу.

Свойство 'name'не существует в типе' Позиция '.[2339]

Свойство 'position' не существует для типа 'Team'.[2339]

Разве невозможно проверить, что массив содержит какой-либо тип?

Мой код выглядит следующим образом: 

type Team = {
   name: string; 
   city: string;
} 

type Position = {
   position: number;
}

const Component = () => {
    const teamsAndPosition = [
       {
        name: 'Arsenal', 
        city: 'London',
       },
      {
        name: 'Everton', 
        city: 'Liverpool',
       },
      { 
         position: 2
      }
    ];

    const [list, setList] = useState<Array<Team | Position >>(teams)

    list.map((item: Team | Position) => {
       return item.name ? (
         <div>
           // I am seeing an error for these below
           <p>{item.name}</p>
           <p>{item.city}</p>
         </div>
       ) : (
         <p>{item.position}</p>
       )
    })
}

1 Ответ

0 голосов
/ 25 января 2019

При работе с переменной, которая может относиться к одному из двух (или более) типов, вы можете проверить, существует ли уникальное свойство объекта, прежде чем иметь дело с объектом, чтобы машинопись могла определить, какой это тип.

Пример: 

interface IObjectYo {
  someProp: number
  same: boolean
}

interface IDifObjYo {
  otherProp: number
  same: boolean
}

function example(someArg: IObjectYo | IDifObjYo) {
  console.log(someArg.someProp) // tsc complains because someProp doesn't belong to IDifObjYo
  if ('someProp' in someArg) {
    console.log(someArg.someProp) // tsc knows it must be type IObjectYo because someProp only belongs to IObjectYo
  } else {
    console.log(someArg.otherProp) // tsc knows this is IDifObjYo because the first condition failed (which means it must be of type IDifObjYo)
  }
  if ('same' in someArg) {
    console.log(someArg.someProp) // make sure the property is indeed unique between the possible types or tsc can't infer
  }
}

В вашем случае (а я не парень из React) вы можете сделать что-то вроде этого: 

type Team = {
   name: string;
   city: string
} 

type Position = {
   position: number;
}

const Component = () => {
    const [list, setList] = useState<Array<Team | Position >>(teams)

    list.map((item: Team | Position) => {
       return 'name' in item ? (
          <div>
             <p>{item.name}</p>
             <p>{item.city}</p>
          </div>
       ) : (
        <p>{item.position}</p>
       )
    })
}
...