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

【问题标题】：TypeScript declarations for API response containing an array包含数组的 API 响应的 TypeScript 声明
【发布时间】：2019-03-24 04:24:09
【问题描述】：

这是我的一段代码：

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 {}。
添加“名称”属性类型检查的适当方法是什么？

建议更改后，我收到Property name does not exist on type Cards[]

【问题讨论】：

如果你想给一个对象添加一个属性，你需要这样做 obj['name']='a name'
这不是问题。 Tslint 看到 Object 没有属性“name”并想要这样的东西：{ name: string }

标签： reactjs typescript tslint

【解决方案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> {
...

【讨论】：

类型数据 = { 数据：响应； } 类型响应 = { 数据：卡片 []; } 类型卡片 = { 名称：字符串；但现在我得到类型 Cards[] 上不存在属性名称。数据中有数据，没错。
@Nikronis 您能否将最新版本的代码添加到问题中，以便我们可以确切地看到您尝试了什么？
@MattMcCutchen 添加了

【解决方案2】：

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

我想您的意图是将回调的data 参数声明为Response 类型，而不是Data。那么data.data 是Cards[] 类型，Object.values 是空操作并且可以被移除，Object.values(data.data)[0].name 返回第一张卡的名称。

【讨论】：