Как определить свойство, которого следует избегать: Свойство 'X' не существует для типа 'Y'

Question

У меня есть нумерованный список устройств, таких как имя, серийный номер и т. Д., Поступающих из Restful API.
Я использовал метод get Axios , чтобы получитьlist.
Взгляните на следующий компонент в Reactjs :

import * as React from 'react';
import axios from 'axios';

export interface Props{
  url: string;
}
export interface State{
  devices: string[];
  currentUrl: string;
}
class Devices extends React.Component<Props, State>{
    constructor(props: Props){
      super(props);
      this.state = {devices: [], currentUrl: props.url};
      console.log('first log',this.state);
    }
    componentDidMount() {
      axios.get(this.state.currentUrl)
        .then(({data}) =>{
          console.log('Joye Data', data);
          this.setState({devices: data.member})
          console.log('Devices',this.state.devices)
        })
        .catch(function (error){
          console.log('Error of Axios', error);
        })
    }
    render(){
      return(
        <ul>
        {this.state.devices.map(device => <li>{device.name}</li>)}
        </ul>
      );
    }

}

export default Devices;

Все отлично работает, кроме метода render () , который обнаружил следующееошибка:
'Свойство' name 'не существует для типа' string '

Как я знаю, если бы я хотел скомпилировать свой кодс Reactjs, я имел в виду без Typescript, вышеупомянутый код должен работать хорошо, но как я могу определить свойство (Props in React), не нарушая соглашения TS?

Примечание: я искал и нашел те же вопросы, но их решения не смогли решить проблему.

Answer 1

Это ошибка компилятора.Если код работает, это означает, что типы были указаны неправильно, и это было обнаружено компилятором TypeScript.

this.state.devices типизируется как массив строк с этой строкой:

devices: string[];

Компилятор ожидает, что device является строкой в ​​этой строке, тип string выведен, потому что devices был введен как массив строк:

this.state.devices.map(device => <li>{device.name}</li>);

В то время как device явноиспользуется как объект и, как ожидается, будет иметь свойство name.Если device действительно объект, то типы должны быть исправлены:

export interface State{
  devices: Array<{ name: string }>;
  currentUrl: string;
}