Typescript support

I’m not sure if it’s better to comment on #4, or create a new one - but I, too, am having trouble getting this to work with Typescript.

My main.ts file looks like this:

import Vue from "vue";
import msal from "vue-msal";

Vue.use(msal, {
  auth: {
    clientId: "clientid"
  {
});

new Vue({
    //...
    created() {
        if (!this.$msal.isAuthenticated()) {
            this.$msal.signIn();
        }
    }
});

I get the error message of Could not find a declaration file for module ‘vue-msal’. Type ‘npm install @types/vue-msal’ if it exists or add a new declaration (.d.ts) file containing ‘declare module ‘vue-msal’;’. I have created the file /src/vue-msal.shims.d.ts:

declare module ‘vue-msal’; Doing so resolves the first error. However, now I am receiving an error on the this.$msal line of Property ‘$msal’ does not exist on type ‘CombinedVueInstance<Vue, Data, Methods, Computed, Readonly<Record<PropNames, any>>>’. Based on a bit of Googling, the solution seems to be “Augmenting Types for Use with Plugins”

I created another shim file /src/vue.msal.shims.d.ts with the content:

import Vue from 'vue';
import msal from 'vue-msal';

declare module 'vue/type/vue'{
  interface Vue{
    $msal: msal;
  }
}

Now I have an issue where the $msal: msal; line in the shims file has an error of Cannot use namespace ‘msal’ as a type… At this point I’m lost as to what I need to put in this shim to make everything work. Do you have an pointers that might help?

Thank you.

[blakeja]

Had to do the following to get this working:

• In tsconfig.json, add "noImplicitAny": false to compilerOptions.
• In my project, under \src created a new file named msal.d.ts that looks like this:

import Vue from 'vue';
import { MSALBasic } from 'vue-msal/lib/src/types'

declare module 'vue/types/vue' {
  interface Vue {
    $msal: MSALBasic;
  }
}

@drovani was close, but there was typo: declare module 'vue/type/vue' should have been declare module 'vue/types/vue'.

I believe these problems could be avoided by including a type definition file in the plugin itself, see Augmenting Types for Use with Plugins as mentioned above.

[thomas-jackson-finx]

Hello, Can anyone help me with this problem?