在外部JavaScript库中定义函数时，如何检查未定义？ （Angular4 / 5）

Question

在Angular 4中，我使用的是Google Analytics（分析），并且遇到常见错误“未定义ga”。
此问题并非特定于Google Analytics（分析），第三方JavaScript库可以是CanvasJS，PayPal ...

仅当我过早使用该错误时（例如ngInit），才会引发该错误，当我在某个事件的函数上调用它时，会很好。

HTML页面

<script>
    window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
    ga('create', 'UA-......', 'auto');
    ga('send', 'pageview', "home");
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

我的组件.ts文件

declare let ga: Function

@Component({...})
export class HomePageComponent implements OnInit {

    ngOnInit() {
        ga("send", "event", ...)
    }
}

我尝试过：

• ga && ga("send", "event", ...)
• if(ga !== undefined) ga("send", "event", ...)

浏览器中仍然有嘈杂的JavaScript错误。

使用try { ga("send", "event", ...) } catch (error) { }可以隐藏错误，但我希望进行适当的检查。
我也不想从JavaScrit负载中删除“异步”。

我如何检查是否定义了 ga （或任何外部库）？

---

已解决

如@Hien Nguyen所建议：

// when called from ngInit "ga" is still not defined
if(typeof ga === "function") 
    ga('send', 'event', ...)

Answer 1

您可以检查typeof ga === 'function'

@Component({...})
export class HomePageComponent implements OnInit {
  name = 'Angular';
  ga: Function;
  ngOnInit() {
    if (typeof this.ga === 'function') {
      this.ga("send", "event", "");
    }
  }
}

在控制台https://stackblitz.com/edit/angular-6t8kza中无例外演示

Answer 2

在您的HTML页面中，首先声明analytics.js，然后声明其余代码。

<script async src='https://www.google-analytics.com/analytics.js'></script>
<script>
window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
    ga('create', 'UA-......', 'auto');
    ga('send', 'pageview', "home");
</script>