Help to convert ionic 2 JS project to TS one


#1

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.


Problem files js/ts
#2

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


#3

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.


#4

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


#5

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:


#6

Thanks … but how you do that ?


#7

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


#8

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


#9

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


#10

What are your issues ?


#11

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


#12

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


#13

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


#14

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


#15

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


#16

I am glad it worked for you :slight_smile: