Property '$Message' does not exist on type 'MyClassName'

[itxor]

Good day! When trying to access the this.$Message variable, an error appears that the variable is not defined. This is the first time I work with ts and vue 3, probably I did not take into account something. Components in class-style style:

<script lang="ts">
import {Vue} from "vue-class-component";

const DEFAULT_LIMIT = 30;
const DEFAULT_PAGE = 1;

export default class FineListFilters extends Vue {
  getFines(): void {
    if (!this.validateForm()) {
      return;
    }

    this.$emit('test');
  }

  validateForm(): boolean {
    if (this.userId === null) {
      this.$Message.danger({ text: 'test' })

      return false;
    }
  }

  get userId(): number {
    return this.$store.state.userId;
  }
}
</script>

Error:

ERROR in src/components/MyComponentName.vue:90:12
TS2339: Property '$Message' does not exist on type 'FineListFilters'.
    88 |   validateForm(): boolean {
    89 |     if (this.userId === null) {
  > 90 |       this.$Message.danger({ text: 'test' })
       |                  ^^^^^^^^
    91 |
    92 |       return false;
    93 |     }

package.json:

{
  "name": "apidebug",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "equal-vue": "^0.74.0",
    "moment": "^2.29.1",
    "v-calendar": "^3.0.0-alpha.4",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-property-decorator": "^9.1.2",
    "vuex": "^4.0.0",
    "vuex-class": "^0.3.2",
    "vuex-class-modules": "^1.3.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "^4.5.12",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-vue-next": "~0.1.4"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.ts:

import { createApp } from 'vue';
import App from './App.vue'
import store from "@/store/store";
// @ts-ignore
import Equal from 'equal-vue';
import 'equal-vue/dist/style.css'

import VCalendar from 'v-calendar';

const app = createApp(App);
app.use(store);
app.use(Equal);
app.use(VCalendar, {
    componentPrefix: 'v'
});
app.mount('#app');

If i remove @ts-ignore then a get error:

ERROR in src/main.ts:4:19
TS7016: Could not find a declaration file for module 'equal-vue'. 'node_modules/equal-vue/dist/equal-vue.umd.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/equal-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'equal-vue';`
    2 | import App from './App.vue'
    3 | import store from "@/store/store";
  > 4 | import Equal from 'equal-vue';
      |                   ^^^^^^^^^^^
    5 | import 'equal-vue/dist/style.css'
    6 |
    7 | import VCalendar from 'v-calendar';

[geanjunior]

I have a similar issue. The framework are working fine of UI components, but when I'm trying to access the this.$Message on error is showed:

Failed to compile.

src/views/LicenceManagement.vue:362:10
TS2339: Property '$Message' does not exist on type 'LicenceManagement'.
    360 |     this.empresas = state.empresas;
    361 |
  > 362 |     this.$Message.success({ text: 'Success message!' });
        |          ^^^^^^^^
    363 |   }

some tip?