Help to convert ionic 2 JS project to TS one

Ionic Framework ionic-v3
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 : Creating an Advanced Google Maps Component in Ionic 2 | Josh Morony
  2. I’m using the js lib Markerclusterer to … cluster the markers : GitHub - googlearchive/js-marker-clusterer: A marker clustering library for the Google Maps JavaScript API v3.

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 (markerclustererplus - npm) and to install the definition file as mentioned in this tutorial : Ionic 2 and 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.

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. GitHub - alexandrzavalii/ionic2-advanced-map: ionic2 google api

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: