Help to convert ionic 2 JS project to TS one

Ionic 2 does not support JS any more so I’m trying to convert the app I’m working on in TS.
But I have a lot of problems.
Basicly my app show a google map with markers and it is working very well in beta 8.

  1. The map is based on this great tutorial by Josh Morony : http://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/
  2. I’m using the js lib Markerclusterer to … cluster the markers : https://github.com/googlemaps/js-marker-clusterer

For the moment I already converted almost all the JS code in my /app directory to TS but I’m facing critical errors that I actually don’t know how to solve :frowning:

  1. Despite Josh tutorial is written in TS I have some errors
    1.1- To use the Google Maps api callback function “mapInit” : Now I have this error :

TypeScript error: D:/DEV/projets/treizeaccv5/app/pages/map/map.ts(103,20): Error TS2339: Property ‘mapInit’ does not exist on type ‘Window’.

OK 1.1 solved with :(<any>window).mapInit()

1-2 - The connectivity-service does not work any more, now I have this error :

TypeScript error: D:/DEV/projets/treizeaccv5/app/providers/connectivity-service/
connectivity-service.ts(27,36): Error TS2339: Property ‘connection’ does not exi
st on type ‘Navigator’.
TypeScript error: D:/DEV/projets/treizeaccv5/app/providers/connectivity-service/
connectivity-service.ts(29,31): Error TS2304: Cannot find name ‘Connection’.

  1. I did not find the way to include the markerclusterer JS libary, so I have copied/pasted the code in my ionic page and converted thoses functions in classes. It was working well in JS, but now I dont know how to use this (vital for me) library.
    I tryed to install the library through npm (https://www.npmjs.com/package/markerclustererplus) and to install the definition file as mentioned in this tutorial : http://mhartington.io/post/ionic2-external-libraries/

Now I have

  • A new “markerclustererplus” directory in node_module
  • my d.ts file is here : /typings/globals/markerclustererplus/index.d.ts
  • I added /// <reference path="globals/markerclustererplus/index.d.ts" /> in /typings/index.d.ts
  • I also have /typings/globals/google.maps/index.d.ts for the Google Maps library

But when I put " import {MarkerClusterer} from ‘markerclustererplus’; " in my ionic page I get

ionic $ Error: Cannot find module ‘markerclustererplus’ from ‘D:\DEV\projets\tre
izeaccv5\app\pages\map’

If a kind soul can help me to make progress with these problems I would be very grateful !

Many thanks in advance for your help.

I’m on a beta10 app with “plain ES"javascript” and it’s working fine…

For the first issue, when you have things that pollute the window namespace, the easiest workaround is to temporarily cast window to any: (<any>window).mapInit(). Not something you want to get in the habit of doing, but occasionally useful.

in my opinion, ts is the superset of js.
despite ionic start does not support js, js still can be used.
i prefer js, because use npm packages in ts is so trouble

Thinks a lot !
I still have a blank page because of my other errors but I don’t have the error under ionic serve and VSC !
One problem solved :slight_smile:

Thanks … but how you do that ?

Ok thanks for your comment but could you tell me more how to do ?

I have no idea for the connectivity-service errors so I deactivated it !

For the Markercluterer library, I put the markerclusterer.js in www/js directory and add the script call in index.html

The map and the clusters work now !! … but all my ion-navbar are missing !!! :unamused:

EDIT : It’s now OK for the navbar

do you have the app on git?
I have the same issues :frowning:

What are your issues ?

Navigator errors.
But I finally solved it. I had to add typescript definitions, and it works now :slight_smile:
Thanks!

Hi, Do you have any ideas for the connectivity service, because the ionic doc on Connection is a little bit short …

To solve this I have added typescript definition.
check typings in my repository. https://github.com/alexandrzavalii/ionic2-advanced-map

Thank for your response , I have found an other way to do that

Yes !! Thanks a lot for your help :+1:
Now all my app works under beta 10

I am glad it worked for you :slight_smile: