vue3 中 this.$message ts类型添加

在 Vue 3 中，使用 `this.$message` 显示消息通知需要通过第三方库或自己封装实现，因此不同的库或封装方式可能会有不同的类型定义方式。以下是一种可能的实现方式：

1. 安装 `vue3-toastification` 库

npm install vue3-toastification

2. 在组件中引入并使用 `createToast` 方法

<template>
  <button @click="showToast">显示消息通知</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { createToast, ToastPosition, ToastType } from 'vue3-toastification'

export default defineComponent({
  methods: {
    showToast() {
      createToast({
        message: 'Hello, world!',
        position: ToastPosition.BOTTOM_CENTER,
        type: ToastType.SUCCESS,
      })
    }
  }
})
</script>

3. 在 `src/shims-vue.d.ts` 文件中添加以下代码：

import { ToastOptions } from 'vue3-toastification'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $toast(options: ToastOptions): void
  }
}

4. 在 `main.ts` 文件中全局注册 `$toast` 方法

import { createApp } from 'vue'
import App from './App.vue'
import { createApp } from 'vue'
import { createToast } from 'vue3-toastification'

const app = createApp(App)

app.config.globalProperties.$toast = createToast

现在，您可以在组件中使用 `this.$toast(options)` 显示消息通知，并且 TypeScript 会自动识别 `$toast` 属性的类型。