Cannot build. TS errors about `notifications` prop in component

[trepichio]

TypeScript is giving a lot of warnings and it seems because it's not recognizing somehow properly use of Vue-notifications in my VueJS 2 with Typescript project.

I'm trying to use it only in one component for now, but it would be interesting to be used globally.

It works during development BUT I cannot build & deploy because of these errors. I did follow docs and some tips in forums, but couldn't get these errors fixed. I know just little about TS.

I appreciate any help!

Here are some of warnings (avoiding to show similar warnings):

The following repeats to every method declared inside notifications prop:

The following repeats to every parameter, but I tried to fix this by importing MessageData type from lib, but I don't know if this is the right approach. Doing so these warnings had gone however I had also to put empty strings as default values for title and message because there was a new error claiming undefined is not assignable to them. Again, I don't know if it is the right approach.

Its code in vuenotifications.ts file that it is imported in main.js:

[btalanski]

Maybe try changing you toast function to something like:

function toast(data: MessageData){
  const { type, message = '', title = '' } = data;
  let msgType = type === VueNotifications.type.warn ? 'warning' : type;
  return swal(title, message, msgType);
}

[trepichio]

I see. Now I understand the issue with type implicity has 'any'!

Thank you very much, @btalanski!

Now, there is still only one issue: the first one I had described it. Could you help with that too?

By using this plugin Vue.use(VueNotifications, options), the property notifications with the params for the toast in any component should be fine! But it's not. :(

This is the code:

import { VueExt } from "@/types";
import Vue, { VueConstructor } from "vue";
import VueNotifications from "vue-notifications";

// This is my fix to the issue with not building my own methods like onsubmit
declare module "vue/types/vue" {
  interface Vue {
    onsubmit: () => Promise<void>;
  }
}

export default (Vue as VueConstructor<VueExt>).extend({
  name: "FormTraderAccess",
  directives: {
    // ...
  },
  data: () => ({
    // ...
  }),
  methods: {
    //  ...,
    async onsubmit(): Promise<void> {
      if (this.radios) this.user.advisor = this.radios;

      try {
        const response = await this.$http.post("userform", this.user);
        this.showSuccessMsg({ message: response.data.message });
      //   ^   it says does not exist on type ...''CombinedVueInstance<VueExt, ..."
      } catch (err) {
        const errors = err.response.data.message;

        if (Array.isArray(errors)) {
          const errorMessages = errors.reduce((acc, cur) => {
            acc += `\u{27A1} ${cur}\n`;
            return acc;
          }, "");
          this.showErrorMsg({ message: errorMessages });
        // same here ^
        } else {
          this.showWarnMsg({ message: err.response.data.message });
        // same here ^
        }
      }
    },
  },
  // issues here, because of the plugin it should be fine but...
  notifications: {
  // ^ No overload matches this call.  The last overload gave the following error.
  //  Argument of type '{ name: string; directives: ...
  // Object literal may only specify known properties, and 'notifications' does not exist 
  // in type 'ComponentOptions<VueExt, ... 
    showSuccessMsg: {
    // ^
      type: VueNotifications.types.success,
      title: "Success!",
      message: "GREAT!",
    },
    showInfoMsg: {
    // ^
      type: VueNotifications.types.info,
      title: "Hey you",
      message: "Here is some info for you",
    },
    showWarnMsg: {
    // ^ 
      type: VueNotifications.types.warn,
      title: "Wow, man",
      message: "That's the kind of warning",
    },
    showErrorMsg: {
    // ^  
      type: VueNotifications.types.error,
      title: "Wow-wow",
      message: "That's the error",
    },
  },
});
</script>

[btalanski]

What if you start by typing it with any and then slowing add the interface(s) to find where exactly the issue is ? Maybe you need to extend the ComponentOptions interface and add your own implementation.