window.webkit in Typescript

Question

I need to rewrite a javascript code into typescript (angular), the webpage is opened by an IOS app or an Android app. I just want to send a message to the application.

How can i do to send a message to the parent app or how can i use window.webkit ?

notifyTheApp(postData) {
  if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    if(window.webkit.messageHandlers)      
     window.webkit.messageHandlers.mpos.postMessage(JSON.stringify(postData));
    } 
    else {
      if(window.external.notify)
        window.external.notify(JSON.stringify(postData));
    }

mpos is the iOS application

ERROR in src/app/sms-validation/sms-validation.component.ts(98,17): error TS2339: Property 'webkit' does not exist on type 'Window'.

Answer 1

You can use type assertion (https://basarat.gitbooks.io/typescript/content/docs/types/type-assertion.html) to temporarily cast window the any type. You will loose intellisense for that statement though.

(window as any).webkit.messageHandlers

Answer 2

I reckon window.webkit is pretty far from the standard, and it's therefore not part of the window type in Typescript. You can add it like this:

interface Window {
    webkit?: any;
}

declare var window: Window;

Note that webkit? means that the property is optional, so you should do some checking on whether the property exists or not.