TypeScript 错误：将类型添加到 .map 对象数组答案

【问题标题】：TypeScript Error: Adding type to .map Array of ObjectsTypeScript 错误：将类型添加到 .map 对象数组
【发布时间】：2020-04-30 08:32:06
【问题描述】：

我正在尝试将类型添加到从 unitedStates.map((item: Item) => {} 返回的 Item 对象，但我似乎无法正确添加类型。

我已将unitedStates 对象数组定义为unitedStates: Array<UnitedStates>，这似乎是正确的，但我不确定为什么Item 没有正确输入。

错误：

src/StatePicker.tsx:198:35 - error TS2345: Argument of type '(item: Item) => JSX.Element' is not assignable to parameter of type '(value: UnitedStates, index: number, array: UnitedStates[]) => Element'.
  Types of parameters 'item' and 'value' are incompatible.
    Type 'UnitedStates' is not assignable to type 'Item'.

                 {unitedStates.map((item: Item) => {

Types.tsx：

// TypeScript: Types
interface Props {
  title: string,
  onPress: Function,
  onValueChange: Function,
}

interface Item {
  label: string,
  value: string,
  key: number | string,
  color: string,
};

interface UnitedStates {
  label: string,
  value: string,
};

美国（对象数组）：

// United States
  const unitedStates: Array<UnitedStates> = [
    { label: 'AL', value: 'AL' },
    { label: 'AK', value: 'AK' },
    { label: 'AZ', value: 'AZ' },
    { label: 'AR', value: 'AR' },
    { label: 'CA', value: 'CA' },
    { label: 'CO', value: 'CO' },
    { label: 'CT', value: 'CT' },
    { label: 'DE', value: 'DE' },
    { label: 'FL', value: 'FL' },
    { label: 'GA', value: 'GA' },
    { label: 'HI', value: 'HI' },
    { label: 'ID', value: 'ID' },
    { label: 'IL', value: 'IL' },
    { label: 'IN', value: 'IN' },
    { label: 'IN', value: 'IN' },
    { label: 'KS', value: 'KS' },
    { label: 'KY', value: 'KY' },
    { label: 'LA', value: 'LA' },
    { label: 'ME', value: 'ME' },
    { label: 'MD', value: 'MD' },
    { label: 'MA', value: 'MA' },
    { label: 'MI', value: 'MI' },
    { label: 'MN', value: 'MN' },
    { label: 'MS', value: 'MS' },
    { label: 'MO', value: 'MO' },
    { label: 'MT', value: 'MT' },
    { label: 'NE', value: 'NE' },
    { label: 'NV', value: 'NV' },
    { label: 'NH', value: 'NH' },
    { label: 'NJ', value: 'NJ' },
    { label: 'NM', value: 'NM' },
    { label: 'NY', value: 'NY' },
    { label: 'NC', value: 'NC' },
    { label: 'ND', value: 'ND' },
    { label: 'OH', value: 'OH' },
    { label: 'OK', value: 'OK' },
    { label: 'OR', value: 'OR' },
    { label: 'PA', value: 'PA' },
    { label: 'RI', value: 'RI' },
    { label: 'SC', value: 'SC' },
    { label: 'SD', value: 'SD' },
    { label: 'TN', value: 'TN' },
    { label: 'TX', value: 'TX' },
    { label: 'UT', value: 'UT' },
    { label: 'VT', value: 'VT' },
    { label: 'VA', value: 'VA' },
    { label: 'WA', value: 'WA' },
    { label: 'WV', value: 'WV' },
    { label: 'WI', value: 'WI' },
    { label: 'WY', value: 'WY' },
  ];

渲染方法：

// Render iOS Picker
  const renderIOSPicker = () => {
    try {
      return (
        <Picker
          selectedValue={state}
          onValueChange={selectState}>
          {unitedStates.map((item: Item) => {
            return (
              <Picker.Item
                label={item.label}
                value={item.value}
                key={item.key || item.label}
                color={item.color}
              />
            );
          })}
        </Picker>
      )
    }
    catch (error) {
      console.log(error);
    }
  };

【问题讨论】：

标签： reactjs typescript react-native types typescript-typings

【解决方案1】：

您正在映射 UnitedStates[]，但您在回调中将项目（一个 UnitedStates 对象）类型提示为 Item。

也许你想要这个

     {unitedStates.map((item: UnitedStates) => {
           return (
              <Picker.Item
                label={item.label}
                value={item.value}
                key={item.key || item.label}
                color={item.color}
              />
            );
     })}

或者这个

     {myItems.map((item: Item) => {
           return (
              <Picker.Item
                label={item.label}
                value={item.value}
                key={item.key || item.label}
                color={item.color}
              />
            );
     })}

【讨论】：

【解决方案2】：

问题是我错误地将unitedStates 对象键入Array<UnitedStates>，因此代码应如下所示：

类型：

interface UnitedStates {
  [index: number]: { label: string; value: string };
  map: Function,
}

美国打字：

  const unitedStates: UnitedStates = [];

【讨论】：