Google's Place Autocomplete Address Form - Typescript error on indexing GeocoderAddressComponent with type any

Question

Running the following:

npm --version
7.4.0
 nvm --version
0.37.2
node --version
v15.6.0
tsc -v 
Version 4.1.3

lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 20.04 LTS
Release:        20.04
Codename:       focal

I setup the project using their example command:

npx @googlemaps/js-samples init places-autocomplete-addressform DESTINATION_FOLDER

The following source is Google's example code for Place Autocomplete Address Form. https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

// This sample uses the Autocomplete widget to help the user select a
// place, then it retrieves the address components associated with that
// place, and then it populates the form fields with those details.
// This sample requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script
// src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

let placeSearch: google.maps.places.PlacesService;
let autocomplete: google.maps.places.Autocomplete;

const componentForm = {
  street_number: "short_name",
  route: "long_name",
  locality: "long_name",
  administrative_area_level_1: "short_name",
  country: "long_name",
  postal_code: "short_name",
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search predictions to
  // geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
    document.getElementById("autocomplete") as HTMLInputElement,
    { types: ["geocode"] }
  );

  // Avoid paying for data that you don't need by restricting the set of
  // place fields that are returned to just the address components.
  autocomplete.setFields(["address_component"]);

  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();

  for (const component in componentForm) {
    (document.getElementById(component) as HTMLInputElement).value = "";
    (document.getElementById(component) as HTMLInputElement).disabled = false;
  }

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    const addressType = component.types[0];

    if (componentForm[addressType]) {
      const val = component[componentForm[addressType]];
      (document.getElementById(addressType) as HTMLInputElement).value = val;
    }
  }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      const geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      };
      const circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy,
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

I'm getting the following errors on VS Code

ERROR in /home/aamarin/dev/testing/src/index.ts
./src/index.ts
[tsl] ERROR in /home/aamarin/dev/testing/src/index.ts(69,9)
      TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ street_number: string; route: string; locality: string; administrative_area_level_1: string; country: string; postal_code: string; }'.
  No index signature with a parameter of type 'string' was found on type '{ street_number: string; route: string; locality: string; administrative_area_level_1: string; country: string; postal_code: string; }'.

ERROR in /home/aamarin/dev/testing/src/index.ts
./src/index.ts
[tsl] ERROR in /home/aamarin/dev/testing/src/index.ts(70,19)
      TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'GeocoderAddressComponent'.

ERROR in /home/aamarin/dev/testing/src/index.ts
./src/index.ts
[tsl] ERROR in /home/aamarin/dev/testing/src/index.ts(70,29)
      TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ street_number: string; route: string; locality: string; administrative_area_level_1: string; country: string; postal_code: string; }'.
  No index signature with a parameter of type 'string' was found on type '{ street_number: string; route: string; locality: string; administrative_area_level_1: string; country: string; postal_code: string; }'.

I did some Google searching and found examples that recommended adding more type information when indexing componentForm since the keys are strings by default (I think) and the values are also strings. So I modifed the following by referencing Enforcing the type of the indexed members of a Typescript object?

const componentForm : { [key: string]: string } = 

However, I am now seeing the following error.

ERROR in /home/aamarin/dev/testing/src/index.ts
./src/index.ts
[tsl] ERROR in /home/aamarin/dev/testing/src/index.ts(70,19)
      TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'GeocoderAddressComponent'.

It it complaining about this section in particular

const addressType = component.types[0];

if (componentForm[addressType]) {
  const val = component[componentForm[addressType]];
  (document.getElementById(addressType) as HTMLInputElement).value = val;
}

I can't figure out how to index GeocoderAddressComponent since the interface is two strings and an array of strings https://developers.google.com/maps/documentation/javascript/reference/geocoder#GeocoderAddressComponent. Any information would help. Thanks.

question from:https://stackoverflow.com/questions/65873447/googles-place-autocomplete-address-form-typescript-error-on-indexing-geocoder

Answer 1

Waitting for answers