Объявления TypeScript для ответа API, содержащего массив - PullRequest
Новая
       7

Объявления TypeScript для ответа API, содержащего массив

0 голосов
/ 19 октября 2018

Вот мой кусок кода: 

type Data = {
  data: Response;
}

type Response = {
  data: Cards[]; 
}

type Cards = {
  name: string;
}

class Editor extends Component<Props> {

  componentDidMount() {
    const { cardUnderEdition } = this.props;
    const description = cardUnderEdition && cardUnderEdition.currentCard.description;
    const currency = cardUnderEdition && cardUnderEdition.currentCard.name;

    fetch('https://api.coinmarketcap.com/v2/ticker') //eslint-disable-line
      .then(res => res.json())
      .then((data: Data) => this.setState({
        data: Object.values(data.data),
        description: cardUnderEdition === undefined
          ? ''
          : description,
        currentCurrency: cardUnderEdition === undefined
          ? Object.values(data.data)[0].name
          : currency,
      }));
   }

У меня ошибка Property name does not exist on type {} в Object.values(data.data)[0].name.
Как правильно добавить проверку типа свойства "name"?

После предложенных изменений я получаю Property name does not exist on type Cards[]

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

То, как вы сейчас настраиваете вещи, data.data - это объект Response, у которого все еще есть свойство data.(Вы должны увидеть это, если наведите курсор мыши на второй data в вашей IDE.) Object.values(data.data) возвращает массив всех значений свойств объекта Response;этот массив содержит единственный элемент, который является значением свойства data, которое само по себе является Cards[].Как только вы берете первый элемент с [0], у вас остается Cards[], у которого нет свойства name.

Я представляю, что вы намеревались объявить параметром data вашего обратного вызовакак тип Response вместо Data.Тогда data.data относится к типу Cards[], Object.values не используется и может быть удален, а Object.values(data.data)[0].name возвращает имя первой карты.

0 голосов
/ 19 октября 2018

Вы должны написать интерфейс для вашего data -объекта

например. 

interface IData {
 data: IResponse
}

interface IResponse {
 name: string
}

// attach interface to data-obj
.then((data: IData) => ...

Вы также должны ввести состояние компонентов. 

interface IProps { ... }
interface IState { ... }
class App extends React.Component<IProps, IState> {
...
...