使用帶有自定義界面的 Google Adsense 的 TypeScript

Question

我按照教程在我的 Angular 應用程序中使用 Google Adsense。 這是結果：

在 index.html 中：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-1223823-NOT-MY-ACTUALLY-ID', 'auto');  // Change the UA-ID to the one you got from Google Analytics

</script>

這是我的 app.component.ts：

import {Component} from '@angular/core';
import {NavigationEnd, Router} from '@angular/router';

// declare ga as a function to set and sent the events
declare let ga: Function;  // <-- Here is the "Error"

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'news-bootstrap';
  constructor(public router: Router) {
    // subscribe to router events and send page views to Google Analytics
    this.router.events.subscribe(event => {

      if (event instanceof NavigationEnd) {
        ga('set', 'page', event.urlAfterRedirects);
        ga('send', 'pageview');
      }
    });
  }
}

TsLint 不喜歡“declare let ga: Function”這一行： TSLint: Don't use 'Function' as a type. Avoid using the `Function` type. Prefer a specific function type, like `() => void`.(ban-types) TSLint: Don't use 'Function' as a type. Avoid using the `Function` type. Prefer a specific function type, like `() => void`.(ban-types)

這如何與接口一起工作？

我需要一個帶有 setPage(urlAfterRedirects: string) 和 sendPageView() 方法的接口，其屬性 ga 通過 index.html js 腳本鏈接。 這甚至是“正確的方法”嗎？ 在這種情況下，“避免使用Function類型”的最佳方法是什么？

EDIT1：我可以改變 ga('create', 'UA-1223823-NOT-MY-ACTUALLY-ID', 'auto'); 接口也有函數？

Answer 1

問題

當您聲明一個變量的類型為Function您是在告訴打字稿“這是一個函數，任何數量的參數都是任何類型並返回任何內容。” 那里有很多未知數。

當您嘗試調用該函數時，typescript 無法檢查您是否使用正確的參數調用它，因為它不知道參數應該是什么。 它要求您提供一種定義函數特定簽名的類型。

簡單的解決方案

對於ga函數，我們可以得到更具體或更具體的信息。 這是一個“更具體的”，涵蓋了您正在撥打的兩個電話：

type GA = (action: string, field: string, value?: string) => void;

這表示我們的type GA是一個函數，它接受兩個或三個參數，這些參數都是字符串並且不返回任何內容。

復雜性

實際上，有一種用於調用 'set' 的替代語法，它也是有效的，但上述type GA定義不支持。

您可以通過將字段和值作為單獨的參數傳遞給函數來設置一個字段和一個值，這就是您正在執行的操作。

ga('set', 'page', '/about');

但您也可以傳遞字段和值的對象：

ga('set', {
  page: '/about',
  title: 'About Us'
});

有很多字段，並不是所有字段都是string ，因此“更具體”將是一個類型定義，可確保所有字段名稱都有效並且所有值都與特定字段匹配。

幸運的是，有一個現有的類型包已經完成了這項工作。 看起來他們正在聲明一個全局 var ga （以及其他一些），所以你根本不需要你的declare let ga 。 （但我無法在 TS Playground 中使用它。）

抽象

您還要求創建一個界面，作為您和底層ga對象之間的外觀，使其使用起來更加直觀。 這不是必需品，但它可能很有用。 這是我發現的一篇關於為事件跟蹤執行此操作的文章，他們使用打字稿來描述他們想要跟蹤的特定事件，因為 ga 幾乎允許任何事情。

你的界面是這樣的：

interface MyGaTracker {
    setPage(urlAfterRedirects: string): void;
    sendPageView(): void;
}

您可以使用類或普通對象來實現它：

export const Tracker: MyGaTracker = {
    setPage: (urlAfterRedirects: string): void => {
        ga('set', 'page', urlAfterRedirects);
    },
    sendPageView: (): void => {
        ga('send', 'pageview');
    }
}

打字稿游樂場鏈接