React-google-maps: Create TypeScript definitions

[tomchentw]

[tomchentw]

Anyone interested?

[dvlasenko96]

@tomchentw Yes. Please create definition. I am using typescript on my project, but there are no .d.ts gile for maps. Thank you.

[mxl]

Should I create PR here or in https://github.com/DefinitelyTyped/DefinitelyTyped?

[tomchentw]

@mxl you can create PR here.

[AAllport]

Any update on this?

[oshalygin]

I haven't used typescript in about a year, going to defer this to someone else thats more familiar and can crank it out without reading alot of docs

[mxl]

I'm almost done writing definitions and will submit PR this weekend.

[tomchentw]

@mxl you're awesome!

[mxl]

@tomchentw Sorry, I was busy on that weekend. I will finish the work this week.

[tomchentw]

No rush.

[kenjiru]

@mxl no rush, but please keep us posted regarding the progress on this issue.

[simran5]

also interested in this

[tomchentw]

PR's are welcomed!
Also, you may be interested to generate typed code from src/macro directly using jscodeshift API. That could save you lots of time.

[mxl]

Guys, sorry for late response. I've continued my work on definitions. See #646.

[mxl]

I've almost finished definitions. You can test them by installing react-google-maps with npm install github:mxl/react-google-maps#typescript-definitions.

[ChuckJonas]

also interested

[tomchentw]

Released v9.3.0

[israellev]

If you has an error like - Cannot find namespace 'google' or Cannot find name 'Calculator':
pay attention that in library in node_modules/react-google-maps/package.json it's a peerDependencies that you relay need:
npm i --save @types/googlemaps
npm i --save @types/markerclustererplus

and it's spouse to work.

[afholderman]

Has anyone been able to get this to work that can share an example? Using examples from the documentation I'm still met with TS errors.

[mxl]

@afholderman What errors do you have?

[afholderman]

@mxl

Given this component (imports left out to keep it shorter):

export const MyGoogleMap = compose(
  withProps({
    googleMapURL: 'https://maps.googleapis.com/maps/api/js?key=[removed]&v=3.exp&libraries=geometry,drawing,places',
    loadingElement: <div style={{ height: '100%' }} />,
    containerElement: <div style={{ height: '400px' }} />,
    mapElement: <div style={{ height: '100%' }} />,
  }),
  withScriptjs,
  withGoogleMap
  )( (props) => (
    <GoogleMap
      defaultZoom={8}
      defaultCenter={{ lat: -34.397, lng: 150.644 }}
      center={props.center}
    />
  )
);

<MyGoogleMap
  center={{ lat: 38.6270, lng: -90.1994 }}
/>

Typescript throwing the error: TS2339: Property 'center' does not exist on type '{ children?: ReactNode; }'.
Even though center is a documented prop on the GoogleMap component. I tested this same component in a non-Typescript create-react-app and it works as expected.

[mxl]

@afholderman I think that this error is about props that you pass to closure that returns GoogleMap element, not about GoogleMap props.

[bharney]

In addition to installing the type definitions for @types/googlemaps @types/markerclustererplus I also needed to add them to my configuration to resolve errors related to: 'Cannot find name 'Calculator'. or 'Cannot find module 'google'.
I added the following to my tsconfig.json

"types": [
      "googlemaps",
      "markerclustererplus"
 ],

And it works now!

[atrauzzi]

You shouldn't have to do that, the types should auto-discover once in the node_modules folder. Any chance you can show the rest of your tsconfig.json?

[laukaichung]

Anyone using Webstorm? I'm getting a warning about Cannot find parent 'tsconfig.json' from /.../node_modules/@ types/googlemaps/index.d.ts

[AAllport]

I'm on Webstorm, what steps did you take to reproduce

On 1 Feb 2018 08:20, "stonecold123" [e-mail] wrote:

Anyone using Webstorm? I'm getting a warning about Cannot find parent
'tsconfig.json' from /.../node_modules//index.d.ts

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/tomchentw/react-google-maps/issues/363#issuecomment-362191500,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADk46KIJJH8CnzcdwgeVyA1J-jTfkwDlks5tQXOkgaJpZM4KXKPA
.

[laukaichung]

@AAllport
I installed the type file with npm i --save @types/googlemaps
I think the problem comes from the exclude settings in tsconfig.json
{ "compileOnSave": true, "compilerOptions": { "module": "commonjs", "target": "es2015" }, "exclude": [ "node_modules" ] }
The warning disappears after "node_modules" is removed.

[AAllport]

are you using webpack or any bundler?

On 1 February 2018 at 08:39, stonecold123 [e-mail] wrote:

@AAllport https://github.com/aallport
I installed the type file with npm i --save @types/googlemaps
I think the problem comes from the exclude settings in tsconfig.json

{
"compileOnSave": true,
"compilerOptions": {
"module": "commonjs",
"target": "es2015"
},
"exclude": [
"node_modules",
]
}

The warning disappears after "node_modules" is removed.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/tomchentw/react-google-maps/issues/363#issuecomment-362196082,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADk46EIHe198QMfVH5igbcZFZp2GQH7Zks5tQXhEgaJpZM4KXKPA
.

[Anees-Raja]

Do I need webpack or a bundler to use this component? I keep getting the following error:

./src/app/components/CustomMap/CustomMap.js Module parse failed: \src\app\components\CustomMap\CustomMap.js Unexpected token (6:4) You may need an appropriate loader to handle this file type. | | const CustomMap = withScriptjs(withGoogleMap((props) => | <GoogleMap | defaultZoom={8} | defaultCenter={{ lat: -34.397, lng: 150.644 }}

[baughmann]

Why is this closed?

[digital-nomad17]

@mxl
Has your type definitions for react-google-maps been merged? I can't find on npm.

[mxl]

@digital-nomad17 Yes, they are installed with this module. Also you need definitions for googlemaps and markerclustererplus modules:

npm i --save react-google-maps @types/googlemaps @types/markerclustererplus

[digital-nomad17]

@mxl
Thank you!

Can we add notes to the github page for the typedefiniton file so people can find them?

[mxl]

@digital-nomad17 Actually it's better to move definitions to separate module and make it depend on @types/googlemaps and @types/marlerclustererplus or add them to dependencies for this module. @tomchentw what is your decision?

[baughmann]

@mxl running npm i --save react-google-maps @types/googlemaps @types/markerclustererplus and then importing import {GoogleMap, withGoogleMap, withScriptjs} from 'react-google-maps' results in a bunch of TS2503: Cannot find namespace 'google'.. Is this the expected result? Is there more work to do on my end?

[williamsb]

Just an FYI for anyone having trouble importing snazzymaps styles (on typescript), make sure you are using the correct type for "stylers"
snazzymaps default:

"stylers": [ { "saturation": "13" }, { "lightness": "4" } ]

should be:

"stylers": [ { "saturation": 13 }, { "lightness": 4 } ]

types based on:

export interface MapTypeStyler {
   color?: string;
   gamma?: number;
   hue?: string;
   invert_lightness?: boolean;
   lightness?: number;
   saturation?: number;
   visibility?: string;
   weight?: number;
}

[alamothe]

Impressive type definitions!