Typescript declaration is missing

[blugri]

npm install @types/vue-application-insights npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-application-insights - Not found npm ERR! 404 npm ERR! 404 '@types/vue-application-insights@latest' is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

[DavidDeSloovere]

Would be great if the package included typescript declaration. Separate types under @types is only an option if we can't get it in the original package. An example from another vue plugin: https://github.com/MatteoGabriele/vue-gtag (I'm using this because I jsut add this before vue-application-insights)

Something to get started:

declare module "vue-application-insights" {
  import VueRouter from "vue-router";
  import _Vue from "vue";

  export interface VueApplicationInsights {
    trackEvent(name: string, options: any): void;
  }
  export interface PluginOptions {
    id: string;
    baseName?: string;
    router?: VueRouter;
  }
  export class VueApplicationInsightsPlugin {
    static install(Vue: typeof _Vue, options: PluginOptions): void;
  }

  export default VueApplicationInsightsPlugin;

  module "vue/types/vue" {
    interface Vue {
      $appInsights: VueApplicationInsights;
    }
  }
}

[ux-engineer]

This would be nice to have.

[StefanSchoof]

@DavidDeSloovere thanks, I used this and extended it to use types form @microsoft/applicationinsights-web

declare module "vue-application-insights" {
    import { ApplicationInsights, IConfiguration } from "@microsoft/applicationinsights-web";
    import { IConfig } from "@microsoft/applicationinsights-common";
    import VueRouter from "vue-router";
    import _Vue from "vue";

    export interface VueApplicationInsightsPluginOptions {
        id?: string;
        appInsightsConfig?: IConfiguration & IConfig
        baseName?: string;
        router?: VueRouter;
    }
    export class VueApplicationInsightsPlugin {
        static install(Vue: typeof _Vue, options: VueApplicationInsightsPluginOptions): void;
    }

    export default VueApplicationInsightsPlugin;

    module "vue/types/vue" {
        interface Vue {
            $appInsights: ApplicationInsights;
        }
    }
}

[ux-engineer]

@StefanSchoof thanks! But how do you use SeverityLevels enum statically (after build)?

[StefanSchoof]

@ux-engineer I imported this enum from @microsoft/applicationinsights-web

import { SeverityLevel } from "@microsoft/applicationinsights-web";
...
Vue.config.warnHandler = (msg, vm, trace) => {
  vm.$appInsights.trackTrace({
    message: msg,
    properties: { trace },
    severityLevel: SeverityLevel.Warning
  });
  // Same as https://github.com/vuejs/vue/blob/b51430f598b354ed60851bb62885539bd25de3d8/src/core/util/debug.js#L24
  console.error(`[Vue warn]: ${msg}${trace}`);
};