Sentry-javascript: TypeScript types for existing Raven plugins

[eritikass]

What is the current behavior?

I try to add raven to vue project that is using typescript.

import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
import Vue from 'vue';

however, this ends up with error as typescript types for raven do not extend to plugins

Error at src/sentry.ts:2:27: Could not find a declaration file for module 'raven-js/plugins/vue'. '/..../node_modules/raven-js/plugins/vue.js' implicitly has an 'any' type.

Raven 3.22.1 is used from npm package.

[kamilogorek]

Correct, we don't have types for plugins. Feel free to open a PR for them, although, they are so small, that interfaces can be in most cases just written inline.

[marocchino]

I declare module like this in our own project.

declare module 'raven-js/plugins/vue' {
  import Vue from 'vue';
  import { RavenStatic } from 'raven-js';
  function vuePlugin(raven: RavenStatic, vue: Vue): RavenStatic;
  export = vuePlugin;
}

This definition is fine for me, but not for other users who do not use Vue.
Unless we solve this dependency problem, it's hard to put types in plugins.

[wjdp]

@marocchino How would I get the above working in my project?

I have your snippet in raven-vue.d.ts in the root of my project and then the following in my root TS file:

import Vue from "vue";
import * as Raven from "raven-js";
import * as RavenVue from 'raven-js/plugins/vue';
Raven
    .config(…

This gives the following:

TS2497: Module ''raven-js/plugins/vue'' resolves to a non-module entity and cannot be imported using this construct.

[wjdp]

Just solved the above by:

• import RavenVue from 'raven-js/plugins/vue';
• Same definition from @marocchino
• Setting allowSyntheticDefaultImports to true in my tsconfig.json (See https://github.com/Microsoft/TypeScript/issues/3337)

[milky2028]

I'm having trouble figuring out the exact syntax to get this working as well. @wjdp, what did you end up using? Thank you

[kamilogorek]

All integrations in new SDK are completely written in TypeScript - https://github.com/getsentry/sentry-javascript/tree/master/packages/browser/src/integrations/pluggable so this shouldn't be an issue anymore.

[wjdp]

@milky2028 Looking at my source I've ended up with

   1   │ import Vue from "vue";
   2   │ import * as Raven from "raven-js";
   3   │ import RavenVue from 'raven-js/plugins/vue';

and this file

───────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       │ File: local/xyz/js/raven-vue.d.ts
───────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1   │ declare module 'raven-js/plugins/vue' {
   2   │   import Vue from 'vue';
   3   │   import { RavenStatic } from 'raven-js';
   4   │   function vuePlugin(raven: RavenStatic, vue: Vue): RavenStatic;
   5   │   export = vuePlugin;
   6   │ }

[wjdp]

But given this is now fixed, probably not much use :laughing:

[WORMSS]

I had to use @marocchino 's

declare module 'raven-js/plugins/vue' {
  import Vue from 'vue';
  import { RavenStatic } from 'raven-js';
  function vuePlugin(raven: RavenStatic, vue: Vue): RavenStatic;
  export = vuePlugin;
}

in a .d.ts file within our client to get this to stop crying at us. So I am not sure what "this is now fixed" @wjdp is referring to?

[kamilogorek]

@WORMSS probably that new SDK is all written in the TypeScript :)