Add Typescript support

[tobiasbueschel]

Is your feature request related to a problem? Please describe. I've integrated @googlemaps/extended-component-library into a React application and noticed that Typescript is not yet supported.

I've also installed @types/google.maps, but it doesn't contain type annotations for these extended components.

Describe the solution you'd like It would be great to include the types in this library or e.g., @types/google.maps.

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with :+1: so we can see what is popular when we triage.

@tobiasbueschel Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[leafsy]

Hi @tobiasbueschel , could you try setting moduleResolution to either "node16" or "bundler" in your project's tsconfig.json? (see TS Docs on the distinction and related question)

[mbench757]

While the specific issue can be solved by adding "/lib/" in the path, like this: @googlemaps/extended-component-library/lib/react, it is still very frustrating that there are a lot of issues when creating a .tsx file, based on the samples. Simply copying class App into a .tsx file has many issues. Very frustrating that this library is not plug and play.

[rek]

the lib in the path didn't fix things for us, so we are just removing the types for now, adding:

// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../../types.d.ts" />

and types.d.ts

declare module '@googlemaps/extended-component-library/react' {
  // Disable type checking for the named export `PlacePicker`
  export const PlacePicker: any;
}

which is a horrible work-around, but it let's us keep moving for now.

[HMubaireek]

Adding it to the paths in the main tsconfig.json for your project would solve the issue too:

"paths": {
      "@googlemaps/extended-component-library/react": [
        "node_modules/@googlemaps/extended-component-library/lib/react"
      ]
    }