mvertopoulos / vue-msal

Vue plugin for using Microsoft Authentication Library (MSAL)
MIT License
123 stars 66 forks source link

Typescript support #4

Closed Sodininkas closed 4 years ago

Sodininkas commented 4 years ago

Hello, how correctly use this library with typescript? I would like to see vue.$msal.

I'm using like this

import { MSALBasic } from 'vue-msal/lib/src/types'
declare module 'vue/types/vue' {
  interface Vue {
    $msal: MSALBasic
  }
}

Is it correct?

Also if i import vue-msal like this: import msal from 'vue-msal/lib/plugin'

I got many implicit errors

mvertopoulos commented 4 years ago

Hi! I am sorry, but I am not sure I understand your question. Are you using vue.js with typescript support? What kind of errors are you getting? Could you share a complete example?

mvertopoulos commented 4 years ago

Closing issue as there has been no answer for a while

drovani commented 4 years ago

I'm not sure if it's better to comment on this closed issue, 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.