Vue.js 2 + TypeScript项目中全局正则插件的正确调用方式

1. 扩展Vue原型的类型声明 #

TypeScript无法识别自定义添加到Vue原型的$regex属性，需手动扩展Vue的类型定义。在src目录下创建类型声明文件（如vue-regex.d.ts），内容如下：

import Vue from 'vue';

// 定义正则工具对象的类型
interface RegexUtils {
  isEmail: (str: string) => boolean;
  // 按需添加其他正则方法的类型声明
}

// 扩展Vue原型接口
declare module 'vue/types/vue' {
  interface Vue {
    $regex: RegexUtils;
  }
}

2. 确保TypeScript识别声明文件 #

检查项目根目录的tsconfig.json，确认include数组包含该声明文件：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

3. 完善插件代码（可选，增强类型严谨性） #

保留原插件逻辑的同时，可给工具对象添加类型约束：

import Vue from "vue";

const regexUtils: RegexUtils = {
  isEmail(str: string): boolean {
    // 替换为你的实际正则校验逻辑
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
  }
  // 添加其他正则方法
};

Vue.prototype.$regex = regexUtils;

4. 组件中正常使用 #

此时在组件内调用this.$regex将不再触发类型报错：

methods: {
  isEmail(string: string): boolean {
    return this.$regex.isEmail(string);
  }
}

内容的提问来源于stack exchange，提问作者jogarcia