包含数组的 API 响应的 TypeScript 声明

Question

这是我的一段代码：

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,
      }));
   }

我在 Object.values(data.data)[0].name 中遇到错误 Property name does not exist on type {}。
添加 "name" 属性类型检查的正确方法是什么？

根据建议的更改，我得到 Property name does not exist on type Cards[]

Answer 1

您应该为您的 data -object

编写一个接口

例如

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> {
...

Answer 2

按照您目前的设置方式，data.data 是一个 Response 对象，它仍然有一个 data 属性。（如果将鼠标悬停在 IDE 中的第二个 data 上，您应该会看到它。） Object.values(data.data) returns [=] 的所有属性值的数组11=] 对象；此数组包含一个元素，它是 data 属性的值，它本身是一个 Cards[]。使用 [0] 获取第一个元素后，您将得到一个 Cards[]，它没有 name 属性.

我想您的意图是将回调的 data 参数声明为类型 Response 而不是 Data。然后 data.data 是 Cards[] 类型， Object.values 是空操作，可以删除， Object.values(data.data)[0].name returns 第一张牌的名字。

包含数组的 API 响应的 TypeScript 声明

TypeScript declarations for API response containing an array

typescript

reactjs

tslint