TypeScript support for @analytics/google-tag-manager

I am using @analytics/google-tag-manager. I saw analytics have TypeScript support while @analytics/google-tag-manager not.

When add

import googleTagManager from '@analytics/google-tag-manager';

got

TS7016: Could not find a declaration file for module ‘@analytics/google-tag-manager’. ‘/hongbomiao.com/client/node_modules/@analytics/google-tag-manager/lib/analytics-plugin-google-tag-manager.cjs.js’ implicitly has an ‘any’ type.   Try npm install @types/analytics__google-tag-manager if it exists or add a new declaration (.d.ts) file containing declare module '@analytics/google-tag-manager';

It would be great to add TypeScript in future. Thanks! : )

[GeoMarkou]

As a workaround I added this code in a Types.ts file

declare module '@analytics/google-analytics' {
    type GoogleAnalyticsOptions = {
        /** Google Analytics site tracking Id */
        trackingId:string;

        /** Enable Google Analytics debug mode */
        debug?:boolean;

        /** Enable Anonymizing IP addresses sent to Google Analytics. See details below */
        anonymizeIp?:boolean;

        /** Map Custom dimensions to send extra information to Google Analytics. See details below */
        customDimensions?:object;

        /** Reset custom dimensions by key on analytics.page() calls. Useful for single page apps. */
        resetCustomDimensionsOnPage?:object;

        /** Mapped dimensions will be set to the page & sent as properties of all subsequent events on that page. If false, analytics will only pass custom dimensions as part of individual events */
        setCustomDimensionsToPage?:boolean;

        /** Custom tracker name for google analytics. Use this if you need multiple googleAnalytics scripts loaded */
        instanceName?:string;

        /** Custom URL for google analytics script, if proxying calls */
        customScriptSrc?:string;

        /** Additional cookie properties for configuring the ga cookie */
        cookieConfig?:object;

        /** Set custom google analytic tasks */
        tasks?:object;
    };
    
    type AnalyticsPlugin = {
        /** Name of plugin */
        name: string;

        /** exposed events of plugin */
        EVENTS?: any;

        /** Configuration of plugin */
        config?: any;

        /** Load analytics scripts method */
        initialize?: (...params: any[]) => any;

        /** Page visit tracking method */
        page?: (...params: any[]) => any;

        /** Custom event tracking method */
        track?: (...params: any[]) => any;

        /** User identify method */
        identify?: (...params: any[]) => any;

        /** Function to determine if analytics script loaded */
        loaded?: (...params: any[]) => any;

        /** Fire function when plugin ready */
        ready?: (...params: any[]) => any;
    };

    function GoogleAnalytics (options:GoogleAnalyticsOptions):AnalyticsPlugin;
    export default GoogleAnalytics;
}

[livthomas]

The original question was about @analytics/google-tag-manager. And although @GeoMarkou posted a really good workaround for @analytics/google-analytics, those types are a little bit different.

Here are the types for @analytics/google-tag-manager package:

declare module '@analytics/google-tag-manager' {
  type AnalyticsPlugin = import('analytics').AnalyticsPlugin;

  type GoogleTagManagerConfig = {
    auth?: string;
    containerId: string;
    customScriptSrc?: string;
    dataLayerName?: string;
    debug?: boolean;
    execution?: string;
    preview?: string;
  };

  function googleTagManager(config: GoogleTagManagerConfig): AnalyticsPlugin;
  export default googleTagManager;
}