在Vue.js TypeScript项目中使用JavaScript自定义Toast插件时，提示'$toast'属性不存在的问题咨询

这个问题的核心是TypeScript不知道你给Vue原型添加了$toast这个全局属性，所以需要手动扩展Vue的类型声明，让TypeScript识别这个新增的属性。下面是具体的解决步骤：

1. 定义$toast的类型接口 #

首先，根据你的Toast插件实际功能，定义$toast方法的参数和结构。比如如果你的$toast支持传入消息文本和可选配置项（比如显示时长、位置、类型），可以这样写：

// 先定义Toast的配置项类型（根据你的实际功能调整）
type ToastOptions = {
  duration?: number; // 显示时长，单位毫秒
  position?: 'top' | 'middle' | 'bottom'; // 显示位置
  type?: 'success' | 'error' | 'info'; // 提示类型
};

// 定义$toast的方法类型：可以直接调用，也可能包含子方法（比如$toast.success）
interface ToastApi {
  // 基础调用方式：$toast('提示消息')
  (message: string, options?: ToastOptions): void;
  // 如果有细分类型的方法，比如$toast.success('成功消息')
  success(message: string, options?: ToastOptions): void;
  error(message: string, options?: ToastOptions): void;
}

2. 扩展Vue的全局类型声明 #

创建一个类型声明文件（比如toast.d.ts），通过TypeScript的模块扩展机制，把$toast添加到Vue的类型系统中：

import Vue from 'vue';

// 这里复制上面定义的ToastOptions和ToastApi
type ToastOptions = {
  duration?: number;
  position?: 'top' | 'middle' | 'bottom';
  type?: 'success' | 'error' | 'info';
};

interface ToastApi {
  (message: string, options?: ToastOptions): void;
  success(message: string, options?: ToastOptions): void;
  error(message: string, options?: ToastOptions): void;
}

// 扩展Vue构造函数的静态属性（Vue.$toast）
declare module 'vue/types/vue' {
  interface VueConstructor {
    $toast: ToastApi;
  }
}

// 扩展Vue实例的属性（this.$toast）
declare module 'vue/types/vue' {
  interface Vue {
    $toast: ToastApi;
  }
}

3. 让TypeScript识别这个类型声明 #

如果你是在插件库中处理： #

• 在你的插件库的package.json中添加types字段，指向这个类型声明文件，确保其他项目安装时能自动识别类型：

  {
    "name": "your-toast-library",
    "version": "1.0.0",
    "types": "./src/toast/toast.d.ts"
    // 如果是打包后发布，就指向dist目录下的对应文件，比如"./dist/toast.d.ts"
  }
  

• 确保打包工具（比如webpack、rollup）把.d.ts文件包含在发布的npm包中。

如果你是在目标TypeScript项目中临时解决： #

• 在项目的src目录下创建vue-shim.d.ts（如果没有的话），把上面的类型扩展代码粘贴进去。TypeScript会自动扫描src目录下的类型声明文件。

4. 验证效果 #

重启你的TypeScript服务（比如重启VSCode，或者执行tsc --noEmit命令），再调用this.$toast('测试消息')或者this.$toast.success('成功提示')，类型错误就应该消失了。

内容的提问来源于stack exchange，提问作者Buda Sergiu Flavius