打字稿：为来自 google JSON 的对象数组定义接口？

Question

我正在遍历从 Google API 返回的数据以接收城市和州，但我一直收到此错误

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Geocode'.
  No index signature with a parameter of type 'string' was found on type 'Geocode'.

当我尝试循环数据时出现：

data[key].address_components.forEach

到目前为止，我查看了“索引对象”和使用接口，但我仍然不确定如何使用它们

到目前为止，这是我的代码：

type Geocode = {
  data?: google.maps.GeocoderResult | null;
  error: string | null;
};

export interface CityState {
  city?: string;
  state?: string;
}

export const parseForCityAndState = (data: Geocode): CityState => {
  const cityState = {
    city: '',
    state: '',
  };

  if (data) {
    for (const key in data) {
      data[key].address_components.forEach((ele: {types: string | string[]; short_name: string}) => {
        if (ele.types.includes('sublocality') || ele.types.includes('locality')) {
          cityState.city = ele.short_name;
        }

        if (ele.types.includes('administrative_area_level_1')) {
          cityState.state = ele.short_name;
        }
      });
    }
  }

  return cityState;
};

googleJSONreturns数据如下：

{
    "data": {
        "address_components": [
            {
                "long_name": "254",
                "short_name": "254",
                "types": [
                    "street_number"
                ]
            },
            {
                "long_name": "Broadway",
                "short_name": "Broadway",
                "types": [
                    "route"
                ]
            },
            {
                "long_name": "Manhattan",
                "short_name": "Manhattan",
                "types": [
                    "political",
                    "sublocality",
                    "sublocality_level_1"
                ]
            },
            {
                "long_name": "New York",
                "short_name": "New York",
                "types": [
                    "locality",
                    "political"
                ]
            },
            {
                "long_name": "New York County",
                "short_name": "New York County",
                "types": [
                    "administrative_area_level_2",
                    "political"
                ]
            },
            {
                "long_name": "New York",
                "short_name": "NY",
                "types": [
                    "administrative_area_level_1",
                    "political"
                ]
            },
            {
                "long_name": "United States",
                "short_name": "US",
                "types": [
                    "country",
                    "political"
                ]
            },
            {
                "long_name": "10007",
                "short_name": "10007",
                "types": [
                    "postal_code"
                ]
            }
        ],
        "formatted_address": "254 Broadway, New York, NY 10007, USA",
        "geometry": {
            "location": {
                "lat": 40.7129032,
                "lng": -74.0063033
            },
            "location_type": "ROOFTOP",
            "viewport": {
                "south": 40.7115542197085,
                "west": -74.0076522802915,
                "north": 40.7142521802915,
                "east": -74.00495431970849
            }
        },
        "place_id": "ChIJzwO0CyJawokRoSRPRCTv9II",
        "plus_code": {
            "compound_code": "PX7V+5F New York, NY, USA",
            "global_code": "87G7PX7V+5F"
        },
        "types": [
            "street_address"
        ]
    },
    "error": null
}

Answer 1

这是一个问题，因为 TSC 不知道该对象是否可以被字符串索引。这通常可以通过将要索引的任何内容键入 Record.

来解决

const data: Record<string, any> = ...;
data[key].address_components.forEach

你也可以投：

(data as Record<string, any>)[key]

打字稿：为来自 google JSON 的对象数组定义接口？

Typescript: Defining an interface for an array of objects from a google JSON?

javascript

reverse-geocoding

typescript

reactjs