TypeScript发出对象数组

Question

我要做的是映射一个数组，该数组包含带有属性的对象和其他嵌套对象，以返回我以前导入的React组件。

我从TypeScript那里得到这个

属性'max_temp‘在’从不‘类型上不存在。属性'min_temp‘在’从不‘类型上不存在。

我的猜测是，TypeScript抱怨是因为它不知道我的数组中包含嵌套的对象，所以它说我永远不会得到调用它的任何东西。这是我的代码(下面我会发布一个截图)

import React from "react";
import Card from "./Card";
type Props = {
  cities: [];
};

const Cards: React.FC<Props> = ({ cities }) => {
  return (
    <div>
      {cities.map(({ name, main, weather }) => {
        return (
          <Card
            name={name}
            max={main.max_temp}
            min={main.min_temp}
            img={weather[0].icon}
            onClose={() => alert({ name })}
          />
        );
      })}
    </div>
  );
};
export default Cards;

​

​

Answer 1

您必须键入您的城市数组，例如类似的东西(您的Card支持可能实际上需要不同的类型)：

import React from "react";
import Card from "./Card";
type Props = {
  cities: [
    { name: string, 
      main: {
         max_temp: number, 
         min_temp: number
      }, 
      weather: Array<{icon: any}> 
    }];
};

const Cards: React.FC<Props> = ({ cities }) => {
  return (
    <div>
      {cities.map(({ name, main, weather }) => {
        return (
          <Card
            name={name}
            max={main.max_temp}
            min={main.min_temp}
            img={weather[0].icon}
            onClose={() => alert({ name })}
          />
        );
      })}
    </div>
  );
};
export default Cards;

Answer 2

你还没有定义道具中的城市类型。

type Props = {
  cities: []; <--- what is this array of?
};

例如：

type Props = {
  cities: CityType[];
};