Suppress Typescript warnings

Question

I have following typescript code:

 private addBrowserNameAsCssClassToHtmlTag(): void {
  var rootElement = angular.element(document.querySelector("html"));
  if (this.isOpera()) {
    rootElement.addClass("opera-browser");
  } else if (this.isFirefox()) {
    rootElement.addClass("firefox-browser");
  } else if (this.isSafari()) {
    rootElement.addClass("safari-browser");
  } else if (this.isIE()) {
    rootElement.addClass("ie-browser");
  } else if (this.isChrome()) {
    rootElement.addClass("chrome-browser");
  }
}

private isOpera(): boolean {
  return (!!(<any>window).opr && !!(<any>opr).addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
}

private isFirefox(): boolean {
  //noinspection TypeScriptUnresolvedVariable
  return typeof InstallTrigger !== 'undefined';
}

private isSafari(): boolean {
  return /constructor/i.test(window.HTMLElement) || ((p): boolean => {
      return p.toString() === "[object SafariRemoteNotification]";
    })(!window['safari'] || safari.pushNotification);
}

private isIE(): boolean {
  return /*@cc_on!@*/false || !!window.document.documentMode;
}

private isChrome(): boolean {
  return !!window.chrome && !!window.chrome.webstore;
}

Code works fine but the problem is that it generates compile time errors:

error TS2304: Cannot find name 'opr'.
error TS2339: Property 'opera' does not exist on type 'Window'.
error TS2304: Cannot find name 'InstallTrigger'.
error TS2339: Property 'HTMLElement' does not exist on type 'Window'.
error TS2304: Cannot find name 'safari'.
error TS2339: Property 'documentMode' does not exist on type 'Document'.
error TS2339: Property 'chrome' does not exist on type 'Window'.
error TS2339: Property 'chrome' does not exist on type 'Window'.

If I wrote in plain javascript I wouldn't have any problem. How can I suppress compiler warnings concerning this part of code? Or maybe there is better solution which I don't know?

Answer 1

A solution:

declare const InstallTrigger: any;

class Abc {
    private addBrowserNameAsCssClassToHtmlTag(): void {
        var rootElement = angular.element(document.querySelector("html"));
        if (this.isOpera()) {
            rootElement.addClass("opera-browser");
        } else if (this.isFirefox()) {
            rootElement.addClass("firefox-browser");
        } else if (this.isSafari()) {
            rootElement.addClass("safari-browser");
        } else if (this.isIE()) {
            rootElement.addClass("ie-browser");
        } else if (this.isChrome()) {
            rootElement.addClass("chrome-browser");
        }
    }

    private isOpera(): boolean {
        return (!!window['opr'] && !!window['opr'].addons) || !!window['opera'] || navigator.userAgent.indexOf(' OPR/') >= 0;
    }

    private isFirefox(): boolean {
        //noinspection TypeScriptUnresolvedVariable
        return typeof InstallTrigger !== 'undefined';
    }

    private isSafari(): boolean {
        return /constructor/i.test(window['HTMLElement']) || ((p): boolean => {
            return p.toString() === "[object SafariRemoteNotification]";
        })(!window['safari'] || window['safari'].pushNotification);
    }

    private isIE(): boolean {
        return /*@cc_on!@*/false || !!window.document['documentMode'];
    }

    private isChrome(): boolean {
        return !!window['chrome'] && !!window['chrome'].webstore;
    }
}

Answer 2

Quick and dirty answer, use bracket notation, they are not type checked in TS

window["opera"]

Another option is to extend the global interfaces, when you build typescript the compiler includes a "base" .d.ts file, they are lib.d.ts or if targeting es6 its lib.es6.d.ts. To extends the global interfaces create a new .d.ts file. myGlobalExtentions.d.ts for example and include that in your build.

interface Window {
    opera:string;   
}

interface Document {
    documentMode:string;   
}

Answer 3

It is 2022 now; you can use -

// @ts-ignore

(copy that along with the //)

see also

// @ts-nocheck

which might fit in some cases